@fragments-sdk/ui 0.13.0 → 0.14.0

package/src/components/NavigationMenu/NavigationMenu.module.scss

@@ -51,7 +51,7 @@
   display: flex;
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
@@ -159,7 +159,7 @@
 
   display: flex;
   align-items: center;
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -193,7 +193,7 @@
 .linkStructured {
   display: flex;
   gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   white-space: normal;
   min-height: auto;
@@ -371,7 +371,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: 0 var(--fui-space-4, $fui-space-4);
   border-bottom: 1px solid var(--fui-border, $fui-border);
   min-height: var(--fui-appshell-header-height, $fui-appshell-header-height);
 }
@@ -412,7 +412,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
   min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);
@@ -427,7 +427,7 @@
 .drawerSectionLabel {
   @include section-label-text;
 
-  padding: var(--fui-space-3, $fui-space-3) var(--fui-padding-container-md, $fui-padding-container-md)
+  padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4)
     var(--fui-space-1, $fui-space-1);
 }
 
@@ -439,7 +439,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);

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

@@ -82,6 +82,15 @@ describe('NavigationMenu', () => {
       expect(screen.getByText('Community')).toBeInTheDocument();
     });
 
+    it('renders custom trigger chevron icon from icons prop', () => {
+      renderBasicMenu({
+        icons: {
+          triggerChevron: <span data-testid="navmenu-trigger-chevron" aria-hidden />,
+        },
+      });
+      expect(screen.getAllByTestId('navmenu-trigger-chevron').length).toBeGreaterThan(0);
+    });
+
     it('renders direct links', () => {
       renderBasicMenu();
       expect(screen.getByText('Blog')).toBeInTheDocument();
@@ -358,6 +367,26 @@ describe('NavigationMenu', () => {
 
       expect(screen.getByTestId('custom-link')).toBeInTheDocument();
     });
+
+    it('composes asChild link click handlers', async () => {
+      const user = userEvent.setup();
+      const childClick = vi.fn();
+
+      render(
+        <NavigationMenu>
+          <NavigationMenu.List>
+            <NavigationMenu.Item>
+              <NavigationMenu.Link href="/blog" asChild onClick={() => {}}>
+                <a href="/blog" onClick={childClick}>Blog</a>
+              </NavigationMenu.Link>
+            </NavigationMenu.Item>
+          </NavigationMenu.List>
+        </NavigationMenu>
+      );
+
+      await user.click(screen.getByRole('link', { name: 'Blog' }));
+      expect(childClick).toHaveBeenCalled();
+    });
   });
 
   // ============================================
@@ -489,5 +518,24 @@ describe('NavigationMenu', () => {
       const blogLink = within(drawer).getByRole('link', { name: 'Blog' });
       expect(blogLink).toHaveAttribute('href', '/blog');
     });
+
+    it('renders custom mobile hamburger and drawer close icons from icons prop', async () => {
+      renderBasicMenu({
+        icons: {
+          mobileMenu: <span data-testid="navmenu-mobile-menu-icon" aria-hidden />,
+          mobileClose: <span data-testid="navmenu-mobile-close-icon" aria-hidden />,
+          drawerClose: <span data-testid="navmenu-drawer-close-icon" aria-hidden />,
+        },
+      });
+
+      const toggle = await screen.findByLabelText('Toggle navigation');
+      expect(within(toggle).getByTestId('navmenu-mobile-menu-icon')).toBeInTheDocument();
+
+      await userEvent.click(toggle);
+
+      expect(within(toggle).getByTestId('navmenu-mobile-close-icon')).toBeInTheDocument();
+      const drawer = await screen.findByRole('dialog', { name: 'Navigation' });
+      expect(within(drawer).getByTestId('navmenu-drawer-close-icon')).toBeInTheDocument();
+    });
   });
 });

package/src/components/NavigationMenu/NavigationMenuContext.ts

@@ -13,6 +13,19 @@ export interface NavigationMenuItemInfo {
   linkHref?: string;
 }
 
