@classic-homes/theme-svelte 1.15.3 → 1.17.0

package/dist/__tests__/alert-dialog-dismiss.test.js

@@ -0,0 +1,54 @@
+/**
+ * AlertDialog: however it closes — Cancel, confirm, Escape — exactly one of
+ * onConfirm / onCancel runs, so `{#if x}<AlertDialog open onCancel=…>` callers
+ * can reset their state on Escape too.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, tick } from 'svelte';
+import AlertDialog from '../lib/components/AlertDialog.svelte';
+let instance = null;
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    document.body.innerHTML = '';
+});
+async function mountOpen() {
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+    instance = mount(AlertDialog, {
+        target: document.body,
+        props: { open: true, title: 'Delete?', onConfirm, onCancel },
+    });
+    flushSync();
+    await tick();
+    const button = (label) => [...document.querySelectorAll('button')].find((b) => b.textContent?.trim() === label);
+    return { onConfirm, onCancel, button };
+}
+describe('AlertDialog dismiss', () => {
+    it('calls onCancel once on Cancel', async () => {
+        const { onConfirm, onCancel, button } = await mountOpen();
+        button('Cancel').click();
+        flushSync();
+        await tick();
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onConfirm).not.toHaveBeenCalled();
+    });
+    it('calls onConfirm once and not onCancel on confirm', async () => {
+        const { onConfirm, onCancel, button } = await mountOpen();
+        button('Continue').click();
+        flushSync();
+        await tick();
+        expect(onConfirm).toHaveBeenCalledTimes(1);
+        expect(onCancel).not.toHaveBeenCalled();
+    });
+    it('calls onCancel on Escape', async () => {
+        const { onConfirm, onCancel } = await mountOpen();
+        const content = document.querySelector('[role="alertdialog"]');
+        content.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        flushSync();
+        await tick();
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onConfirm).not.toHaveBeenCalled();
+    });
+});

package/dist/__tests__/dropdown-trigger.test.js

@@ -0,0 +1,30 @@
+/**
+ * DropdownMenu trigger styling
+ *
+ * `triggerVariant` styles the trigger <button> as a Button variant, so a menu
+ * in a header looks like the buttons beside it without app-side classes.
+ * Without it the trigger stays unstyled, as before.
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DropdownMenu from '../lib/components/DropdownMenu.svelte';
+import { buttonVariants } from '../lib/components/button-variants.js';
+const trigger = createRawSnippet(() => ({ render: () => '<span>Menu</span>' }));
+const items = [{ label: 'One', href: '/one' }];
+describe('DropdownMenu trigger', () => {
+    it('is unstyled by default', () => {
+        render(DropdownMenu, { props: { items, trigger, triggerClass: 'custom' } });
+        expect(screen.getByRole('button', { name: 'Menu' }).className).toBe('custom');
+    });
+    it('takes Button variant classes from triggerVariant, plus triggerClass', () => {
+        render(DropdownMenu, {
+            props: { items, trigger, triggerVariant: 'ghost', triggerClass: 'custom' },
+        });
+        const button = screen.getByRole('button', { name: 'Menu' });
+        for (const cls of buttonVariants({ variant: 'ghost', size: 'sm' }).split(' ')) {
+            expect(button.classList.contains(cls)).toBe(true);
+        }
+        expect(button.classList.contains('custom')).toBe(true);
+    });
+});

package/dist/__tests__/public-layout-drawer.test.js

@@ -0,0 +1,116 @@
+/**
+ * PublicLayout mobileNavStyle="drawer": the hamburger opens the Sidebar drawer
+ * over the page instead of expanding a dropdown inside the header (which pushed
+ * the page down and, once scrolled, sat on the header's translucent bar).
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
+import PublicLayout from '../lib/components/layout/PublicLayout.svelte';
+const children = createRawSnippet(() => ({ render: () => '<p>Page</p>' }));
+const navigation = [
+    { id: 'inventory', name: 'Inventory', href: '/inventory', active: true },
+    { id: 'pricing', name: 'Pricing', href: '/pricing' },
+];
+let instance = null;
+let host;
+function phoneWidth(matches) {
+    vi.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+        matches: query.startsWith('(max-width') ? matches : false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    }));
+}
+function mountLayout(props) {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    instance = mount(PublicLayout, { target: host, props: { navigation, children, ...props } });
+    flushSync();
+    const hamburger = () => host.querySelector('button[aria-label="Open menu"]');
+    return {
+        open: () => {
+            hamburger().click();
+            flushSync();
+        },
+        drawer: () => host.querySelector('aside[aria-label="Main navigation"]'),
+        dropdown: () => host.querySelector('nav[aria-label="Mobile navigation"]'),
+        header: () => host.querySelector('header'),
+    };
+}
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    host?.remove();
+    vi.restoreAllMocks();
+});
+describe('PublicLayout drawer nav', () => {
+    it('opens the Sidebar drawer over the page on a phone', () => {
+        phoneWidth(true);
+        const layout = mountLayout({ mobileNavStyle: 'drawer' });
+        // Closed drawer is off-canvas (jsdom does not reflect `inert`)
+        expect(layout.drawer()?.className).toContain('-translate-x-full');
+        layout.open();
+        expect(layout.drawer()?.className).not.toContain('-translate-x-full');
+        expect(layout.drawer()?.textContent).toContain('Pricing');
+        // No dropdown inside the header
+        expect(layout.dropdown()?.textContent ?? '').not.toContain('Pricing');
+        // Drawer and scrim lift over the elevated header and page sheets
+        const layer = layout.drawer().parentElement;
+        expect(layer.style.getPropertyValue('--z-sidebar')).toBe('70');
+        expect(layer.querySelector('[aria-hidden="true"].fixed.inset-0')).not.toBeNull();
+    });
+    it('renders no drawer above the breakpoint', () => {
+        phoneWidth(false);
+        const layout = mountLayout({ mobileNavStyle: 'drawer' });
+        expect(layout.drawer()).toBeNull();
+    });
+    it('keeps the dropdown by default, on a solid background', () => {
+        phoneWidth(true);
+        const layout = mountLayout({});
+        layout.open();
+        expect(layout.drawer()).toBeNull();
+        expect(layout.dropdown()?.textContent).toContain('Pricing');
+        expect(layout.dropdown()?.className).toContain('bg-background');
+        expect(layout.header().className).toContain('z-50');
+    });
+    it('gives a parent with children a chevron menu in the header, and keeps the link', () => {
+        phoneWidth(false);
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        instance = mount(PublicLayout, {
+            target: host,
+            props: {
+                children,
+                navigation: [
+                    {
+                        id: 'inventory',
+                        name: 'Inventory',
+                        href: '/inventory',
+                        active: true,
+                        children: [
+                            { id: 'inventory-community', name: 'Community', href: '/inventory?view=community' },
+                            {
+                                id: 'inventory-collection',
+                                name: 'Collection',
+                                href: '/inventory?view=collection',
+                            },
+                        ],
+                    },
+                    { id: 'pricing', name: 'Pricing', href: '/pricing' },
+                ],
+            },
+        });
+        flushSync();
+        const link = host.querySelector('header a[href="/inventory"]');
+        expect(link?.getAttribute('aria-current')).toBe('page');
+        const trigger = host.querySelector('header button[aria-label="Inventory options"]');
+        expect(trigger).not.toBeNull();
+        // Only parents with children get one
+        expect(host.querySelector('header button[aria-label="Pricing options"]')).toBeNull();
+    });
+});

package/dist/__tests__/sidebar-docs-parity.test.js

@@ -0,0 +1,134 @@
+/**
+ * Sidebar features docs sites need (Docusaurus parity)
+ *
+ * - Items nest to any depth: a child with its own children renders as an expandable row
+ *   instead of being dropped.
+ * - Search filters and expands at every depth.
+ * - `sidebarAutoCollapse`: opening a section or item closes the others at its level.
+ * - DashboardLayout renders a page `footer` below the main content.
+ */
+import { describe, it, expect, beforeAll, beforeEach, vi } from 'vitest';
+import { fireEvent, render, screen, within } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DashboardLayout from '../lib/components/layout/DashboardLayout.svelte';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+const navigation = [
+    {
+        id: 'setup',
+        title: 'Setup',
+        collapsible: true,
+        expanded: true,
+        items: [
+            {
+                id: 'platforms',
+                name: 'Platforms',
+                expanded: true,
+                children: [
+                    { id: 'mac', name: 'macOS', href: '/setup/mac' },
+                    {
+                        id: 'linux',
+                        name: 'Linux',
+                        expanded: true,
+                        children: [
+                            { id: 'debian', name: 'Debian', href: '/setup/linux/debian', active: true },
+                            {
+                                id: 'rhel',
+                                name: 'RHEL',
+                                children: [{ id: 'rhel9', name: 'RHEL 9', href: '/setup/linux/rhel/9' }],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 'tools',
+                name: 'Tools',
+                children: [{ id: 'cli', name: 'CLI', href: '/setup/cli' }],
+            },
+        ],
+    },
+    {
+        id: 'reference',
+        title: 'Reference',
+        collapsible: true,
+        expanded: false,
+        items: [{ id: 'api', name: 'API', href: '/reference/api' }],
+    },
+];
+function renderLayout(props = {}) {
+    return render(DashboardLayout, {
+        props: {
+            appId: `test-parity-${Math.random()}`,
+            navigation,
+            children: createRawSnippet(() => ({ render: () => '<p>content</p>' })),
+            ...props,
+        },
+    });
+}
+describe('sidebar docs parity', () => {
+    beforeAll(() => {
+        var _a;
+        // Expanding rows runs svelte's slide transition (Web Animations), which jsdom lacks
+        (_a = Element.prototype).animate ?? (_a.animate = vi.fn(() => ({
+            cancel: vi.fn(),
+            finish: vi.fn(),
+            onfinish: null,
+            oncancel: null,
+        })));
+    });
+    beforeEach(() => {
+        localStorage.clear();
+        sidebarStore.setMobile(false);
+        sidebarStore.setDefaultItems([]);
+        sidebarStore.setDefaultSections([]);
+    });
+    it('renders categories nested deeper than one level', () => {
+        renderLayout();
+        const debian = screen.getByRole('link', { name: 'Debian' });
+        expect(debian).toHaveAttribute('aria-current', 'page');
+        // RHEL is a third-level category: an expandable row, collapsed by default
+        const rhel = screen.getByRole('button', { name: 'Expand RHEL' });
+        expect(screen.queryByRole('link', { name: 'RHEL 9' })).toBeNull();
+        return fireEvent.click(rhel).then(() => {
+            expect(screen.getByRole('link', { name: 'RHEL 9' })).toHaveAttribute('href', '/setup/linux/rhel/9');
+        });
+    });
+    it('finds and reveals matches at any depth when searching', async () => {
+        renderLayout({ searchable: true });
+        const search = screen.getByRole('searchbox');
+        await fireEvent.input(search, { target: { value: 'rhel 9' } });
+        // The search input is debounced
+        await vi.waitFor(() => expect(screen.getByRole('link', { name: /RHEL 9/ })).toBeInTheDocument());
+        expect(screen.queryByRole('link', { name: /macOS/ })).toBeNull();
+        expect(screen.queryByRole('link', { name: /Debian/ })).toBeNull();
+    });
+    it('closes sibling items and sections when sidebarAutoCollapse is on', async () => {
+        renderLayout({ sidebarAutoCollapse: true });
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: 'Expand Tools' }));
+        expect(sidebarStore.isItemExpanded('tools')).toBe(true);
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(false);
+        expect(sidebarStore.isSectionExpanded('setup')).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: /Reference/ }));
+        expect(sidebarStore.isSectionExpanded('reference')).toBe(true);
+        expect(sidebarStore.isSectionExpanded('setup')).toBe(false);
+    });
+    it('leaves siblings open by default', async () => {
+        renderLayout();
+        await fireEvent.click(screen.getByRole('button', { name: 'Expand Tools' }));
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(true);
+        expect(sidebarStore.isItemExpanded('tools')).toBe(true);
+    });
+    it('renders a page footer below the main content', () => {
+        const { container } = renderLayout({
+            footer: createRawSnippet(() => ({
+                render: () => '<footer>© Classic Homes</footer>',
+            })),
+        });
+        const main = container.querySelector('main#main-content');
+        const footer = screen.getByRole('contentinfo');
+        expect(footer).toHaveTextContent('© Classic Homes');
+        expect(main.compareDocumentPosition(footer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        expect(within(main).queryByRole('contentinfo')).toBeNull();
+    });
+});

