sonance-brand-mcp 1.3.1 → 1.3.2

package/dist/assets/components/menubar.tsx

@@ -150,7 +150,7 @@ const MenubarCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span id="menubar-checkbox-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
@@ -174,7 +174,7 @@ const MenubarRadioItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span id="menubar-radio-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </MenubarPrimitive.ItemIndicator>
@@ -219,11 +219,7 @@ const MenubarShortcut = ({
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-foreground-muted",
-        className
-      )}
+    <span id="menubar-shortcut-span" data-sonance-name="menubar"
       {...props}
     />
   );

package/dist/assets/components/navbar.stories.tsx

@@ -39,7 +39,7 @@ export const Default: Story = {
     <Navbar>
       <NavbarContent>
         <NavbarBrand>
-          <span className="text-xl font-semibold">Sonance</span>
+          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
@@ -47,7 +47,7 @@ export const Default: Story = {
           <NavbarItem href="#">About</NavbarItem>
           <NavbarItem href="#">Contact</NavbarItem>
         </NavbarItems>
-        <Button size="sm">Sign In</Button>
+        <Button id="nav-button" size="sm">Sign In</Button>
       </NavbarContent>
     </Navbar>
   ),
@@ -58,14 +58,14 @@ export const Dark: Story = {
     <Navbar variant="dark">
       <NavbarContent>
         <NavbarBrand>
-          <span className="text-xl font-semibold">Sonance</span>
+          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
           <NavbarItem href="#">Products</NavbarItem>
           <NavbarItem href="#">About</NavbarItem>
         </NavbarItems>
-        <Button size="sm" variant="inverted">Sign In</Button>
+        <Button id="nav-button-inverted" size="sm" variant="inverted">Sign In</Button>
       </NavbarContent>
     </Navbar>
   ),
@@ -77,14 +77,14 @@ export const Transparent: Story = {
       <Navbar variant="transparent" className="text-white">
         <NavbarContent>
           <NavbarBrand>
-            <span className="text-xl font-semibold">Sonance</span>
+            <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
           </NavbarBrand>
           <NavbarItems>
             <NavbarItem href="#" active>Home</NavbarItem>
             <NavbarItem href="#">Products</NavbarItem>
             <NavbarItem href="#">About</NavbarItem>
           </NavbarItems>
-          <Button size="sm" variant="inverted">Sign In</Button>
+          <Button id="nav-button-inverted" size="sm" variant="inverted">Sign In</Button>
         </NavbarContent>
       </Navbar>
     </div>
@@ -97,18 +97,18 @@ export const Blur: Story = {
       <Navbar variant="blur">
         <NavbarContent>
           <NavbarBrand>
-            <span className="text-xl font-semibold">Sonance</span>
+            <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
           </NavbarBrand>
           <NavbarItems>
             <NavbarItem href="#" active>Home</NavbarItem>
             <NavbarItem href="#">Products</NavbarItem>
             <NavbarItem href="#">About</NavbarItem>
           </NavbarItems>
-          <Button size="sm">Sign In</Button>
+          <Button id="nav-button" size="sm">Sign In</Button>
         </NavbarContent>
       </Navbar>
       <div className="p-8 text-white">
-        <p>Content behind the blurred navbar</p>
+        <p id="nav-p-content-behind-the-b">Content behind the blurred navbar</p>
       </div>
     </div>
   ),
@@ -117,14 +117,14 @@ export const Blur: Story = {
 export const Responsive: Story = {
   render: () => (
     <ResponsiveNavbar
-      brand={<span className="text-xl font-semibold">Sonance</span>}
+      brand={<span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>}
       items={[
         { label: 'Home', href: '#', active: true },
         { label: 'Products', href: '#' },
         { label: 'About', href: '#' },
         { label: 'Contact', href: '#' },
       ]}
-      actions={<Button size="sm">Sign In</Button>}
+      actions={<Button id="responsive-button" size="sm">Sign In</Button>}
     />
   ),
 };
@@ -135,7 +135,7 @@ export const WithLogo: Story = {
       <NavbarContent>
         <NavbarBrand>
           <div className="w-8 h-8 bg-primary rounded" />
-          <span className="text-xl font-semibold">Sonance</span>
+          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
@@ -143,8 +143,8 @@ export const WithLogo: Story = {
           <NavbarItem href="#">Support</NavbarItem>
         </NavbarItems>
         <div className="flex items-center gap-2">
-          <Button size="sm" variant="ghost">Log In</Button>
-          <Button size="sm">Sign Up</Button>
+          <Button id="nav-button-ghost" size="sm" variant="ghost">Log In</Button>
+          <Button id="nav-button" size="sm">Sign Up</Button>
         </div>
       </NavbarContent>
     </Navbar>
@@ -157,46 +157,46 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="nav-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border overflow-hidden">
           <ResponsiveNavbar
-            brand={<span className="text-lg font-semibold">Sonance</span>}
+            brand={<span id="responsive-matrix-span-sonance" className="text-lg font-semibold">Sonance</span>}
             items={[
               { label: 'Home', href: '#', active: true },
               { label: 'Products', href: '#' },
               { label: 'About', href: '#' },
             ]}
-            actions={<Button size="sm">Sign In</Button>}
+            actions={<Button id="responsive-matrix-button" size="sm">Sign In</Button>}
           />
         </div>
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border overflow-hidden">
           <Navbar>
             <NavbarContent>
               <NavbarBrand>
-                <span className="text-xl font-semibold">Sonance</span>
+                <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
               </NavbarBrand>
               <NavbarItems>
                 <NavbarItem href="#" active>Home</NavbarItem>
                 <NavbarItem href="#">Products</NavbarItem>
                 <NavbarItem href="#">About</NavbarItem>
               </NavbarItems>
-              <Button size="sm">Sign In</Button>
+              <Button id="nav-button" size="sm">Sign In</Button>
             </NavbarContent>
           </Navbar>
         </div>
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="nav-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border overflow-hidden">
           <Navbar>
             <NavbarContent>
               <NavbarBrand>
-                <span className="text-xl font-semibold">Sonance</span>
+                <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
               </NavbarBrand>
               <NavbarItems>
                 <NavbarItem href="#" active>Home</NavbarItem>
@@ -206,8 +206,8 @@ export const ResponsiveMatrix: Story = {
                 <NavbarItem href="#">Contact</NavbarItem>
               </NavbarItems>
               <div className="flex items-center gap-2">
-                <Button size="sm" variant="ghost">Log In</Button>
-                <Button size="sm">Sign Up</Button>
+                <Button id="nav-button-ghost" size="sm" variant="ghost">Log In</Button>
+                <Button id="nav-button" size="sm">Sign Up</Button>
               </div>
             </NavbarContent>
           </Navbar>

package/dist/assets/components/navbar.tsx

@@ -20,15 +20,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
     };
 
     return (
-      <nav
-        ref={ref}
-        className={cn(
-          "w-full px-6 py-4",
-          variantClasses[variant],
-          sticky && "sticky top-0 z-40",
-          bordered && variant !== "dark" && variant !== "transparent" && "border-b border-border",
-          className
-        )}
+      <nav data-sonance-name="navbar"
         {...props}
       >
         {children}
@@ -53,7 +45,7 @@ export const NavbarContent = forwardRef<
   return (
     <div
       ref={ref}
-      className={cn("flex items-center gap-6", justifyClasses[justify], className)}
+      className={cn("flex items-center gap-6", justifyClasses[justify], className)} data-sonance-name="navbar"
       {...props}
     />
   );
@@ -67,7 +59,7 @@ export const NavbarBrand = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center gap-2 shrink-0", className)}
+    className={cn("flex items-center gap-2 shrink-0", className)} data-sonance-name="navbar"
     {...props}
   />
 ));
@@ -80,7 +72,7 @@ export const NavbarItems = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("hidden md:flex items-center gap-6", className)}
+    className={cn("hidden md:flex items-center gap-6", className)} data-sonance-name="navbar"
     {...props}
   />
 ));
@@ -94,12 +86,13 @@ interface NavbarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
 export const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(
   ({ className, active, ...props }, ref) => (
     <a
+      id="navbar-item-a"
       ref={ref}
       className={cn(
         "text-sm font-normal transition-opacity",
         active ? "opacity-100 font-medium" : "opacity-85 hover:opacity-100",
         className
-      )}
+      )} data-sonance-name="navbar"
       {...props}
     />
   )
