sonance-brand-mcp 1.3.1 → 1.3.3

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

@@ -76,11 +76,11 @@ export const LoadingStates: Story = {
     <div className="space-y-8">
       <div className="flex items-center gap-4">
         <Spinner size="sm" />
-        <span className="text-foreground-secondary">Loading content...</span>
+        <span id="loading-states-span-loading-content" className="text-foreground-secondary">Loading content...</span>
       </div>
       <div className="flex items-center gap-4">
         <DotsSpinner />
-        <span className="text-foreground-secondary">Processing...</span>
+        <span id="loading-states-span-processing" className="text-foreground-secondary">Processing...</span>
       </div>
       <div className="text-center p-8 border border-border rounded">
         <Spinner size="lg" label="Loading data" />
@@ -93,7 +93,7 @@ export const ButtonLoading: Story = {
   render: () => (
     <button className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3">
       <Spinner size="sm" />
-      <span>Processing...</span>
+      <span id="button-loading-span-processing">Processing...</span>
     </button>
   ),
 };
@@ -104,7 +104,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="text-center p-8 border border-border rounded">
             <Spinner size="md" label="Loading..." />
@@ -113,7 +113,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 justify-center items-center gap-8">
             <Spinner size="sm" label="Small" />
@@ -124,12 +124,12 @@ 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 justify-between items-center">
             <div className="flex items-center gap-4">
               <Spinner size="sm" />
-              <span className="text-foreground-secondary">Loading content...</span>
+              <span id="responsive-matrix-span-loading-content" className="text-foreground-secondary">Loading content...</span>
             </div>
             <div className="flex items-center gap-8">
               <Spinner size="sm" />
@@ -139,7 +139,7 @@ export const ResponsiveMatrix: Story = {
             </div>
             <div className="flex items-center gap-4">
               <DotsSpinner />
-              <span className="text-foreground-secondary">Processing...</span>
+              <span id="responsive-matrix-span-processing" className="text-foreground-secondary">Processing...</span>
             </div>
           </div>
         </div>

package/dist/assets/components/spinner.tsx

@@ -15,7 +15,7 @@ export function Spinner({ size = "md", className, label }: SpinnerProps) {
   };
 
   return (
-    <div className={cn("inline-flex flex-col items-center gap-2", className)}>
+    <div data-sonance-name="spinner" className={cn("inline-flex flex-col items-center gap-2", className)}>
       <div
         role="status"
         aria-label={label || "Loading"}
@@ -25,9 +25,9 @@ export function Spinner({ size = "md", className, label }: SpinnerProps) {
         )}
       />
       {label && (
-        <span className="text-xs font-medium text-foreground-muted">{label}</span>
+        <span id="spinner-span-label" className="text-xs font-medium text-foreground-muted">{label}</span>
       )}
-      <span className="sr-only">{label || "Loading..."}</span>
+      <span id="spinner-span-label-loading" className="sr-only">{label || "Loading..."}</span>
     </div>
   );
 }
@@ -52,7 +52,7 @@ export function DotsSpinner({ size = "md", className }: DotsSpinnerProps) {
   };
 
   return (
-    <div
+    <div data-sonance-name="spinner"
       role="status"
       aria-label="Loading"
       className={cn("inline-flex items-center", gapSizes[size], className)}
@@ -70,7 +70,7 @@ export function DotsSpinner({ size = "md", className }: DotsSpinnerProps) {
           }}
         />
       ))}
-      <span className="sr-only">Loading...</span>
+      <span id="dots-spinner-span-loading" className="sr-only">Loading...</span>
     </div>
   );
 }

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