package/dist/__tests__/sidebar-items.test.js

@@ -0,0 +1,59 @@
+/**
+ * Sidebar item rendering
+ *
+ * - An item with an `icon` name and no custom icon renderer draws the theme
+ *   Icon (it used to draw a placeholder circle). An item without an icon
+ *   reserves no icon space.
+ * - Item links can shrink, so a long name truncates instead of widening the
+ *   sidebar into a horizontal scroll.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DashboardLayout from '../lib/components/layout/DashboardLayout.svelte';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+const ARROW_LEFT_PATH = 'M19 12H5M12 19l-7-7 7-7';
+function renderLayout() {
+    return render(DashboardLayout, {
+        props: {
+            appId: `test-items-${Math.random()}`,
+            navigation: [
+                {
+                    id: 'main',
+                    items: [
+                        { id: 'back', name: 'Back', href: '/', icon: 'arrow-left' },
+                        {
+                            id: 'plain',
+                            name: 'A rather long page name that will not fit the sidebar',
+                            href: '/plain',
+                        },
+                    ],
+                },
+            ],
+            children: createRawSnippet(() => ({ render: () => '<p>content</p>' })),
+        },
+    });
+}
+describe('sidebar items', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        sidebarStore.setMobile(false);
+    });
+    it('draws the named theme icon when no icon renderer is given', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: 'Back' });
+        expect(link.querySelector('svg circle')).toBeNull();
+        expect(link.querySelector('svg path')?.getAttribute('d')).toBe(ARROW_LEFT_PATH);
+    });
+    it('reserves no icon space for an item without an icon', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: /A rather long page name/ });
+        expect(link.querySelector('svg')).toBeNull();
+        expect(link.querySelector('span.h-5.w-5')).toBeNull();
+    });
+    it('lets item links shrink so long names truncate', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: /A rather long page name/ });
+        expect(link.classList.contains('min-w-0')).toBe(true);
+    });
+});

package/dist/lib/components/AlertDialog.svelte

@@ -62,19 +62,36 @@
     children,
   }: Props = $props();
 
+  // Each time the dialog opens, exactly one of onConfirm / onCancel runs when it
+  // closes. Escape and overlay clicks count as cancel, so callers that mount the
+  // dialog as `{#if x}<AlertDialog open onCancel={() => (x = null)} />` reset
+  // their state however it was dismissed.
+  let settled = false;
+  $effect.pre(() => {
+    if (open) settled = false;
+  });
+
+  function settle(confirmed: boolean) {
+    if (settled) return;
+    settled = true;
+    if (confirmed) onConfirm?.();
+    else onCancel?.();
+  }
+
   function handleOpenChange(newOpen: boolean) {
     open = newOpen;
+    if (!newOpen) settle(false);
     onOpenChange?.(newOpen);
   }
 
   function handleCancel() {
-    onCancel?.();
+    settle(false);
     open = false;
     onOpenChange?.(false);
   }
 
   function handleConfirm() {
-    onConfirm?.();
+    settle(true);
     open = false;
     onOpenChange?.(false);
   }

package/dist/lib/components/Button.svelte

@@ -1,37 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
-  import { tv, type VariantProps } from 'tailwind-variants';
-
-  const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',
-        secondary:
-          'border-2 border-secondary-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover focus-visible:ring-destructive',
-        outline:
-          'border-2 border-outline bg-transparent text-foreground hover:border-outline-hover hover:bg-primary hover:text-primary-foreground',
-        ghost: 'hover:bg-muted-hover hover:text-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3 text-sm',
-        md: 'h-10 px-4 py-2',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  });
-
-  type ButtonVariants = VariantProps<typeof buttonVariants>;
+  import { buttonVariants, type ButtonVariants } from './button-variants.js';
 
   interface Props {
     variant?: ButtonVariants['variant'];

package/dist/lib/components/Button.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-declare const Button: import("svelte").Component<{
-    [key: string]: unknown;
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | undefined;
-    size?: "default" | "sm" | "md" | "lg" | "icon" | undefined;
-    type?: "button" | "submit" | "reset";
+import { type ButtonVariants } from './button-variants.js';
+interface Props {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    type?: 'button' | 'submit' | 'reset';
     href?: string;
     disabled?: boolean;
     loading?: boolean;
@@ -12,6 +12,9 @@ declare const Button: import("svelte").Component<{
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
-}, {}, "">;
+    /** Allow passing additional HTML attributes (aria-*, data-*, etc.) */
+    [key: string]: unknown;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/lib/components/DataPanel.svelte