+export interface NavigationMenuIconRenderState {
+  slot: 'triggerChevron' | 'mobileMenu' | 'mobileClose' | 'drawerClose';
+  open?: boolean;
+  isMobile?: boolean;
+}
+
+export type NavigationMenuIconSlot =
+  | React.ReactNode
+  | ((state: NavigationMenuIconRenderState) => React.ReactNode);
+
+export type NavigationMenuIcons =
+  Partial<Record<NavigationMenuIconRenderState['slot'], NavigationMenuIconSlot>>;
+
 // ============================================
 // Root Context
 // ============================================
@@ -61,6 +74,7 @@ export interface NavigationMenuContextValue {
 
   // Root nav id
   rootId: string;
+  icons?: NavigationMenuIcons;
 }
 
 export const NavigationMenuContext = React.createContext<NavigationMenuContextValue | null>(null);

package/src/components/NavigationMenu/index.tsx

@@ -12,6 +12,9 @@ import {
   useNavigationMenuContext,
   useNavigationMenuItemContext,
   type NavigationMenuItemInfo,
+  type NavigationMenuIcons,
+  type NavigationMenuIconRenderState,
+  type NavigationMenuIconSlot,
 } from './NavigationMenuContext';
 import { useNavigationMenu } from './useNavigationMenu';
 import styles from './NavigationMenu.module.scss';
@@ -34,6 +37,8 @@ export interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {
   delayDuration?: number;
   /** Duration to skip delays between triggers (ms) */
   skipDelayDuration?: number;
+  /** Optional icon overrides for trigger chevrons and mobile drawer controls */
+  icons?: NavigationMenuIcons;
 }
 
 export interface NavigationMenuListProps {
@@ -75,6 +80,17 @@ export interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTML
   asChild?: boolean;
 }
 
+function composeNavMenuClickHandlers(
+  childHandler: React.MouseEventHandler<HTMLElement> | undefined,
+  internalHandler: React.MouseEventHandler<HTMLAnchorElement>,
+): React.MouseEventHandler<HTMLElement> {
+  return (event) => {
+    childHandler?.(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event as React.MouseEvent<HTMLAnchorElement>);
+  };
+}
+
 export interface NavigationMenuIndicatorProps {
   className?: string;
 }
@@ -118,6 +134,14 @@ function useIsMobile() {
   return isMobile;
 }
 
+function renderNavigationMenuIcon(
+  slot: NavigationMenuIconSlot | undefined,
+  state: NavigationMenuIconRenderState,
+): React.ReactNode {
+  if (slot === undefined) return undefined;
+  return typeof slot === 'function' ? slot(state) : slot;
+}
+
 // ============================================
 // Root
 // ============================================