@@ -84,11 +84,11 @@ export const DisabledChecked: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="space-y-4">
-      <Switch label="Off" />
-      <Switch label="On" defaultChecked />
-      <Switch label="With description" description="Additional context for this setting" />
-      <Switch label="Disabled" disabled />
-      <Switch label="Disabled on" disabled defaultChecked />
+      <Switch id="all-states-switch" label="Off" />
+      <Switch id="all-states-switch" label="On" defaultChecked />
+      <Switch id="all-states-switch" label="With description" description="Additional context for this setting" />
+      <Switch id="all-states-switch" label="Disabled" disabled />
+      <Switch id="all-states-switch" label="Disabled on" disabled defaultChecked />
     </div>
   ),
 };
@@ -97,21 +97,24 @@ export const AllStates: Story = {
 export const SettingsExample: Story = {
   render: () => (
     <div className="space-y-6 w-96">
-      <h3 className="text-lg font-medium text-foreground">Settings</h3>
+      <h3 id="settings-example-h3-settings" className="text-lg font-medium text-foreground">Settings</h3>
       <div className="space-y-4 divide-y divide-divider">
         <Switch
+          id="settings-example-switch"
           label="Push notifications"
           description="Receive push notifications on your device"
           defaultChecked
         />
         <div className="pt-4">
           <Switch
+            id="settings-example-switch"
             label="Email digest"
             description="Weekly summary of your activity"
           />
         </div>
         <div className="pt-4">
           <Switch
+            id="settings-example-switch"
             label="Auto-update"
             description="Automatically install updates"
             defaultChecked
@@ -119,6 +122,7 @@ export const SettingsExample: Story = {
         </div>
         <div className="pt-4">
           <Switch
+            id="settings-example-switch"
             label="Analytics"
             description="Help improve the product with usage data"
           />
@@ -134,34 +138,34 @@ 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">
-          <Switch label="Dark mode" description="Enable dark theme" />
-          <Switch label="Notifications" defaultChecked />
-          <Switch label="Auto-save" defaultChecked />
+          <Switch id="responsive-matrix-switch" label="Dark mode" description="Enable dark theme" />
+          <Switch id="responsive-matrix-switch" label="Notifications" defaultChecked />
+          <Switch id="responsive-matrix-switch" label="Auto-save" defaultChecked />
         </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">
-            <Switch label="Email notifications" description="Receive email updates" defaultChecked />
-            <Switch label="Push notifications" description="Mobile app alerts" />
-            <Switch label="Weekly digest" description="Summary of activity" defaultChecked />
-            <Switch label="Marketing emails" description="Product announcements" />
+            <Switch id="responsive-matrix-switch" label="Email notifications" description="Receive email updates" defaultChecked />
+            <Switch id="responsive-matrix-switch" label="Push notifications" description="Mobile app alerts" />
+            <Switch id="responsive-matrix-switch" label="Weekly digest" description="Summary of activity" defaultChecked />
+            <Switch id="responsive-matrix-switch" label="Marketing emails" description="Product announcements" />
           </div>
         </div>
       </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">
-            <Switch label="Off" />
-            <Switch label="On" defaultChecked />
-            <Switch label="Disabled" disabled />
-            <Switch label="Disabled on" disabled defaultChecked />
+            <Switch id="responsive-matrix-switch" label="Off" />
+            <Switch id="responsive-matrix-switch" label="On" defaultChecked />
+            <Switch id="responsive-matrix-switch" label="Disabled" disabled />
+            <Switch id="responsive-matrix-switch" label="Disabled on" disabled defaultChecked />
           </div>
         </div>
       </div>

package/dist/assets/components/switch.tsx

@@ -27,16 +27,20 @@ const getTrackStateStyles = (state?: SwitchState) => {
 };
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ className, label, description, id, state, disabled, checked, ...props }, ref) => {
+  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, style, ...props }, ref) => {
     const uniqueId = useId();
     const inputId = id || `switch-${uniqueId}`;
     const isDisabled = disabled || state === "disabled";
-    const isChecked = checked || state === "checked";
+
+    // Determine if we're in controlled mode
+    const isControlled = checked !== undefined || onChange !== undefined;
+    const isCheckedForState = state === "checked";
 
     return (
-      <div className="flex items-start gap-3">
+      <div data-sonance-name="switch" className="flex items-start gap-3">
         <label
           htmlFor={inputId}
+          style={style}
           className={cn(
             "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
             "border border-border bg-input transition-colors duration-200",
@@ -52,11 +56,15 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             id={inputId}
             ref={ref}
             disabled={isDisabled}
-            checked={isChecked}
-            className="peer sr-only"
+            {...(isControlled
+              ? { checked: checked || isCheckedForState, onChange }
+              : { defaultChecked: defaultChecked || isCheckedForState }
+            )}
+            className="peer sr-only" data-sonance-name="switch"
             {...props}
           />
           <span
+            id="switch-span"
             className={cn(
               "pointer-events-none absolute left-0.5 h-5 w-5 rounded-full bg-foreground-muted shadow-sm",
               "transition-transform duration-200",
@@ -76,7 +84,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               </label>
             )}
             {description && (
-              <p className="text-xs text-foreground-muted">{description}</p>
+              <p id="switch-p-description" className="text-xs text-foreground-muted">{description}</p>
             )}
           </div>
         )}

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

@@ -163,7 +163,7 @@ export const WithCheckboxes: Story = {
       <TableHeader>
         <TableRow>
           <TableHead className="w-12">
-            <Checkbox />
+            <Checkbox id="with-checkboxes-checkbox" />
           </TableHead>
           <TableHead>Product</TableHead>
           <TableHead>Category</TableHead>
@@ -174,7 +174,7 @@ export const WithCheckboxes: Story = {
         {products.map((product) => (
           <TableRow key={product.id}>
             <TableCell>
-              <Checkbox />
+              <Checkbox id="with-checkboxes-checkbox" />
             </TableCell>
             <TableCell className="font-medium">{product.name}</TableCell>
             <TableCell>{product.category}</TableCell>
@@ -241,7 +241,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-2 overflow-x-auto">
           <Table>
             <TableHeader>
@@ -263,7 +263,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">
           <Table>
             <TableHeader>
@@ -287,12 +287,12 @@ 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">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-12"><Checkbox /></TableHead>
+                <TableHead className="w-12"><Checkbox id="responsive-matrix-checkbox" /></TableHead>
                 <TableHead>Product</TableHead>
                 <TableHead>Category</TableHead>
                 <TableHead>Status</TableHead>
@@ -302,7 +302,7 @@ export const ResponsiveMatrix: Story = {
             <TableBody>
               {products.map((product) => (
                 <TableRow key={product.id}>
-                  <TableCell><Checkbox /></TableCell>
+                  <TableCell><Checkbox id="responsive-matrix-checkbox" /></TableCell>
                   <TableCell className="font-medium">{product.name}</TableCell>
                   <TableCell>{product.category}</TableCell>
                   <TableCell>

package/dist/assets/components/table.tsx

@@ -8,7 +8,7 @@ export const Table = forwardRef<
   <div className="w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("w-full caption-bottom text-sm", className)} data-sonance-name="table"
       {...props}
     />
   </div>
@@ -20,7 +20,7 @@ export const TableHeader = forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} data-sonance-name="table" {...props} />
 ));
 
 TableHeader.displayName = "TableHeader";
@@ -31,7 +31,7 @@ export const TableBody = forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn("[&_tr:last-child]:border-0", className)} data-sonance-name="table"
     {...props}
   />
 ));
@@ -47,7 +47,7 @@ export const TableFooter = forwardRef<
     className={cn(
       "border-t border-border bg-background-secondary font-medium",
       className
-    )}
+    )} data-sonance-name="table"
     {...props}
   />
 ));
@@ -65,7 +65,7 @@ export const TableRow = forwardRef<
       "hover:bg-card-hover",
       "data-[state=selected]:bg-secondary-hover",
       className
-    )}
+    )} data-sonance-name="table"
     {...props}
   />
 ));