@@ -280,6 +280,16 @@
    */
   const isMobileCard = $derived(variant === 'card' && isMobile);
 
+  /**
+   * Bottom padding of the phone card: the home-indicator inset less the
+   * header's own 12px bottom padding and 8px more. The whole 34px iPhone inset
+   * stood the collapsed card 106px tall; this keeps the title about 26px above
+   * the screen edge, clear of the indicator, at 86px. The strip below the
+   * header is padding, so a swipe that starts there never reaches the header's
+   * pointer handler.
+   */
+  const CARD_SAFE_AREA_PAD = 'max(0px, calc(env(safe-area-inset-bottom, 0px) - 20px))';
+
   // Whether the panel is currently presented as a modal dialog (detached, or an
   // expanded mobile card). In that state we trap focus for a11y parity with React.
   // A desktop card is a non-modal floating sheet with no scrim, so it must not
@@ -1193,15 +1203,15 @@
         // Full-width phone sheet at its expanded height; `height` above is how
         // much of it shows. The part below the fold is slid off-screen with
         // `translate` (composited, and it composes with the mount keyframe's
-        // `transform`). The safe-area inset is added to the sheet and padded
+        // `transform`). CARD_SAFE_AREA_PAD is added to the sheet and padded
         // out, so the collapsed header sits above the home indicator instead
         // of inside the strip iOS claims for its swipe-to-leave gesture.
         return {
           bottom: '0',
           left: `${defaultLeftOffset}px`,
           width: `${defaultCardWidth}px`,
-          height: `calc(${cardExpandedHeight}px + env(safe-area-inset-bottom, 0px))`,
-          'padding-bottom': 'env(safe-area-inset-bottom, 0px)',
+          height: `calc(${cardExpandedHeight}px + ${CARD_SAFE_AREA_PAD})`,
+          'padding-bottom': CARD_SAFE_AREA_PAD,
           translate: `0 ${Math.max(0, cardExpandedHeight - height)}px`,
         };
       }

