@fragments-sdk/ui 0.12.0 → 0.13.0

package/src/components/Drawer/index.tsx

@@ -38,24 +38,21 @@ export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement>
   backdrop?: boolean;
 }
 
-export interface DrawerTriggerProps {
+export interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   asChild?: boolean;
-  className?: string;
 }
 
 export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-export interface DrawerTitleProps {
+export interface DrawerTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface DrawerDescriptionProps {
+export interface DrawerDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
-  className?: string;
 }
 
 export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -66,10 +63,9 @@ export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement>
   children: React.ReactNode;
 }
 
-export interface DrawerCloseProps {
+export interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   asChild?: boolean;
-  className?: string;
 }
 
 // ============================================
@@ -123,17 +119,18 @@ function DrawerTrigger({
   children,
   asChild,
   className,
+  ...htmlProps
 }: DrawerTriggerProps) {
   if (asChild) {
     return (
-      <BaseDialog.Trigger className={className} render={children as React.ReactElement}>
+      <BaseDialog.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>
         {null}
       </BaseDialog.Trigger>
     );
   }
 
   return (
-    <BaseDialog.Trigger className={className}>
+    <BaseDialog.Trigger {...htmlProps} className={className}>
       {children}
     </BaseDialog.Trigger>
   );
@@ -171,15 +168,15 @@ function DrawerHeader({ children, className, ...htmlProps }: DrawerHeaderProps)
   return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function DrawerTitle({ children, className }: DrawerTitleProps) {
+function DrawerTitle({ children, className, ...htmlProps }: DrawerTitleProps) {
   const classes = [styles.title, className].filter(Boolean).join(' ');
-  return <BaseDialog.Title className={classes}>{children}</BaseDialog.Title>;
+  return <BaseDialog.Title {...htmlProps} className={classes}>{children}</BaseDialog.Title>;
 }
 
-function DrawerDescription({ children, className }: DrawerDescriptionProps) {
+function DrawerDescription({ children, className, ...htmlProps }: DrawerDescriptionProps) {
   const classes = [styles.description, className].filter(Boolean).join(' ');
   return (
-    <BaseDialog.Description className={classes}>
+    <BaseDialog.Description {...htmlProps} className={classes}>
       {children}
     </BaseDialog.Description>
   );
@@ -195,10 +192,11 @@ function DrawerFooter({ children, className, ...htmlProps }: DrawerFooterProps)
   return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function DrawerClose({ children, asChild, className }: DrawerCloseProps) {
+function DrawerClose({ children, asChild, className, ...htmlProps }: DrawerCloseProps) {
   if (!children) {
     return (
       <BaseDialog.Close
+        {...htmlProps}
         data-drawer-close
         aria-label="Close drawer"
         className={[styles.close, className].filter(Boolean).join(' ')}
@@ -211,6 +209,7 @@ function DrawerClose({ children, asChild, className }: DrawerCloseProps) {
   if (asChild) {
     return (
       <BaseDialog.Close
+        {...htmlProps}
         data-drawer-close
         className={className}
         render={children as React.ReactElement}
@@ -221,7 +220,7 @@ function DrawerClose({ children, asChild, className }: DrawerCloseProps) {
   }
 
   return (
-    <BaseDialog.Close data-drawer-close className={className}>
+    <BaseDialog.Close {...htmlProps} data-drawer-close className={className}>
       {children}
     </BaseDialog.Close>
   );

package/src/components/Menu/index.tsx

@@ -16,10 +16,9 @@ export interface MenuProps {
   modal?: boolean;
 }
 
-export interface MenuTriggerProps {
+export interface MenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   asChild?: boolean;
-  className?: string;
 }
 
 export interface MenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -29,25 +28,23 @@ export interface MenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
   sideOffset?: number;
 }
 
-export interface MenuItemProps {
+export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'onSelect'> {
   children: React.ReactNode;
   disabled?: boolean;
   danger?: boolean;
-  onSelect?: () => void;
-  className?: string;
+  onSelect?: (...args: any[]) => void;
   icon?: React.ReactNode;
   shortcut?: string;
   /** When passed, renders a check indicator. `true` shows a checkmark, `false` reserves space. */
   checked?: boolean;
 }
 
-export interface MenuCheckboxItemProps {
+export interface MenuCheckboxItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'onChange'> {
   children: React.ReactNode;
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
-  className?: string;
 }
 
 export interface MenuRadioGroupProps {
@@ -57,26 +54,21 @@ export interface MenuRadioGroupProps {
   onValueChange?: (value: string) => void;
 }
 
-export interface MenuRadioItemProps {
+export interface MenuRadioItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
   value: string;
   disabled?: boolean;
-  className?: string;
 }
 
-export interface MenuGroupProps {
+export interface MenuGroupProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface MenuGroupLabelProps {
+export interface MenuGroupLabelProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface MenuSeparatorProps {
-  className?: string;
-}
+export interface MenuSeparatorProps extends React.HTMLAttributes<HTMLElement> {}
 
 export interface MenuSubmenuProps {
   children: React.ReactNode;
@@ -85,10 +77,9 @@ export interface MenuSubmenuProps {
   onOpenChange?: (open: boolean) => void;
 }
 
-export interface MenuSubmenuTriggerProps {
+export interface MenuSubmenuTriggerProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
   disabled?: boolean;
-  className?: string;
   icon?: React.ReactNode;
 }
 
@@ -153,17 +144,17 @@ function MenuRoot({
   );
 }
 
-function MenuTrigger({ children, asChild, className }: MenuTriggerProps) {
+function MenuTrigger({ children, asChild, className, ...htmlProps }: MenuTriggerProps) {
   if (asChild) {
     return (
-      <BaseMenu.Trigger className={className} render={children as React.ReactElement}>
+      <BaseMenu.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>
         {null}
       </BaseMenu.Trigger>
     );
   }
 
   return (
-    <BaseMenu.Trigger className={className}>
+    <BaseMenu.Trigger {...htmlProps} className={className}>
       {children}
     </BaseMenu.Trigger>
   );
@@ -204,7 +195,16 @@ function MenuItem({
   icon,
   shortcut,
   checked,
+  ...htmlProps
 }: MenuItemProps) {
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      (htmlProps.onClick as React.MouseEventHandler<HTMLElement> | undefined)?.(event);
+      onSelect?.(event);
+    },
+    [htmlProps, onSelect],
+  );
+
   const hasChecked = checked !== undefined;
   const classes = [
     styles.item,
@@ -214,8 +214,9 @@ function MenuItem({
 
   return (
     <BaseMenu.Item
+      {...htmlProps}
       disabled={disabled}
-      onClick={onSelect}
+      onClick={handleClick as any}
       className={classes}
     >
       {hasChecked && (
@@ -237,6 +238,7 @@ function MenuCheckboxItem({
   onCheckedChange,
   disabled,
   className,
+  ...htmlProps
 }: MenuCheckboxItemProps) {
   const isControlled = checkedProp !== undefined;
   const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
@@ -256,6 +258,7 @@ function MenuCheckboxItem({
 
   return (
     <BaseMenu.CheckboxItem
+      {...htmlProps}
       checked={checkedProp}
       defaultChecked={defaultChecked}
       onCheckedChange={handleCheckedChange}
@@ -292,13 +295,14 @@ function MenuRadioItem({
   value,
   disabled,
   className,
+  ...htmlProps
 }: MenuRadioItemProps) {
   const classes = [styles.item, styles.radioItem, className]
     .filter(Boolean)
     .join(' ');
 
   return (
-    <BaseMenu.RadioItem value={value} disabled={disabled} className={classes}>
+    <BaseMenu.RadioItem {...htmlProps} value={value} disabled={disabled} className={classes}>
       <span className={styles.radioIndicator}>
         <DotIcon />
       </span>
@@ -307,19 +311,19 @@ function MenuRadioItem({
   );
 }
 
-function MenuGroup({ children, className }: MenuGroupProps) {
+function MenuGroup({ children, className, ...htmlProps }: MenuGroupProps) {
   const classes = [styles.group, className].filter(Boolean).join(' ');
-  return <BaseMenu.Group className={classes}>{children}</BaseMenu.Group>;
+  return <BaseMenu.Group {...htmlProps} className={classes}>{children}</BaseMenu.Group>;
 }
 
-function MenuGroupLabel({ children, className }: MenuGroupLabelProps) {
+function MenuGroupLabel({ children, className, ...htmlProps }: MenuGroupLabelProps) {
   const classes = [styles.groupLabel, className].filter(Boolean).join(' ');
-  return <BaseMenu.GroupLabel className={classes}>{children}</BaseMenu.GroupLabel>;
+  return <BaseMenu.GroupLabel {...htmlProps} className={classes}>{children}</BaseMenu.GroupLabel>;
 }
 
-function MenuSeparator({ className }: MenuSeparatorProps) {
+function MenuSeparator({ className, ...htmlProps }: MenuSeparatorProps) {
   const classes = [styles.separator, className].filter(Boolean).join(' ');
-  return <BaseMenu.Separator className={classes} />;
+  return <BaseMenu.Separator {...htmlProps} className={classes} />;
 }
 
 function MenuSubmenu({
@@ -344,13 +348,14 @@ function MenuSubmenuTrigger({
   disabled,
   className,
   icon,
+  ...htmlProps
 }: MenuSubmenuTriggerProps) {
   const classes = [styles.item, styles.submenuTrigger, className]
     .filter(Boolean)
     .join(' ');
 
   return (
-    <BaseMenu.SubmenuTrigger disabled={disabled} className={classes}>
+    <BaseMenu.SubmenuTrigger {...htmlProps} disabled={disabled} className={classes}>
       {icon && <span className={styles.itemIcon}>{icon}</span>}
       <span className={styles.itemLabel}>{children}</span>
     </BaseMenu.SubmenuTrigger>

package/src/components/NavigationMenu/NavigationMenu.fragment.tsx

@@ -107,7 +107,7 @@ export default defineFragment({
 
   ai: {
     compositionPattern: 'compound',
-    subComponents: ['List', 'Item', 'Trigger', 'Content', 'Link', 'Indicator', 'Viewport', 'MobileContent', 'MobileSection'],
+    subComponents: ['List', 'Item', 'Trigger', 'Content', 'Link', 'Indicator', 'Viewport', 'MobileBrand', 'MobileContent', 'MobileSection'],
     requiredChildren: ['List'],
     commonPatterns: [
       '<NavigationMenu><NavigationMenu.List><NavigationMenu.Item value="docs"><NavigationMenu.Trigger>Docs</NavigationMenu.Trigger><NavigationMenu.Content><NavigationMenu.Link href="/guides" title="Guides" description="Learn the basics" /></NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List><NavigationMenu.Viewport /></NavigationMenu>',

package/src/components/NavigationMenu/NavigationMenu.test.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { fireEvent, act } from '@testing-library/react';
+import { fireEvent, act, within } from '@testing-library/react';
 import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from 'vitest';
 import { NavigationMenu } from '.';
 
-// Mock matchMedia for jsdom
-beforeAll(() => {
+function setMatchMedia(matches: boolean) {
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
     value: vi.fn().mockImplementation((query: string) => ({
-      matches: false,
+      matches,
       media: query,
       onchange: null,
       addListener: vi.fn(),
@@ -19,6 +18,11 @@ beforeAll(() => {
       dispatchEvent: vi.fn(),
     })),
   });
+}
+
+// Mock matchMedia for jsdom
+beforeAll(() => {
+  setMatchMedia(false);
 });
 
 // ============================================
@@ -254,6 +258,17 @@ describe('NavigationMenu', () => {
       expect(document.activeElement).toBe(communityTrigger);
     });
 
+    it('navigates based on focused trigger even when another item is open', async () => {
+      renderBasicMenu();
+      const learnTrigger = screen.getByText('Learn');
+      const communityTrigger = screen.getByText('Community');
+
+      await userEvent.click(learnTrigger);
+      communityTrigger.focus();
+      fireEvent.keyDown(communityTrigger.closest('ul')!, { key: 'ArrowRight' });
+      expect(document.activeElement).toBe(learnTrigger);
+    });
+
     it('navigates to first trigger on Home', () => {
       renderBasicMenu();
       const communityTrigger = screen.getByText('Community');
@@ -454,4 +469,25 @@ describe('NavigationMenu', () => {
       expect(screen.queryByText('Extra')).not.toBeInTheDocument();
     });
   });
+
+  describe('Mobile drawer', () => {
+    beforeEach(() => {
+      setMatchMedia(true);
+    });
+
+    afterEach(() => {
+      setMatchMedia(false);
+    });
+
+    it('includes direct link items in auto-converted drawer navigation', async () => {
+      renderBasicMenu();
+
+      const toggle = await screen.findByLabelText('Toggle navigation');
+      await userEvent.click(toggle);
+
+      const drawer = await screen.findByRole('dialog', { name: 'Navigation' });
+      const blogLink = within(drawer).getByRole('link', { name: 'Blog' });
+      expect(blogLink).toHaveAttribute('href', '/blog');
+    });
+  });
 });

package/src/components/NavigationMenu/NavigationMenuContext.ts

@@ -34,6 +34,9 @@ export interface NavigationMenuContextValue {
   triggerRefs: React.MutableRefObject<Map<string, HTMLButtonElement>>;
   triggerOrder: React.MutableRefObject<string[]>;
 
+  // Full item order (includes items without triggers)
+  itemOrder: React.MutableRefObject<string[]>;
+
   // Item info registry (for mobile drawer)
   itemInfoMap: React.MutableRefObject<Map<string, NavigationMenuItemInfo>>;
 

package/src/components/NavigationMenu/index.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { CaretDown, CaretRight, List, X } from '@phosphor-icons/react';
+import { CaretDown, List, X } from '@phosphor-icons/react';
 import { handleArrowNavigation, useFocusTrap } from '../../utils/a11y';
 import { Collapsible } from '../Collapsible';
 import { ScrollArea } from '../ScrollArea';
@@ -183,7 +183,9 @@ function NavigationMenuList({ children, className }: NavigationMenuListProps) {
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     const order = triggerOrder.current;
-    const currentIdx = order.indexOf(value);
+    const focusedValue = (document.activeElement as HTMLElement | null)?.getAttribute('data-navmenu-value');
+    const currentValue = focusedValue || value;
+    const currentIdx = order.indexOf(currentValue);
 
     const newIdx = handleArrowNavigation(e, order, currentIdx >= 0 ? currentIdx : 0, {
       orientation: orientation === 'horizontal' ? 'horizontal' : 'vertical',
@@ -220,14 +222,33 @@ function NavigationMenuList({ children, className }: NavigationMenuListProps) {
 // Item
 // ============================================
 
-let itemCounter = 0;
-
 function NavigationMenuItem({ children, value: valueProp, className }: NavigationMenuItemProps) {
   const rootCtx = useNavigationMenuContext();
-  const [autoValue] = React.useState(() => valueProp || `navmenu-item-${++itemCounter}`);
+  const generatedValue = React.useId();
+  const autoValue = valueProp || `navmenu-item-${generatedValue}`;
   const triggerId = `${rootCtx.rootId}-trigger-${autoValue}`;
   const contentId = `${rootCtx.rootId}-content-${autoValue}`;
 
+  React.useEffect(() => {
+    if (!rootCtx.itemOrder.current.includes(autoValue)) {
+      rootCtx.itemOrder.current.push(autoValue);
+    }
+
+    const existing = rootCtx.itemInfoMap.current.get(autoValue);
+    if (!existing) {
+      rootCtx.itemInfoMap.current.set(autoValue, {
+        value: autoValue,
+        triggerLabel: '',
+        contentChildren: null,
+      });
+    }
+
+    return () => {
+      rootCtx.itemOrder.current = rootCtx.itemOrder.current.filter(v => v !== autoValue);
+      rootCtx.itemInfoMap.current.delete(autoValue);
+    };
+  }, [autoValue, rootCtx.itemInfoMap, rootCtx.itemOrder]);
+
   const itemCtx = React.useMemo(
     () => ({
       value: autoValue,
@@ -335,6 +356,7 @@ function NavigationMenuTrigger({ children, className }: NavigationMenuTriggerPro
       type="button"
       id={itemCtx.triggerId}
       className={classes}
+      data-navmenu-value={itemCtx.value}
       aria-expanded={isOpen}
       aria-controls={itemCtx.contentId}
       data-state={isOpen ? 'open' : 'closed'}
@@ -472,8 +494,25 @@ function NavigationMenuLink({
   ...htmlProps
 }: NavigationMenuLinkProps) {
   const ctx = React.useContext(NavigationMenuContext);
+  const itemCtx = React.useContext(NavigationMenuItemContext);
   const isStructured = !!(title || description || icon);
 
+  React.useEffect(() => {
+    if (!ctx || !itemCtx) return;
+
+    const existing = ctx.itemInfoMap.current.get(itemCtx.value);
+    const fallbackLabel = typeof children === 'string' ? children : title || '';
+    const resolvedHref = typeof href === 'string' ? href : existing?.linkHref;
+
+    ctx.itemInfoMap.current.set(itemCtx.value, {
+      ...existing,
+      value: itemCtx.value,
+      triggerLabel: existing?.triggerLabel || fallbackLabel || '',
+      contentChildren: existing?.contentChildren ?? null,
+      linkHref: resolvedHref,
+    });
+  }, [ctx, itemCtx, children, title, href]);
+
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     onClick?.(e);
     // Close mobile drawer on link click
@@ -745,14 +784,11 @@ function MobileDrawer() {
   }, [ctx]);
 
   // Build auto-converted nav items from item info registry
-  const autoItems = React.useMemo(() => {
-    const items: NavigationMenuItemInfo[] = [];
-    for (const value of ctx.triggerOrder.current) {
-      const info = ctx.itemInfoMap.current.get(value);
-      if (info) items.push(info);
-    }
-    return items;
-  }, [ctx.triggerOrder, ctx.itemInfoMap]);
+  const autoItems: NavigationMenuItemInfo[] = [];
+  for (const value of ctx.itemOrder.current) {
+    const info = ctx.itemInfoMap.current.get(value);
+    if (info) autoItems.push(info);
+  }
 
   const handleLinkClick = () => {
     ctx.setMobileOpen(false);

package/src/components/NavigationMenu/useNavigationMenu.ts

@@ -44,6 +44,9 @@ export function useNavigationMenu({
   const triggerRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());
   const triggerOrder = React.useRef<string[]>([]);
 
+  // Full item order registry (includes link-only items)
+  const itemOrder = React.useRef<string[]>([]);
+
   // Item info registry for mobile drawer
   const itemInfoMap = React.useRef<Map<string, NavigationMenuItemInfo>>(new Map());
 
@@ -79,6 +82,7 @@ export function useNavigationMenu({
     skipDelayTimerRef,
     triggerRefs,
     triggerOrder,
+    itemOrder,
     itemInfoMap,
     viewportSize,
     setViewportSize,

package/src/components/Popover/Popover.test.tsx

@@ -43,6 +43,29 @@ describe('Popover', () => {
     });
   });
 
+  it('forwards html props to trigger, title, description, and close', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <Popover.Trigger id="popover-trigger">Open</Popover.Trigger>
+        <Popover.Content>
+          <Popover.Title id="popover-title">Popover Title</Popover.Title>
+          <Popover.Description id="popover-description">Popover Description</Popover.Description>
+          <Popover.Close data-testid="popover-close" />
+        </Popover.Content>
+      </Popover>
+    );
+
+    expect(screen.getByRole('button', { name: /open/i })).toHaveAttribute('id', 'popover-trigger');
+    await user.click(screen.getByRole('button', { name: /open/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Popover Title')).toHaveAttribute('id', 'popover-title');
+      expect(screen.getByText('Popover Description')).toHaveAttribute('id', 'popover-description');
+      expect(screen.getByTestId('popover-close')).toBeInTheDocument();
+    });
+  });
+
   it('has a close button with aria-label', async () => {
     const user = userEvent.setup();
     renderPopover();

package/src/components/Popover/index.tsx

@@ -25,10 +25,9 @@ export interface PopoverProps {
   modal?: boolean;
 }
 
-export interface PopoverTriggerProps {
+export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   asChild?: boolean;
-  className?: string;
 }
 
 export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -40,14 +39,12 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
   arrow?: boolean;
 }
 
-export interface PopoverTitleProps {
+export interface PopoverTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface PopoverDescriptionProps {
+export interface PopoverDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
-  className?: string;
 }
 
 export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -58,10 +55,9 @@ export interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement>
   children: React.ReactNode;
 }
 
-export interface PopoverCloseProps {
+export interface PopoverCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   asChild?: boolean;
-  className?: string;
 }
 
 // ============================================
@@ -111,17 +107,17 @@ function PopoverRoot({
   );
 }
 
-function PopoverTrigger({ children, asChild, className }: PopoverTriggerProps) {
+function PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps) {
   if (asChild) {
     return (
-      <BasePopover.Trigger className={className} render={children as React.ReactElement}>
+      <BasePopover.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>
         {null}
       </BasePopover.Trigger>
     );
   }
 
   return (
-    <BasePopover.Trigger className={className}>
+    <BasePopover.Trigger {...htmlProps} className={className}>
       {children}
     </BasePopover.Trigger>
   );
@@ -160,15 +156,15 @@ function PopoverContent({
   );
 }
 
-function PopoverTitle({ children, className }: PopoverTitleProps) {
+function PopoverTitle({ children, className, ...htmlProps }: PopoverTitleProps) {
   const classes = [styles.title, className].filter(Boolean).join(' ');
-  return <BasePopover.Title className={classes}>{children}</BasePopover.Title>;
+  return <BasePopover.Title {...htmlProps} className={classes}>{children}</BasePopover.Title>;
 }
 
-function PopoverDescription({ children, className }: PopoverDescriptionProps) {
+function PopoverDescription({ children, className, ...htmlProps }: PopoverDescriptionProps) {
   const classes = [styles.description, className].filter(Boolean).join(' ');
   return (
-    <BasePopover.Description className={classes}>
+    <BasePopover.Description {...htmlProps} className={classes}>
       {children}
     </BasePopover.Description>
   );
@@ -184,11 +180,12 @@ function PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps
   return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function PopoverClose({ children, asChild, className }: PopoverCloseProps) {
+function PopoverClose({ children, asChild, className, ...htmlProps }: PopoverCloseProps) {
   // Default close button (X icon)
   if (!children) {
     return (
       <BasePopover.Close
+        {...htmlProps}
         aria-label="Close popover"
         className={[styles.close, className].filter(Boolean).join(' ')}
       >
@@ -199,14 +196,14 @@ function PopoverClose({ children, asChild, className }: PopoverCloseProps) {
 
   if (asChild) {
     return (
-      <BasePopover.Close className={className} render={children as React.ReactElement}>
+      <BasePopover.Close {...htmlProps} className={className} render={children as React.ReactElement}>
         {null}
       </BasePopover.Close>
     );
   }
 
   return (
-    <BasePopover.Close className={className}>
+    <BasePopover.Close {...htmlProps} className={className}>
       {children}
     </BasePopover.Close>
   );