@@ -83,7 +83,7 @@ export const TableHead = forwardRef<
       "text-xs uppercase tracking-widest",
       "[&:has([role=checkbox])]:pr-0",
       className
-    )}
+    )} data-sonance-name="table"
     {...props}
   />
 ));
@@ -100,7 +100,7 @@ export const TableCell = forwardRef<
       "p-4 align-middle text-foreground",
       "[&:has([role=checkbox])]:pr-0",
       className
-    )}
+    )} data-sonance-name="table"
     {...props}
   />
 ));
@@ -113,7 +113,7 @@ export const TableCaption = forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-foreground-muted", className)}
+    className={cn("mt-4 text-sm text-foreground-muted", className)} data-sonance-name="table"
     {...props}
   />
 ));

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

@@ -43,17 +43,17 @@ export const Default: Story = {
         <TabsTrigger value="tab3">Settings</TabsTrigger>
       </TabsList>
       <TabsContent value="tab1">
-        <p className="text-foreground-secondary">
+        <p id="default-p-manage-your-account-" className="text-foreground-secondary">
           Manage your account settings and preferences here.
         </p>
       </TabsContent>
       <TabsContent value="tab2">
-        <p className="text-foreground-secondary">
+        <p id="default-p-change-your-password" className="text-foreground-secondary">
           Change your password and security settings.
         </p>
       </TabsContent>
       <TabsContent value="tab3">
-        <p className="text-foreground-secondary">
+        <p id="default-p-configure-applicatio" className="text-foreground-secondary">
           Configure application settings and preferences.
         </p>
       </TabsContent>
@@ -73,8 +73,8 @@ export const WithCards: Story = {
       <TabsContent value="overview">
         <Card>
           <CardContent className="pt-6">
-            <h4 className="text-lg font-medium text-foreground mb-2">Overview</h4>
-            <p className="text-foreground-secondary">
+            <h4 id="with-cards-h4-overview" className="text-lg font-medium text-foreground mb-2">Overview</h4>
+            <p id="with-cards-p-get-a-highlevel-view" className="text-foreground-secondary">
               Get a high-level view of your account activity and recent changes.
             </p>
           </CardContent>
@@ -83,8 +83,8 @@ export const WithCards: Story = {
       <TabsContent value="analytics">
         <Card>
           <CardContent className="pt-6">
-            <h4 className="text-lg font-medium text-foreground mb-2">Analytics</h4>
-            <p className="text-foreground-secondary">
+            <h4 id="with-cards-h4-analytics" className="text-lg font-medium text-foreground mb-2">Analytics</h4>
+            <p id="with-cards-p-view-detailed-analyt" className="text-foreground-secondary">
               View detailed analytics and performance metrics.
             </p>
           </CardContent>
@@ -93,8 +93,8 @@ export const WithCards: Story = {
       <TabsContent value="reports">
         <Card>
           <CardContent className="pt-6">
-            <h4 className="text-lg font-medium text-foreground mb-2">Reports</h4>
-            <p className="text-foreground-secondary">
+            <h4 id="with-cards-h4-reports" className="text-lg font-medium text-foreground mb-2">Reports</h4>
+            <p id="with-cards-p-generate-and-downloa" className="text-foreground-secondary">
               Generate and download reports for your data.
             </p>
           </CardContent>
@@ -116,13 +116,13 @@ export const WithDisabledTab: Story = {
         <TabsTrigger value="tab3">Active</TabsTrigger>
       </TabsList>
       <TabsContent value="tab1">
-        <p className="text-foreground-secondary">This feature is available now.</p>
+        <p id="with-disabled-tab-p-this-feature-is-avai" className="text-foreground-secondary">This feature is available now.</p>
       </TabsContent>
       <TabsContent value="tab2">
-        <p className="text-foreground-secondary">This content is coming soon.</p>
+        <p id="with-disabled-tab-p-this-content-is-comi" className="text-foreground-secondary">This content is coming soon.</p>
       </TabsContent>
       <TabsContent value="tab3">
-        <p className="text-foreground-secondary">This feature is active.</p>
+        <p id="with-disabled-tab-p-this-feature-is-acti" className="text-foreground-secondary">This feature is active.</p>
       </TabsContent>
     </Tabs>
   ),
@@ -140,19 +140,19 @@ export const ManyTabs: Story = {
         <TabsTrigger value="contact">Contact</TabsTrigger>
       </TabsList>
       <TabsContent value="home">
-        <p className="text-foreground-secondary">Welcome to our home page.</p>
+        <p id="many-tabs-p-welcome-to-our-home-" className="text-foreground-secondary">Welcome to our home page.</p>
       </TabsContent>
       <TabsContent value="products">
-        <p className="text-foreground-secondary">Browse our product catalog.</p>
+        <p id="many-tabs-p-browse-our-product-c" className="text-foreground-secondary">Browse our product catalog.</p>
       </TabsContent>
       <TabsContent value="services">
-        <p className="text-foreground-secondary">Explore our services.</p>
+        <p id="many-tabs-p-explore-our-services" className="text-foreground-secondary">Explore our services.</p>
       </TabsContent>
       <TabsContent value="about">
-        <p className="text-foreground-secondary">Learn more about us.</p>
+        <p id="many-tabs-p-learn-more-about-us" className="text-foreground-secondary">Learn more about us.</p>
       </TabsContent>
       <TabsContent value="contact">
-        <p className="text-foreground-secondary">Get in touch with us.</p>
+        <p id="many-tabs-p-get-in-touch-with-us" className="text-foreground-secondary">Get in touch with us.</p>
       </TabsContent>
     </Tabs>
   ),
@@ -170,19 +170,19 @@ export const SettingsPanel: Story = {
       <TabsContent value="profile">
         <div className="space-y-4">
           <div>
-            <h4 className="font-medium text-foreground">Profile Information</h4>
-            <p className="text-sm text-foreground-secondary mt-1">
+            <h4 id="settings-panel-h4-profile-information" className="font-medium text-foreground">Profile Information</h4>
+            <p id="settings-panel-p-update-your-personal" className="text-sm text-foreground-secondary mt-1">
               Update your personal information and profile picture.
             </p>
           </div>
           <div className="grid grid-cols-2 gap-4 pt-4 border-t border-divider">
             <div>
-              <span className="text-xs text-foreground-muted">Name</span>
-              <p className="text-foreground">John Doe</p>
+              <span id="settings-panel-span-name" className="text-xs text-foreground-muted">Name</span>
+              <p id="settings-panel-p-john-doe" className="text-foreground">John Doe</p>
             </div>
             <div>
-              <span className="text-xs text-foreground-muted">Email</span>
-              <p className="text-foreground">john@example.com</p>
+              <span id="settings-panel-span-email" className="text-xs text-foreground-muted">Email</span>
+              <p id="settings-panel-p-johnexamplecom" className="text-foreground">john@example.com</p>
             </div>
           </div>
         </div>
@@ -190,8 +190,8 @@ export const SettingsPanel: Story = {
       <TabsContent value="notifications">
         <div className="space-y-4">
           <div>
-            <h4 className="font-medium text-foreground">Notification Preferences</h4>
-            <p className="text-sm text-foreground-secondary mt-1">
+            <h4 id="settings-panel-h4-notification-prefere" className="font-medium text-foreground">Notification Preferences</h4>
+            <p id="settings-panel-p-choose-how-you-want-" className="text-sm text-foreground-secondary mt-1">
               Choose how you want to be notified about updates.
             </p>
           </div>
@@ -200,8 +200,8 @@ export const SettingsPanel: Story = {
       <TabsContent value="security">
         <div className="space-y-4">
           <div>
-            <h4 className="font-medium text-foreground">Security Settings</h4>
-            <p className="text-sm text-foreground-secondary mt-1">
+            <h4 id="settings-panel-h4-security-settings" className="font-medium text-foreground">Security Settings</h4>
+            <p id="settings-panel-p-manage-your-password" className="text-sm text-foreground-secondary mt-1">
               Manage your password and two-factor authentication.
             </p>
           </div>
@@ -216,12 +216,12 @@ export const StateMatrix: Story = {
   render: () => {
     const states: TabsTriggerState[] = ['default', 'hover', 'focus', 'active', 'disabled'];
     return (
-      <div className="space-y-6">
-        <h3 className="text-sm font-medium text-foreground-muted">TabsTrigger States</h3>
+      <div data-sonance-name="tabs.stories" className="space-y-6">
+        <h3 id="state-matrix-h3-tabstrigger-states" className="text-sm font-medium text-foreground-muted">TabsTrigger States</h3>
         <div className="flex flex-wrap gap-4">
           {states.map((state) => (
             <div key={state} className="flex flex-col items-center gap-2">
-              <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>
               <Tabs defaultValue="demo">
                 <TabsList>
                   <TabsTrigger value="demo" state={state}>
@@ -243,7 +243,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">
           <Tabs defaultValue="tab1" className="w-full">
             <TabsList className="w-full">
@@ -251,17 +251,17 @@ export const ResponsiveMatrix: Story = {
               <TabsTrigger value="tab2" className="flex-1">Tab 2</TabsTrigger>
             </TabsList>
             <TabsContent value="tab1">
-              <p className="text-foreground-secondary text-sm">Mobile tab content.</p>
+              <p id="responsive-matrix-p-mobile-tab-content" className="text-foreground-secondary text-sm">Mobile tab content.</p>
             </TabsContent>
             <TabsContent value="tab2">
-              <p className="text-foreground-secondary text-sm">Second tab content.</p>
+              <p id="responsive-matrix-p-second-tab-content" className="text-foreground-secondary text-sm">Second tab content.</p>
             </TabsContent>
           </Tabs>
         </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">
           <Tabs defaultValue="overview" className="w-full">
             <TabsList>
@@ -272,7 +272,7 @@ export const ResponsiveMatrix: Story = {
             <TabsContent value="overview">
               <Card>
                 <CardContent className="pt-6">
-                  <p className="text-foreground-secondary">Overview content for tablet view.</p>
+                  <p id="responsive-matrix-p-overview-content-for" className="text-foreground-secondary">Overview content for tablet view.</p>
                 </CardContent>
               </Card>
             </TabsContent>
@@ -281,7 +281,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">
           <Tabs defaultValue="home" className="w-full">
             <TabsList>
@@ -294,7 +294,7 @@ export const ResponsiveMatrix: Story = {
             <TabsContent value="home">
               <Card>
                 <CardContent className="pt-6">
-                  <p className="text-foreground-secondary">Full-width desktop tab content with multiple tabs available.</p>
+                  <p id="responsive-matrix-p-fullwidth-desktop-ta" className="text-foreground-secondary">Full-width desktop tab content with multiple tabs available.</p>
                 </CardContent>
               </Card>
             </TabsContent>

package/dist/assets/components/tabs.tsx

@@ -63,7 +63,7 @@ interface TabsListProps {
 
 export function TabsList({ className, children }: TabsListProps) {
   return (
-    <div
+    <div data-sonance-name="tabs"
       role="tablist"
       className={cn(
         "inline-flex items-center gap-1 border-b border-border",
@@ -98,7 +98,7 @@ export function TabsTrigger({
   const isDisabled = disabled || state === "disabled";
 
   return (
-    <button
+    <button data-sonance-name="tabs"
       role="tab"
       type="button"
       aria-selected={isActive}
@@ -117,7 +117,7 @@ export function TabsTrigger({
     >
       {children}
       {isActive && (
-        <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
+        <span id="tabs-trigger-span" className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
       )}
     </button>
   );