package/dist/lib/components/DropdownMenu.svelte

@@ -3,6 +3,7 @@
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
   import Icon, { type IconName } from './Icon.svelte';
+  import { buttonVariants, type ButtonVariants } from './button-variants.js';
 
   export interface DropdownMenuItem {
     type?: 'item' | 'separator' | 'label';
@@ -40,6 +41,13 @@
     class?: string;
     /** Classes for the trigger `<button>` (style it here rather than nesting a button in `trigger`) */
     triggerClass?: string;
+    /**
+     * Style the trigger as a Button variant (e.g. `ghost` for header navigation).
+     * Unset leaves the trigger unstyled, as before; `triggerClass` still applies on top.
+     */
+    triggerVariant?: ButtonVariants['variant'];
+    /** Button size for the trigger, when `triggerVariant` is set. Default: `sm`. */
+    triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
   }
@@ -53,6 +61,8 @@
     onOpenChange,
     class: className,
     triggerClass,
+    triggerVariant,
+    triggerSize = 'sm',
     triggerLabel,
   }: Props = $props();
 
@@ -111,7 +121,14 @@
 <DropdownMenuPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   <DropdownMenuPrimitive.Trigger>
     {#snippet child({ props })}
-      <button type="button" {...props} class={triggerClass} aria-label={triggerLabel}>
+      <button
+        type="button"
+        {...props}
+        class={triggerVariant
+          ? cn(buttonVariants({ variant: triggerVariant, size: triggerSize }), triggerClass)
+          : triggerClass}
+        aria-label={triggerLabel}
+      >
         {@render trigger()}
       </button>
     {/snippet}

package/dist/lib/components/DropdownMenu.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import { type IconName } from './Icon.svelte';
+import { type ButtonVariants } from './button-variants.js';
 export interface DropdownMenuItem {
     type?: 'item' | 'separator' | 'label';
     label?: string;
@@ -34,6 +35,13 @@ interface Props {
     class?: string;
     /** Classes for the trigger `<button>` (style it here rather than nesting a button in `trigger`) */
     triggerClass?: string;
+    /**
+     * Style the trigger as a Button variant (e.g. `ghost` for header navigation).
+     * Unset leaves the trigger unstyled, as before; `triggerClass` still applies on top.
+     */
+    triggerVariant?: ButtonVariants['variant'];
+    /** Button size for the trigger, when `triggerVariant` is set. Default: `sm`. */
+    triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
 }