sonance-brand-mcp 1.3.1 → 1.3.3

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

@@ -134,20 +134,20 @@ export const ProductSpecs: Story = {
         <AccordionContent>
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Frequency Response</span>
-              <span>50Hz - 20kHz</span>
+              <span id="product-specs-span-frequency-response" className="text-foreground-muted">Frequency Response</span>
+              <span id="product-specs-span-50hz-20khz">50Hz - 20kHz</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Impedance</span>
-              <span>8 Ohms</span>
+              <span id="product-specs-span-impedance" className="text-foreground-muted">Impedance</span>
+              <span id="product-specs-span-8-ohms">8 Ohms</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Power Handling</span>
-              <span>100W RMS</span>
+              <span id="product-specs-span-power-handling" className="text-foreground-muted">Power Handling</span>
+              <span id="product-specs-span-100w-rms">100W RMS</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Sensitivity</span>
-              <span>89dB @ 1W/1m</span>
+              <span id="product-specs-span-sensitivity" className="text-foreground-muted">Sensitivity</span>
+              <span id="product-specs-span-89db-1w1m">89dB @ 1W/1m</span>
             </div>
           </div>
         </AccordionContent>
@@ -157,20 +157,20 @@ export const ProductSpecs: Story = {
         <AccordionContent>
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Height</span>
-              <span>8.5&quot;</span>
+              <span id="product-specs-span-height" className="text-foreground-muted">Height</span>
+              <span id="product-specs-span-85quot">8.5&quot;</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Width</span>
-              <span>10.5&quot;</span>
+              <span id="product-specs-span-width" className="text-foreground-muted">Width</span>
+              <span id="product-specs-span-105quot">10.5&quot;</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Depth</span>
-              <span>3.8&quot;</span>
+              <span id="product-specs-span-depth" className="text-foreground-muted">Depth</span>
+              <span id="product-specs-span-38quot">3.8&quot;</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Weight</span>
-              <span>4.2 lbs</span>
+              <span id="product-specs-span-weight" className="text-foreground-muted">Weight</span>
+              <span id="product-specs-span-42-lbs">4.2 lbs</span>
             </div>
           </div>
         </AccordionContent>
@@ -197,7 +197,7 @@ export const SettingsPanel: Story = {
         <AccordionItem value="appearance">
           <AccordionTrigger className="px-4">Appearance</AccordionTrigger>
           <AccordionContent className="px-4">
-            <p className="text-foreground-muted mb-4">
+            <p id="settings-panel-p-customize-how-the-ap" className="text-foreground-muted mb-4">
               Customize how the application looks on your device.
             </p>
             <div className="flex gap-4">
@@ -210,7 +210,7 @@ export const SettingsPanel: Story = {
         <AccordionItem value="notifications">
           <AccordionTrigger className="px-4">Notifications</AccordionTrigger>
           <AccordionContent className="px-4">
-            <p className="text-foreground-muted">
+            <p id="settings-panel-p-configure-how-you-re" className="text-foreground-muted">
               Configure how you receive notifications and alerts.
             </p>
           </AccordionContent>
@@ -218,7 +218,7 @@ export const SettingsPanel: Story = {
         <AccordionItem value="privacy">
           <AccordionTrigger className="px-4">Privacy & Security</AccordionTrigger>
           <AccordionContent className="px-4">
-            <p className="text-foreground-muted">
+            <p id="settings-panel-p-manage-your-privacy-" className="text-foreground-muted">
               Manage your privacy settings and security preferences.
             </p>
           </AccordionContent>
@@ -233,8 +233,8 @@ export const StateMatrix: Story = {
   render: () => {
     const states: AccordionTriggerState[] = ['default', 'hover', 'focus', 'expanded', 'disabled'];
     return (
-      <div className="space-y-6 w-96">
-        <h3 className="text-sm font-medium text-foreground-muted">AccordionTrigger States</h3>
+      <div data-sonance-name="accordion.stories" className="space-y-6 w-96">
+        <h3 id="state-matrix-h3-accordiontrigger-sta" className="text-sm font-medium text-foreground-muted">AccordionTrigger States</h3>
         <div className="space-y-2">
           {states.map((state) => (
             <Accordion key={state} type="single" collapsible className="w-full">
@@ -256,7 +256,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">
           <Accordion type="single" collapsible defaultValue="item-1" className="w-full">
             <AccordionItem value="item-1">
@@ -272,15 +272,15 @@ 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">
           <Accordion type="single" collapsible defaultValue="specs" className="w-full">
             <AccordionItem value="specs">
               <AccordionTrigger>Technical Specifications</AccordionTrigger>
               <AccordionContent>
                 <div className="grid grid-cols-2 gap-4 text-sm">
-                  <div className="flex justify-between"><span className="text-foreground-muted">Frequency</span><span>50Hz - 20kHz</span></div>
-                  <div className="flex justify-between"><span className="text-foreground-muted">Impedance</span><span>8 Ohms</span></div>
+                  <div className="flex justify-between"><span id="responsive-matrix-span-frequency" className="text-foreground-muted">Frequency</span><span id="responsive-matrix-span-50hz-20khz">50Hz - 20kHz</span></div>
+                  <div className="flex justify-between"><span id="responsive-matrix-span-impedance" className="text-foreground-muted">Impedance</span><span id="responsive-matrix-span-8-ohms">8 Ohms</span></div>
                 </div>
               </AccordionContent>
             </AccordionItem>
@@ -293,7 +293,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">
           <Accordion type="multiple" defaultValue={['item-1']} className="w-full">
             {faqItems.map((item) => (

package/dist/assets/components/accordion.tsx

@@ -65,7 +65,7 @@ export function Accordion({
 
   return (
     <AccordionContext.Provider value={{ openItems, toggleItem, type }}>
-      <div className={cn("w-full divide-y divide-border border-y border-border", className)}>
+      <div data-sonance-name="accordion" className={cn("w-full divide-y divide-border border-y border-border", className)}>
         {children}
       </div>
     </AccordionContext.Provider>
@@ -113,7 +113,7 @@ export const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerPr
     const isDisabled = disabled || state === "disabled";
 
     return (
-      <button
+      <button data-sonance-name="accordion"
         ref={ref}
         type="button"
         onClick={() => !isDisabled && accordionContext.toggleItem(itemContext.value)}
@@ -161,7 +161,7 @@ export const AccordionContent = forwardRef<
         itemContext.isOpen ? "pb-4" : "h-0",
         className
       )}
-      aria-hidden={!itemContext.isOpen}
+      aria-hidden={!itemContext.isOpen} data-sonance-name="accordion"
       {...props}
     >
       {itemContext.isOpen && children}

package/dist/assets/components/alert-dialog.stories.tsx

@@ -28,7 +28,7 @@ export const Default: Story = {
   render: () => (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button variant="secondary">Delete Account</Button>
+        <Button id="default-button-secondary" variant="secondary">Delete Account</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -51,7 +51,7 @@ export const Destructive: Story = {
   render: () => (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button variant="primary">Delete Project</Button>
+        <Button id="destructive-button-primary" variant="primary">Delete Project</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -77,7 +77,7 @@ export const ConfirmAction: Story = {
   render: () => (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button>Publish Changes</Button>
+        <Button id="confirm-action-button">Publish Changes</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -101,7 +101,7 @@ export const WithLongContent: Story = {
   render: () => (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button variant="secondary">View Terms</Button>
+        <Button id="with-long-content-button-secondary" variant="secondary">View Terms</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -112,19 +112,19 @@ export const WithLongContent: Story = {
           </AlertDialogDescription>
         </AlertDialogHeader>
         <div className="max-h-[200px] overflow-y-auto text-sm text-foreground-secondary border border-border rounded-sm p-4 my-4">
-          <p className="mb-4">
+          <p id="with-long-content-p-lorem-ipsum-dolor-si" className="mb-4">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
             aliquip ex ea commodo consequat.
           </p>
-          <p className="mb-4">
+          <p id="with-long-content-p-duis-aute-irure-dolo" className="mb-4">
             Duis aute irure dolor in reprehenderit in voluptate velit esse
             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
             cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
           </p>
-          <p>
+          <p id="with-long-content-p-sed-ut-perspiciatis-">
             Sed ut perspiciatis unde omnis iste natus error sit voluptatem
             accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
             quae ab illo inventore veritatis et quasi architecto beatae vitae

package/dist/assets/components/alert-dialog.tsx

@@ -48,6 +48,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
+    data-sonance-name="alert-dialog"
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
       className
@@ -65,7 +66,7 @@ const AlertDialogFooter = ({
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       className
-    )}
+    )} data-sonance-name="alert-dialog"
     {...props}
   />
 );

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

@@ -160,7 +160,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 space-y-4">
           <Alert variant="success" title="Success">
             Your changes have been saved.
@@ -172,7 +172,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 space-y-4">
           <Alert variant="info" title="Information">
             A new version is available. Please refresh to update.
@@ -184,7 +184,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-2 gap-4">
             <Alert variant="success" title="Success">Operation completed successfully.</Alert>

package/dist/assets/components/alert.tsx

@@ -44,6 +44,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
 
     return (
       <div
+        data-sonance-name="alert"
         ref={ref}
         role="alert"
         className={cn(alertVariants({ variant }), className)}
@@ -52,12 +53,12 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         <Icon className="h-5 w-5 shrink-0" />
         <div className="flex-1">
           {title && (
-            <h5 className="mb-1 font-medium leading-none tracking-tight">
+            <h5 id="icon-h5-title" className="mb-1 font-medium leading-none tracking-tight">
               {title}
             </h5>
           )}
           {children && (
-            <div className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
+            <div data-sonance-name="alert" className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
               {children}
             </div>
           )}
@@ -68,7 +69,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
             className="shrink-0 rounded-sm p-1 opacity-70 transition-opacity hover:opacity-100"
           >
             <X className="h-4 w-4" />
-            <span className="sr-only">Close</span>
+            <span id="icon-span-close" className="sr-only">Close</span>
           </button>
         )}
       </div>

package/dist/assets/components/aspect-ratio.stories.tsx

@@ -18,6 +18,7 @@ export const Default: Story = {
     <div className="w-[450px]">
       <AspectRatio ratio={16 / 9} className="bg-secondary-hover rounded-sm overflow-hidden">
         <img
+          id="default-photo-by-drew-beamer"
           src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
           alt="Photo by Drew Beamer"
           className="h-full w-full object-cover"
@@ -32,6 +33,7 @@ export const Square: Story = {
     <div className="w-[300px]">
       <AspectRatio ratio={1} className="bg-secondary-hover rounded-sm overflow-hidden">
         <img
+          id="square-photo-by-drew-beamer"
           src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
           alt="Photo by Drew Beamer"
           className="h-full w-full object-cover"
@@ -46,6 +48,7 @@ export const Portrait: Story = {
     <div className="w-[250px]">
       <AspectRatio ratio={3 / 4} className="bg-secondary-hover rounded-sm overflow-hidden">
         <img
+          id="portrait-photo-by-drew-beamer"
           src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
           alt="Photo by Drew Beamer"
           className="h-full w-full object-cover"
@@ -59,7 +62,7 @@ export const WithPlaceholder: Story = {
   render: () => (
     <div className="w-[450px]">
       <AspectRatio ratio={16 / 9} className="bg-secondary-hover rounded-sm flex items-center justify-center">
-        <span className="text-foreground-muted text-sm">16:9 Aspect Ratio</span>
+        <span id="with-placeholder-span-169-aspect-ratio" className="text-foreground-muted text-sm">16:9 Aspect Ratio</span>
       </AspectRatio>
     </div>
   ),

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

@@ -149,7 +149,7 @@ export const AllowCustomValue: Story = {
   render: () => {
     const [value, setValue] = useState('');
     return (
-      <div className="w-80 space-y-4">
+      <div data-sonance-name="autocomplete.stories" className="w-80 space-y-4">
         <Autocomplete
           label="Product or Custom Entry"
           options={productOptions}
@@ -157,7 +157,7 @@ export const AllowCustomValue: Story = {
           allowCustomValue
           onValueChange={setValue}
         />
-        <p className="text-sm text-foreground-muted">
+        <p id="allow-custom-value-p-selected-value-none" className="text-sm text-foreground-muted">
           Selected: {value || 'None'}
         </p>
       </div>
@@ -181,8 +181,8 @@ export const ControlledExample: Story = {
           placeholder="Search products..."
         />
         <div className="text-sm text-foreground-muted space-y-1">
-          <p>Selected value: {value || 'None'}</p>
-          <p>Input text: {input || 'Empty'}</p>
+          <p id="controlled-example-p-selected-value-value">Selected value: {value || 'None'}</p>
+          <p id="controlled-example-p-input-text-input-emp">Input text: {input || 'Empty'}</p>
         </div>
         <button
           onClick={() => setValue('')}
@@ -226,11 +226,11 @@ export const StateMatrix: Story = {
     const states: AutocompleteState[] = ['default', 'hover', 'focus', 'open', 'error', 'disabled'];
     return (
       <div className="space-y-6 w-80">
-        <h3 className="text-sm font-medium text-foreground-muted">Autocomplete States</h3>
+        <h3 id="state-matrix-h3-autocomplete-states" className="text-sm font-medium text-foreground-muted">Autocomplete States</h3>
         <div className="grid grid-cols-1 gap-4">
           {states.map((state) => (
             <div key={state} className="flex items-center gap-4">
-              <span className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
+              <span id="state-matrix-span-state" className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
               <Autocomplete
                 state={state}
                 options={productOptions}
@@ -251,7 +251,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">
           <Autocomplete
             label="Product"
@@ -262,7 +262,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">
           <div className="grid grid-cols-2 gap-4">
             <Autocomplete
@@ -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-3 gap-4">
             <Autocomplete

package/dist/assets/components/autocomplete.tsx

@@ -173,7 +173,7 @@ export function Autocomplete({
   }, [selectedOption]);
 
   return (
-    <div ref={containerRef} className={cn("w-full", className)}>
+    <div data-sonance-name="autocomplete" ref={containerRef} className={cn("w-full", className)}>
       {label && (
         <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
           {label}
@@ -248,7 +248,7 @@ export function Autocomplete({
                   <div>
                     <div className="text-sm">{option.label}</div>
                     {option.description && (
-                      <div className={cn(
+                      <div data-sonance-name="autocomplete" className={cn(
                         "text-xs mt-0.5",
                         option.value === value ? "text-primary-foreground/70" : "text-foreground-muted"
                       )}>
@@ -263,7 +263,7 @@ export function Autocomplete({
           </div>
         )}
       </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>
   );
 }

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

@@ -115,20 +115,20 @@ 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">
           <div className="flex items-center gap-4">
             <Avatar size="md" src="https://i.pravatar.cc/150?img=1" />
             <div>
-              <p className="text-sm font-medium">John Doe</p>
-              <p className="text-xs text-foreground-muted">john@example.com</p>
+              <p id="responsive-matrix-p-john-doe" className="text-sm font-medium">John Doe</p>
+              <p id="responsive-matrix-p-johnexamplecom" className="text-xs text-foreground-muted">john@example.com</p>
             </div>
           </div>
         </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 flex justify-between items-center">
           <div className="flex items-end gap-4">
             <Avatar size="sm" fallback="SM" />
@@ -146,7 +146,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 flex justify-between items-center">
           <div className="flex items-end gap-4">
             <Avatar size="xs" fallback="XS" />

package/dist/assets/components/avatar.tsx

@@ -63,7 +63,7 @@ const Avatar = React.forwardRef<
         <AvatarImage src={src} alt={alt} />
         <AvatarFallback>
           {initials ? (
-            <span className="font-medium text-foreground-muted">{initials}</span>
+            <span id="avatar-span-initials" className="font-medium text-foreground-muted">{initials}</span>
           ) : (
             <User className="h-1/2 w-1/2 text-foreground-muted" />
           )}
@@ -126,20 +126,20 @@ function AvatarGroup({ children, max, size = "md", className }: AvatarGroupProps
   const excess = max ? Math.max(0, avatars.length - max) : 0;
 
   return (
-    <div className={cn("flex -space-x-2", className)}>
+    <div data-sonance-name="avatar" className={cn("flex -space-x-2", className)}>
       {displayAvatars.map((avatar, index) => (
         <div key={index} className="ring-2 ring-background rounded-full">
           {avatar}
         </div>
       ))}
       {excess > 0 && (
-        <div
+        <div data-sonance-name="avatar"
           className={cn(
             avatarVariants({ size, shape: "circle" }),
             "ring-2 ring-background bg-background-tertiary"
           )}
         >
-          <span className="text-xs font-medium text-foreground-muted">+{excess}</span>
+          <span id="avatar-group-span-excess" className="text-xs font-medium text-foreground-muted">+{excess}</span>
         </div>
       )}
     </div>

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

@@ -129,19 +129,19 @@ export const StatusExamples: Story = {
     <div className="space-y-4">
       <div className="flex items-center gap-2">
         <Badge variant="success">Active</Badge>
-        <span className="text-foreground-secondary">User account is active</span>
+        <span id="status-examples-span-user-account-is-acti" className="text-foreground-secondary">User account is active</span>
       </div>
       <div className="flex items-center gap-2">
         <Badge variant="warning">Pending</Badge>
-        <span className="text-foreground-secondary">Awaiting approval</span>
+        <span id="status-examples-span-awaiting-approval" className="text-foreground-secondary">Awaiting approval</span>
       </div>
       <div className="flex items-center gap-2">
         <Badge variant="error">Suspended</Badge>
-        <span className="text-foreground-secondary">Account suspended</span>
+        <span id="status-examples-span-account-suspended" className="text-foreground-secondary">Account suspended</span>
       </div>
       <div className="flex items-center gap-2">
         <Badge variant="info">New</Badge>
-        <span className="text-foreground-secondary">Recently added</span>
+        <span id="status-examples-span-recently-added" className="text-foreground-secondary">Recently added</span>
       </div>
     </div>
   ),
@@ -180,15 +180,15 @@ export const CountBadges: Story = {
   render: () => (
     <div className="flex items-center gap-6">
       <div className="relative">
-        <span className="text-foreground">Notifications</span>
+        <span id="count-badges-span-notifications" className="text-foreground">Notifications</span>
         <Badge variant="error" size="sm" className="absolute -top-2 -right-6">3</Badge>
       </div>
       <div className="relative">
-        <span className="text-foreground">Messages</span>
+        <span id="count-badges-span-messages" className="text-foreground">Messages</span>
         <Badge variant="primary" size="sm" className="absolute -top-2 -right-6">12</Badge>
       </div>
       <div className="relative">
-        <span className="text-foreground">Cart</span>
+        <span id="count-badges-span-cart" className="text-foreground">Cart</span>
         <Badge variant="info" size="sm" className="absolute -top-2 -right-4">5</Badge>
       </div>
     </div>
@@ -201,7 +201,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">
           <div className="flex flex-wrap gap-2">
             <Badge variant="primary">Primary</Badge>
@@ -214,7 +214,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">
           <div className="flex items-center gap-4">
             <div className="flex gap-2">
@@ -232,7 +232,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="flex items-center justify-between">
             <div className="flex gap-2">

package/dist/assets/components/badge.tsx

@@ -34,7 +34,7 @@ interface BadgeProps
 
 export function Badge({ className, variant, size, ...props }: BadgeProps) {
   return (
-    <span className={cn(badgeVariants({ variant, size }), className)} {...props} />
+    <span id="badge-span" data-sonance-name="badge" className={cn(badgeVariants({ variant, size }), className)} {...props} />
   );
 }
 
@@ -45,7 +45,7 @@ interface ChipProps extends BadgeProps {
 
 export function Chip({ className, variant, size, onClose, children, ...props }: ChipProps) {
   return (
-    <span className={cn(badgeVariants({ variant, size }), "gap-1", className)} {...props}>
+    <span id="chip-span" className={cn(badgeVariants({ variant, size }), "gap-1", className)} data-sonance-name="badge" {...props}>
       {children}
       {onClose && (
         <button
@@ -55,7 +55,7 @@ export function Chip({ className, variant, size, onClose, children, ...props }:
           <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
           </svg>
-          <span className="sr-only">Remove</span>
+          <span id="chip-span-remove" className="sr-only">Remove</span>
         </button>
       )}
     </span>