@@ -130,6 +154,7 @@ function NavigationMenuRoot({
   orientation = 'horizontal',
   delayDuration = 200,
   skipDelayDuration = 300,
+  icons,
   className,
   'aria-label': ariaLabel = 'Main navigation',
   ...htmlProps
@@ -157,8 +182,9 @@ function NavigationMenuRoot({
       orientation,
       isMobile,
       rootId,
+      icons,
     }),
-    [state, orientation, isMobile, rootId]
+    [state, orientation, isMobile, rootId, icons]
   );
 
   return (
@@ -349,6 +375,11 @@ function NavigationMenuTrigger({ children, className }: NavigationMenuTriggerPro
   };
 
   const classes = [styles.trigger, className].filter(Boolean).join(' ');
+  const chevronOverride = renderNavigationMenuIcon(ctx.icons?.triggerChevron, {
+    slot: 'triggerChevron',
+    open: isOpen,
+    isMobile: ctx.isMobile,
+  });
 
   return (
     <button
@@ -366,7 +397,9 @@ function NavigationMenuTrigger({ children, className }: NavigationMenuTriggerPro
       onKeyDown={handleKeyDown}
     >
       {children}
-      <CaretDown size={12} className={styles.triggerChevron} aria-hidden />
+      {chevronOverride
+        ? <span className={styles.triggerChevron} aria-hidden>{chevronOverride}</span>
+        : <CaretDown size={12} className={styles.triggerChevron} aria-hidden />}
     </button>
   );
 }
@@ -515,6 +548,7 @@ function NavigationMenuLink({
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     onClick?.(e);
+    if (e.defaultPrevented) return;
     // Close mobile drawer on link click
     if (ctx?.isMobile && ctx.mobileOpen) {
       ctx.setMobileOpen(false);
@@ -544,9 +578,14 @@ function NavigationMenuLink({
     };
 
     if (asChild && React.isValidElement(children)) {
+      const childProps = children.props as {
+        className?: string;
+        onClick?: React.MouseEventHandler<HTMLElement>;
+      };
       return React.cloneElement(children, {
         ...linkProps,
-        className: [classes, (children.props as { className?: string }).className].filter(Boolean).join(' '),
+        onClick: composeNavMenuClickHandlers(childProps.onClick, handleClick),
+        className: [classes, childProps.className].filter(Boolean).join(' '),
         children: (
           <>
             {icon && <span className={styles.linkIcon}>{icon}</span>}
@@ -586,9 +625,14 @@ function NavigationMenuLink({
   };
 
   if (asChild && React.isValidElement(children)) {
+    const childProps = children.props as {
+      className?: string;
+      onClick?: React.MouseEventHandler<HTMLElement>;
+    };
     return React.cloneElement(children, {
       ...linkProps,
-      className: [classes, (children.props as { className?: string }).className].filter(Boolean).join(' '),
+      onClick: composeNavMenuClickHandlers(childProps.onClick, handleClick),
+      className: [classes, childProps.className].filter(Boolean).join(' '),
     } as React.HTMLAttributes<HTMLElement>);
   }
 
@@ -739,7 +783,16 @@ function NavigationMenuMobileSection({ children, label }: NavigationMenuMobileSe
 // ============================================
 
 function MobileHamburger() {
-  const { mobileOpen, setMobileOpen } = useNavigationMenuContext();
+  const ctx = useNavigationMenuContext();
+  const { mobileOpen, setMobileOpen } = ctx;
+  const iconOverride = renderNavigationMenuIcon(
+    mobileOpen ? ctx.icons?.mobileClose : ctx.icons?.mobileMenu,
+    {
+      slot: mobileOpen ? 'mobileClose' : 'mobileMenu',
+      open: mobileOpen,
+      isMobile: true,
+    },
+  );
 
   return (
     <button
@@ -749,7 +802,7 @@ function MobileHamburger() {
       aria-label="Toggle navigation"
       aria-expanded={mobileOpen}
     >
-      {mobileOpen ? <X size={24} aria-hidden /> : <List size={24} aria-hidden />}
+      {iconOverride ?? (mobileOpen ? <X size={24} aria-hidden /> : <List size={24} aria-hidden />)}
     </button>
   );
 }
@@ -816,7 +869,11 @@ function MobileDrawer() {
             onClick={() => ctx.setMobileOpen(false)}
             aria-label="Close navigation"
           >
-            <X size={20} aria-hidden />
+            {renderNavigationMenuIcon(ctx.icons?.drawerClose, {
+              slot: 'drawerClose',
+              open: ctx.mobileOpen,
+              isMobile: true,
+            }) ?? <X size={20} aria-hidden />}
           </button>
         </div>
         <ScrollArea orientation="vertical" className={styles.drawerBody}>
@@ -919,3 +976,9 @@ export {
   NavigationMenuMobileContent,
   NavigationMenuMobileSection,
 };
+
+export type {
+  NavigationMenuIcons,
+  NavigationMenuIconSlot,
+  NavigationMenuIconRenderState,
+} from './NavigationMenuContext';

package/src/components/Pagination/Pagination.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Pagination } from '.';
 
 export default defineFragment({
@@ -32,6 +32,8 @@ export default defineFragment({
       'Use edgeCount to always show first/last pages',
       'Use siblingCount to control how many pages surround the current page',
       'Pair with Table component for data table pagination',
+      'Pagination forwards standard nav props (id, aria-*, data-*, event handlers) to the root <nav>',
+      'Previous/Next/Item buttons compose your onClick handlers; call event.preventDefault() to stop the page change',
     ],
     accessibility: [
       'Uses nav element with aria-label="Pagination"',
@@ -85,6 +87,7 @@ export default defineFragment({
       'onPageChange: (page) => void - page change handler',
       'edgeCount: number - pages at edges (default: 1)',
       'siblingCount: number - pages around current (default: 1)',
+      'Forwards standard HTML nav attributes to the root element',
     ],
     scenarioTags: [
       'navigation.pagination',

package/src/components/Pagination/Pagination.test.tsx

@@ -39,6 +39,14 @@ describe('Pagination', () => {
     expect(onPageChange).toHaveBeenCalledWith(3);
   });
 
+  it('forwards root DOM props to the nav element', () => {
+    renderPagination({ id: 'pager', 'data-testid': 'pager-nav', 'aria-label': 'Results pages' });
+
+    const nav = screen.getByRole('navigation', { name: 'Results pages' });
+    expect(nav).toHaveAttribute('id', 'pager');
+    expect(nav).toHaveAttribute('data-testid', 'pager-nav');
+  });
+
   it('Previous/Next buttons work', async () => {
     const user = userEvent.setup();
     const onPageChange = vi.fn();
@@ -52,6 +60,37 @@ describe('Pagination', () => {
     expect(onPageChange).toHaveBeenCalledWith(3);
   });
 
+  it('composes item onClick handlers without overriding page changes', async () => {
+    const user = userEvent.setup();
+    const itemClick = vi.fn();
+    const onPageChange = vi.fn();
+
+    render(
+      <Pagination totalPages={5} defaultPage={1} onPageChange={onPageChange}>
+        <Pagination.Item page={2} onClick={itemClick} />
+      </Pagination>
+    );
+
+    await user.click(screen.getByLabelText('Go to page 2'));
+    expect(itemClick).toHaveBeenCalled();
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it('lets item onClick prevent internal page changes', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+
+    render(
+      <Pagination totalPages={5} defaultPage={1} onPageChange={onPageChange}>
+        <Pagination.Item page={2} onClick={(e) => e.preventDefault()} />
+      </Pagination>
+    );
+
+    await user.click(screen.getByLabelText('Go to page 2'));
+    expect(onPageChange).not.toHaveBeenCalled();
+    expect(screen.getByLabelText('Go to page 2')).not.toHaveAttribute('aria-current', 'page');
+  });
+
   it('Previous disabled on page 1', () => {
     renderPagination({ defaultPage: 1, totalPages: 5 });
 

package/src/components/Pagination/index.tsx

@@ -7,7 +7,7 @@ import styles from './Pagination.module.scss';
 // Types
 // ============================================
 
-export interface PaginationProps {
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
   /** Total number of pages. Clamped to Math.max(0, totalPages). Renders nothing when 0. */
   totalPages: number;
@@ -21,7 +21,6 @@ export interface PaginationProps {
   edgeCount?: number;
   /** Number of pages shown around current: default 1 */
   siblingCount?: number;
-  className?: string;
 }
 
 export interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -172,6 +171,18 @@ function clamp(value: number, min: number, max: number) {
   return Math.max(min, Math.min(max, value));
 }
 
+function composeButtonClickHandlers(
+  internal: (event: React.MouseEvent<HTMLButtonElement>) => void,
+  external?: React.MouseEventHandler<HTMLButtonElement>,
+) {
+  return (event: React.MouseEvent<HTMLButtonElement>) => {
+    external?.(event);
+    if (!event.defaultPrevented) {
+      internal(event);
+    }
+  };
+}
+
 function PaginationRoot({
   children,
   totalPages: rawTotalPages,
@@ -181,6 +192,8 @@ function PaginationRoot({
   edgeCount = 1,
   siblingCount = 1,
   className,
+  'aria-label': ariaLabel,
+  ...htmlProps
 }: PaginationProps) {
   const totalPages = Math.max(0, Math.floor(rawTotalPages));
   const [uncontrolledPage, setUncontrolledPage] = React.useState(() =>
@@ -211,12 +224,22 @@ function PaginationRoot({
   );
 
   if (totalPages <= 0) {
-    return <nav aria-label="Pagination" className={className} />;
+    return (
+      <nav
+        {...htmlProps}
+        aria-label={ariaLabel ?? 'Pagination'}
+        className={[styles.pagination, className].filter(Boolean).join(' ')}
+      />
+    );
   }
 
   return (
     <PaginationContext.Provider value={contextValue}>
-      <nav aria-label="Pagination" className={[styles.pagination, className].filter(Boolean).join(' ')}>
+      <nav
+        {...htmlProps}
+        aria-label={ariaLabel ?? 'Pagination'}
+        className={[styles.pagination, className].filter(Boolean).join(' ')}
+      >
         <ul className={styles.list}>
           {children}
         </ul>
@@ -228,6 +251,7 @@ function PaginationRoot({
 function PaginationPrevious({ className, ...htmlProps }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const { currentPage, setPage } = usePaginationContext();
   const disabled = currentPage <= 1;
+  const { onClick, ...buttonProps } = htmlProps;
 
   return (
     <li>
@@ -235,9 +259,9 @@ function PaginationPrevious({ className, ...htmlProps }: React.ButtonHTMLAttribu
         type="button"
         aria-label="Go to previous page"
         disabled={disabled}
-        onClick={() => setPage(currentPage - 1)}
+        {...buttonProps}
+        onClick={composeButtonClickHandlers(() => setPage(currentPage - 1), onClick)}
         className={[styles.item, styles.navButton, disabled && styles.itemDisabled, className].filter(Boolean).join(' ')}
-        {...htmlProps}
       >
         <ChevronLeftIcon />
       </button>
@@ -248,6 +272,7 @@ function PaginationPrevious({ className, ...htmlProps }: React.ButtonHTMLAttribu
 function PaginationNext({ className, ...htmlProps }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const { currentPage, totalPages, setPage } = usePaginationContext();
   const disabled = currentPage >= totalPages;
+  const { onClick, ...buttonProps } = htmlProps;
 
   return (
     <li>
@@ -255,9 +280,9 @@ function PaginationNext({ className, ...htmlProps }: React.ButtonHTMLAttributes<
         type="button"
         aria-label="Go to next page"
         disabled={disabled}
-        onClick={() => setPage(currentPage + 1)}
+        {...buttonProps}
+        onClick={composeButtonClickHandlers(() => setPage(currentPage + 1), onClick)}
         className={[styles.item, styles.navButton, disabled && styles.itemDisabled, className].filter(Boolean).join(' ')}
-        {...htmlProps}
       >
         <ChevronRightIcon />
       </button>
@@ -312,6 +337,7 @@ function PaginationItem({
   const { currentPage, setPage } = usePaginationContext();
   const page = pageProp ?? 1;
   const isActive = page === currentPage;
+  const { onClick, ...buttonProps } = htmlProps;
 
   return (
     <li>
@@ -319,9 +345,9 @@ function PaginationItem({
         type="button"
         aria-label={`Go to page ${page}`}
         aria-current={isActive ? 'page' : undefined}
-        onClick={() => setPage(page)}
+        {...buttonProps}
+        onClick={composeButtonClickHandlers(() => setPage(page), onClick)}
         className={[styles.item, isActive && styles.itemActive, className].filter(Boolean).join(' ')}
-        {...htmlProps}
       >
         {children ?? page}
       </button>

package/src/components/Popover/Popover.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Popover } from '.';
 import { Button } from '../Button';
 import { Input } from '../Input';
@@ -35,6 +35,7 @@ export default defineFragment({
       'Include a clear way to close (X button or action buttons)',
       'Position to avoid covering important content',
       'Use arrow to visually connect popover to trigger',
+      'Popover.Trigger and Popover.Close support asChild for links/router-link components (single valid element child required)',
     ],
     accessibility: [
       'Focus is moved to popover content on open',
@@ -80,6 +81,7 @@ export default defineFragment({
       'open: boolean - controlled open state',
       'onOpenChange: (open) => void - state handler',
       'modal: boolean - blocks page interaction (default: false)',
+      'Popover.Trigger / Popover.Close asChild support non-button children',
       'Popover.Content side: top|bottom|left|right - position',
     ],
     scenarioTags: [
@@ -96,6 +98,7 @@ export default defineFragment({
     requiredChildren: ['Trigger', 'Content'],
     commonPatterns: [
       '<Popover><Popover.Trigger asChild><Button>Open</Button></Popover.Trigger><Popover.Content><Popover.Close /><Popover.Title>{title}</Popover.Title><Popover.Description>{description}</Popover.Description></Popover.Content></Popover>',
+      '<Popover><Popover.Trigger asChild><a href="#help">Open help</a></Popover.Trigger><Popover.Content>...</Popover.Content></Popover>',
     ],
   },
 
@@ -183,5 +186,19 @@ export default defineFragment({
         </div>
       ),
     },
+    {
+      name: 'Link Trigger',
+      description: 'Use asChild with a non-button trigger element',
+      render: () => (
+        <Popover>
+          <Popover.Trigger asChild>
+            <a href="#popover-help">Open help</a>
+          </Popover.Trigger>
+          <Popover.Content size="sm">
+            <Popover.Description>Popover trigger can be an anchor when using asChild.</Popover.Description>
+          </Popover.Content>
+        </Popover>
+      ),
+    },
   ],
 });

package/src/components/Popover/Popover.module.scss

@@ -1,5 +1,5 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
 
 // Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
@@ -14,7 +14,7 @@
 
   min-width: 12rem;
   max-width: 24rem;
-  padding: var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: var(--fui-space-2, $fui-space-2);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
   // Animation
@@ -41,7 +41,7 @@
   }
 
   // Adjust animation direction based on side
-  &[data-side='top'] {
+  &[data-side="top"] {
     &[data-starting-style] {
       transform: scale(0.95) translateY($fui-anim-offset-sm);
     }
@@ -51,8 +51,8 @@
     }
   }
 
-  &[data-side='left'],
-  &[data-side='right'] {
+  &[data-side="left"],
+  &[data-side="right"] {
     &[data-starting-style],
     &[data-ending-style] {
       transform: scale(0.95) translateY(0);
@@ -62,7 +62,7 @@
 
 // Size variants
 .sm {
-  padding: var(--fui-padding-container-sm, $fui-padding-container-sm);
+  padding: var(--fui-space-3, $fui-space-3);
   max-width: 16rem;
 }
 
@@ -71,7 +71,7 @@
 }
 
 .lg {
-  padding: var(--fui-padding-container-lg, $fui-padding-container-lg);
+  padding: var(--fui-space-6, $fui-space-6);
   max-width: 32rem;
 }
 
@@ -125,22 +125,22 @@
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
   border: 1px solid var(--fui-border, $fui-border);
 
-  &[data-side='top'] {
+  &[data-side="top"] {
     border-top: none;
     border-left: none;
   }
 
-  &[data-side='bottom'] {
+  &[data-side="bottom"] {
     border-bottom: none;
     border-right: none;
   }
 
-  &[data-side='left'] {
+  &[data-side="left"] {
     border-left: none;
     border-bottom: none;
   }
 
-  &[data-side='right'] {
+  &[data-side="right"] {
     border-right: none;
     border-top: none;
   }
@@ -176,7 +176,7 @@
       transform: none;
     }
 
-    &[data-side='top'] {
+    &[data-side="top"] {
       &[data-starting-style],
       &[data-ending-style] {
         transform: none;