@@ -116,7 +109,7 @@ interface NavbarMobileToggleProps {
 
 export function NavbarMobileToggle({ isOpen, onToggle, className }: NavbarMobileToggleProps) {
   return (
-    <button
+    <button data-sonance-name="navbar"
       type="button"
       onClick={onToggle}
       className={cn("md:hidden p-2 -m-2", className)}
@@ -193,6 +186,7 @@ export function ResponsiveNavbar({
       <NavbarMobileMenu isOpen={mobileMenuOpen}>
         {items.map((item) => (
           <a
+            id="nav-a"
             key={item.href}
             href={item.href}
             className={cn(

package/dist/assets/components/navigation-menu.stories.tsx

@@ -69,15 +69,16 @@ const ListItem = React.forwardRef<
     <li>
       <NavigationMenuLink asChild>
         <a
+          id="nav-a"
           ref={ref}
           className={cn(
             "block select-none space-y-1 rounded-sm p-3 leading-none no-underline outline-none transition-colors hover:bg-secondary-hover hover:text-foreground focus:bg-secondary-hover focus:text-foreground",
             className
-          )}
+          )} data-sonance-name="navigation-menu.stories"
           {...props}
         >
           <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-foreground-muted">
+          <p id="nav-p-children" className="line-clamp-2 text-sm leading-snug text-foreground-muted">
             {children}
           </p>
         </a>
@@ -98,13 +99,14 @@ export const Default: Story = {
               <li className="row-span-3">
                 <NavigationMenuLink asChild>
                   <a
+                    id="nav-a"
                     className="flex h-full w-full select-none flex-col justify-end rounded-sm bg-gradient-to-b from-secondary-hover/50 to-secondary-hover p-6 no-underline outline-none focus:shadow-md"
                     href="#"
                   >
                     <div className="mb-2 mt-4 text-lg font-medium">
                       Sonance
                     </div>
-                    <p className="text-sm leading-tight text-foreground-muted">
+                    <p id="nav-p-premium-architectura" className="text-sm leading-tight text-foreground-muted">
                       Premium architectural speakers and outdoor audio solutions.
                     </p>
                   </a>
@@ -139,7 +141,7 @@ export const Default: Story = {
           </NavigationMenuContent>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <a href="#">
+          <a id="nav-a" href="#">
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
               Documentation
             </NavigationMenuLink>
@@ -155,28 +157,28 @@ export const Simple: Story = {
     <NavigationMenu>
       <NavigationMenuList>
         <NavigationMenuItem>
-          <a href="#">
+          <a id="nav-a" href="#">
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
               Products
             </NavigationMenuLink>
           </a>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <a href="#">
+          <a id="nav-a" href="#">
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
               Solutions
             </NavigationMenuLink>
           </a>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <a href="#">
+          <a id="nav-a" href="#">
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
               Support
             </NavigationMenuLink>
           </a>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <a href="#">
+          <a id="nav-a" href="#">
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
               About
             </NavigationMenuLink>
@@ -224,7 +226,7 @@ export const ProductsMenu: Story = {
           </NavigationMenuContent>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <a href="#">
+          <a id="nav-a" href="#">
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
               View All
             </NavigationMenuLink>

package/dist/assets/components/navigation-menu.tsx

@@ -84,7 +84,7 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
+  <div data-sonance-name="navigation-menu" className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-sm border border-border bg-card text-foreground shadow-lg",

package/dist/assets/components/number-input.stories.tsx

@@ -157,7 +157,7 @@ export const Controlled: Story = {
   render: () => {
     const [value, setValue] = useState(10);
     return (
-      <div className="w-48 space-y-4">
+      <div data-sonance-name="number-input.stories" className="w-48 space-y-4">
         <NumberInput
           label="Controlled Input"
           value={value}
@@ -165,7 +165,7 @@ export const Controlled: Story = {
           min={0}
           max={20}
         />
-        <p className="text-sm text-foreground-muted">
+        <p id="controlled-p-current-value-value" className="text-sm text-foreground-muted">
           Current value: {value}
         </p>
         <div className="flex gap-2">
@@ -211,8 +211,8 @@ export const QuantitySelector: Story = {
 
     return (
       <div className="p-4 border border-border w-80">
-        <h3 className="font-medium text-foreground">VP66 TL In-Wall Speaker</h3>
-        <p className="text-sm text-foreground-muted mt-1">${pricePerUnit.toFixed(2)} each</p>
+        <h3 id="quantity-selector-h3-vp66-tl-inwall-speak" className="font-medium text-foreground">VP66 TL In-Wall Speaker</h3>
+        <p id="quantity-selector-p-priceperunittofixed2" className="text-sm text-foreground-muted mt-1">${pricePerUnit.toFixed(2)} each</p>
         <div className="mt-4">
           <NumberInput
             label="Quantity"
@@ -223,8 +223,8 @@ export const QuantitySelector: Story = {
           />
         </div>
         <div className="mt-4 pt-4 border-t border-border flex justify-between items-center">
-          <span className="text-sm text-foreground-muted">Total:</span>
-          <span className="text-lg font-medium text-foreground">
+          <span id="quantity-selector-span-total" className="text-sm text-foreground-muted">Total:</span>
+          <span id="quantity-selector-span-totaltofixed2" className="text-lg font-medium text-foreground">
             ${total.toFixed(2)}
           </span>
         </div>
@@ -239,11 +239,11 @@ export const StateMatrix: Story = {
     const states: NumberInputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
     return (
       <div className="space-y-6 w-48">
-        <h3 className="text-sm font-medium text-foreground-muted">NumberInput States</h3>
+        <h3 id="state-matrix-h3-numberinput-states" className="text-sm font-medium text-foreground-muted">NumberInput States</h3>
         <div className="space-y-4">
           {states.map((state) => (
             <div key={state}>
-              <span className="text-xs font-medium text-foreground-muted uppercase">{state}</span>
+              <span id="state-matrix-span-state" className="text-xs font-medium text-foreground-muted uppercase">{state}</span>
               <NumberInput
                 state={state}
                 defaultValue={5}
@@ -263,14 +263,14 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="responsive-matrix-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border p-4">
           <NumberInput label="Quantity" defaultValue={1} min={1} max={10} />
         </div>
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border p-4">
           <div className="grid grid-cols-2 gap-4">
             <NumberInput label="Quantity" defaultValue={5} />
@@ -280,7 +280,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4">
           <div className="grid grid-cols-4 gap-4">
             <NumberInput label="Default" defaultValue={5} />

package/dist/assets/components/number-input.tsx

@@ -134,7 +134,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       : inputValue;
 
     return (
-      <div className={cn("w-full", className)}>
+      <div data-sonance-name="number-input" className={cn("w-full", className)}>
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -196,7 +196,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             </button>
           )}
         </div>
-        {error && <p className="mt-1 text-sm text-error">{error}</p>}
+        {error && <p id="p-error" className="mt-1 text-sm text-error">{error}</p>}
       </div>
     );
   }
@@ -218,7 +218,7 @@ export function Stepper({ size = "md", className, ...props }: StepperProps) {
 
   return (
     <NumberInput
-      {...props}
+      data-sonance-name="number-input" {...props}
       className={cn(sizeClasses[size], className)}
     />
   );

package/dist/assets/components/pagination.stories.tsx

@@ -37,7 +37,7 @@ export const Default: Story = {
   render: () => {
     const [page, setPage] = useState(1);
     return (
-      <Pagination
+      <Pagination data-sonance-name="pagination.stories"
         currentPage={page}
         totalPages={10}
         onPageChange={setPage}
@@ -131,7 +131,7 @@ export const BothStyles: Story = {
     return (
       <div className="space-y-8">
         <div>
-          <p className="text-xs text-foreground-muted mb-2">Full Pagination</p>
+          <p id="both-styles-p-full-pagination" className="text-xs text-foreground-muted mb-2">Full Pagination</p>
           <Pagination
             currentPage={page}
             totalPages={20}
@@ -139,7 +139,7 @@ export const BothStyles: Story = {
           />
         </div>
         <div>
-          <p className="text-xs text-foreground-muted mb-2">Compact Pagination</p>
+          <p id="both-styles-p-compact-pagination" className="text-xs text-foreground-muted mb-2">Compact Pagination</p>
           <CompactPagination
             currentPage={page}
             totalPages={20}
@@ -186,7 +186,7 @@ export const TableExample: Story = {
           </table>
         </div>
         <div className="flex items-center justify-between">
-          <p className="text-sm text-foreground-muted">
+          <p id="table-example-p-showing-page-1-items" className="text-sm text-foreground-muted">
             Showing {(page - 1) * itemsPerPage + 1} to{' '}
             {Math.min(page * itemsPerPage, items.length)} of {items.length} results
           </p>
@@ -207,19 +207,19 @@ export const StateMatrix: Story = {
     const states: PaginationButtonState[] = ['default', 'hover', 'focus', 'active', 'disabled'];
     return (
       <div className="space-y-6">
-        <h3 className="text-sm font-medium text-foreground-muted">PaginationButton States</h3>
-        <p className="text-xs text-foreground-muted">States are demonstrated via the Pagination component&apos;s active and disabled props.</p>
+        <h3 id="state-matrix-h3-paginationbutton-sta" className="text-sm font-medium text-foreground-muted">PaginationButton States</h3>
+        <p id="state-matrix-p-states-are-demonstra" className="text-xs text-foreground-muted">States are demonstrated via the Pagination component&apos;s active and disabled props.</p>
         <div className="space-y-4">
           <div>
-            <span className="text-xs font-medium text-foreground-muted uppercase">Default + Active</span>
+            <span id="state-matrix-span-default-active" className="text-xs font-medium text-foreground-muted uppercase">Default + Active</span>
             <Pagination currentPage={3} totalPages={5} onPageChange={() => {}} />
           </div>
           <div>
-            <span className="text-xs font-medium text-foreground-muted uppercase">First Page (prev disabled)</span>
+            <span id="state-matrix-span-first-page-prev-disa" className="text-xs font-medium text-foreground-muted uppercase">First Page (prev disabled)</span>
             <Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />
           </div>
           <div>
-            <span className="text-xs font-medium text-foreground-muted uppercase">Last Page (next disabled)</span>
+            <span id="state-matrix-span-last-page-next-disab" className="text-xs font-medium text-foreground-muted uppercase">Last Page (next disabled)</span>
             <Pagination currentPage={5} totalPages={5} onPageChange={() => {}} />
           </div>
         </div>
@@ -239,7 +239,7 @@ export const ResponsiveMatrix: Story = {
       <div className="space-y-8">
         {/* Mobile */}
         <div>
-          <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+          <h4 id="responsive-matrix-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
           <div className="w-[375px] border border-dashed border-border p-4">
             <CompactPagination
               currentPage={mobilePage}
@@ -250,7 +250,7 @@ export const ResponsiveMatrix: Story = {
         </div>
         {/* Tablet */}
         <div>
-          <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+          <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
           <div className="w-[768px] border border-dashed border-border p-4 flex justify-center">
             <Pagination
               currentPage={tabletPage}
@@ -261,9 +261,9 @@ export const ResponsiveMatrix: Story = {
         </div>
         {/* Desktop */}
         <div>
-          <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+          <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
           <div className="w-[1280px] border border-dashed border-border p-4 flex items-center justify-between">
-            <p className="text-sm text-foreground-muted">
+            <p id="responsive-matrix-p-showing-91100-of-500" className="text-sm text-foreground-muted">
               Showing 91-100 of 500 results
             </p>
             <Pagination

package/dist/assets/components/pagination.tsx

@@ -83,7 +83,7 @@ export function Pagination({
   const canGoNext = currentPage < totalPages;
 
   return (
-    <nav
+    <nav data-sonance-name="pagination"
       role="navigation"
       aria-label="Pagination"
       className={cn("flex items-center gap-1", className)}
@@ -101,7 +101,7 @@ export function Pagination({
       {pages.map((page, index) => {
         if (page === "ellipsis") {
           return (
-            <span
+            <span id="pagination-span" data-sonance-name="pagination"
               key={`ellipsis-${index}`}
               className="flex h-9 w-9 items-center justify-center text-foreground-muted"
             >
@@ -162,7 +162,7 @@ const PaginationButton = forwardRef<HTMLButtonElement, PaginationButtonProps>(
             : "bg-transparent text-foreground border-border hover:bg-secondary-hover",
           getButtonStateStyles(state),
           className
-        )}
+        )} data-sonance-name="pagination"
         {...props}
       >
         {children}
@@ -197,9 +197,9 @@ export function CompactPagination({
         <ChevronLeft className="h-4 w-4" />
       </PaginationButton>
 
-      <span className="text-sm text-foreground-secondary">
-        Page <span className="font-medium text-foreground">{currentPage}</span> of{" "}
-        <span className="font-medium text-foreground">{totalPages}</span>
+      <span id="compact-pagination-span" className="text-sm text-foreground-secondary">
+        Page <span id="compact-pagination-span-currentpage" className="font-medium text-foreground">{currentPage}</span> of{" "}
+        <span id="compact-pagination-span-totalpages" className="font-medium text-foreground">{totalPages}</span>
       </span>
 
       <PaginationButton