sonance-brand-mcp 1.3.1 → 1.3.2

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

@@ -26,19 +26,19 @@ export const Default: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Drawer</Button>
+        <Button id="default-button" onClick={() => setOpen(true)}>Open Drawer</Button>
         <Drawer open={open} onClose={() => setOpen(false)}>
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Drawer Title</DrawerTitle>
           </DrawerHeader>
           <DrawerBody>
-            <p className="text-foreground-secondary">
+            <p id="default-p-this-is-the-drawer-c" className="text-foreground-secondary">
               This is the drawer content area. You can add any content here.
             </p>
           </DrawerBody>
           <DrawerFooter>
-            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Save</Button>
+            <Button id="default-button-secondary" variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button id="default-button" onClick={() => setOpen(false)}>Save</Button>
           </DrawerFooter>
         </Drawer>
       </>
@@ -51,7 +51,7 @@ export const LeftPosition: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Left Drawer</Button>
+        <Button id="left-position-button" onClick={() => setOpen(true)}>Open Left Drawer</Button>
         <Drawer open={open} onClose={() => setOpen(false)} position="left">
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Navigation</DrawerTitle>
@@ -60,6 +60,7 @@ export const LeftPosition: Story = {
             <nav className="space-y-2">
               {['Dashboard', 'Products', 'Orders', 'Customers', 'Settings'].map((item) => (
                 <a
+                  id="nav-a"
                   key={item}
                   href="#"
                   className="block px-4 py-2 text-foreground hover:bg-secondary-hover rounded transition-colors"
@@ -80,13 +81,13 @@ export const TopPosition: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Top Drawer</Button>
+        <Button id="top-position-button" onClick={() => setOpen(true)}>Open Top Drawer</Button>
         <Drawer open={open} onClose={() => setOpen(false)} position="top">
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Notifications</DrawerTitle>
           </DrawerHeader>
           <DrawerBody>
-            <p className="text-foreground-secondary">
+            <p id="top-position-p-top-drawer-content-a" className="text-foreground-secondary">
               Top drawer content appears from the top of the screen.
             </p>
           </DrawerBody>
@@ -101,7 +102,7 @@ export const BottomPosition: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Bottom Drawer</Button>
+        <Button id="bottom-position-button" onClick={() => setOpen(true)}>Open Bottom Drawer</Button>
         <Drawer open={open} onClose={() => setOpen(false)} position="bottom">
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Quick Actions</DrawerTitle>
@@ -114,7 +115,7 @@ export const BottomPosition: Story = {
                   className="flex flex-col items-center gap-2 p-4 hover:bg-secondary-hover rounded transition-colors"
                 >
                   <div className="w-10 h-10 rounded-full bg-primary" />
-                  <span className="text-sm text-foreground">{action}</span>
+                  <span id="bottom-position-span-action" className="text-sm text-foreground">{action}</span>
                 </button>
               ))}
             </div>
@@ -130,21 +131,21 @@ export const FormDrawer: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Edit Profile</Button>
+        <Button id="form-drawer-button" onClick={() => setOpen(true)}>Edit Profile</Button>
         <Drawer open={open} onClose={() => setOpen(false)}>
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Edit Profile</DrawerTitle>
           </DrawerHeader>
           <DrawerBody>
             <form className="space-y-4">
-              <Input label="Full Name" placeholder="John Doe" />
-              <Input label="Email" type="email" placeholder="john@example.com" />
-              <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+              <Input id="form-drawer-input-john-doe" label="Full Name" placeholder="John Doe" />
+              <Input id="form-drawer-input-johnexamplecom" label="Email" type="email" placeholder="john@example.com" />
+              <Input id="form-drawer-input-1-555-0000000" label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
             </form>
           </DrawerBody>
           <DrawerFooter>
-            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Save Changes</Button>
+            <Button id="form-drawer-button-secondary" variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button id="form-drawer-button" onClick={() => setOpen(false)}>Save Changes</Button>
           </DrawerFooter>
         </Drawer>
       </>
@@ -158,16 +159,16 @@ 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] h-[400px] border border-dashed border-border relative overflow-hidden">
           <div className="absolute right-0 top-0 bottom-0 w-[280px] bg-background border-l border-border shadow-lg">
             <div className="p-4 border-b border-border">
-              <h3 className="font-semibold">Drawer Title</h3>
+              <h3 id="responsive-matrix-h3-drawer-title" className="font-semibold">Drawer Title</h3>
             </div>
             <div className="p-4">
-              <p className="text-sm text-foreground-secondary">Full-height drawer on mobile.</p>
+              <p id="responsive-matrix-p-fullheight-drawer-on" className="text-sm text-foreground-secondary">Full-height drawer on mobile.</p>
               <div className="mt-4 space-y-4">
-                <Input label="Name" placeholder="Enter name" />
+                <Input id="responsive-matrix-input-enter-name" label="Name" placeholder="Enter name" />
               </div>
             </div>
           </div>
@@ -175,38 +176,38 @@ 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] h-[300px] border border-dashed border-border relative overflow-hidden">
           <div className="absolute right-0 top-0 bottom-0 w-[400px] bg-background border-l border-border shadow-lg">
             <div className="p-4 border-b border-border">
-              <h3 className="font-semibold">Edit Profile</h3>
+              <h3 id="responsive-matrix-h3-edit-profile" className="font-semibold">Edit Profile</h3>
             </div>
             <div className="p-4 space-y-4">
-              <Input label="Name" placeholder="John Doe" />
-              <Input label="Email" placeholder="john@example.com" />
+              <Input id="responsive-matrix-input-john-doe" label="Name" placeholder="John Doe" />
+              <Input id="responsive-matrix-input-johnexamplecom" label="Email" placeholder="john@example.com" />
             </div>
             <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-border flex justify-end gap-2">
-              <Button variant="secondary" size="sm">Cancel</Button>
-              <Button size="sm">Save</Button>
+              <Button id="responsive-matrix-button-secondary" variant="secondary" size="sm">Cancel</Button>
+              <Button id="responsive-matrix-button" size="sm">Save</Button>
             </div>
           </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] h-[300px] border border-dashed border-border relative overflow-hidden bg-black/20">
           <div className="absolute right-0 top-0 bottom-0 w-[480px] bg-background border-l border-border shadow-lg">
             <div className="p-6 border-b border-border">
-              <h3 className="text-lg font-semibold">Settings Panel</h3>
+              <h3 id="responsive-matrix-h3-settings-panel" className="text-lg font-semibold">Settings Panel</h3>
             </div>
             <div className="p-6 space-y-4">
-              <Input label="Display Name" placeholder="Enter display name" />
-              <Input label="Email" type="email" placeholder="email@example.com" />
+              <Input id="responsive-matrix-input-enter-display-n" label="Display Name" placeholder="Enter display name" />
+              <Input id="responsive-matrix-input-emailexamplecom" label="Email" type="email" placeholder="email@example.com" />
             </div>
             <div className="absolute bottom-0 left-0 right-0 p-6 border-t border-border flex justify-end gap-2">
-              <Button variant="secondary">Cancel</Button>
-              <Button>Save Changes</Button>
+              <Button id="responsive-matrix-button-secondary" variant="secondary">Cancel</Button>
+              <Button id="responsive-matrix-button">Save Changes</Button>
             </div>
           </div>
         </div>

package/dist/assets/components/drawer.tsx

@@ -54,14 +54,14 @@ export function Drawer({
   };
 
   return (
-    <div className="fixed inset-0 z-50">
+    <div data-sonance-name="drawer" className="fixed inset-0 z-50">
       {/* Backdrop */}
       <div
         className="absolute inset-0 bg-overlay animate-in fade-in duration-200"
         onClick={onClose}
       />
       {/* Drawer panel */}
-      <div
+      <div data-sonance-name="drawer"
         className={cn(
           "absolute bg-background border-border shadow-xl",
           position === "left" && "border-r",
@@ -87,7 +87,7 @@ export const DrawerHeader = forwardRef<
     className={cn(
       "flex items-center justify-between px-6 py-4 border-b border-border",
       className
-    )}
+    )} data-sonance-name="drawer"
     {...props}
   >
     <div>{children}</div>
@@ -97,7 +97,7 @@ export const DrawerHeader = forwardRef<
         className="p-1 text-foreground-muted hover:text-foreground transition-colors"
       >
         <X className="h-5 w-5" />
-        <span className="sr-only">Close</span>
+        <span id="drawer-header-span-close" className="sr-only">Close</span>
       </button>
     )}
   </div>
@@ -110,6 +110,7 @@ export const DrawerTitle = forwardRef<
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
   <h2
+    id="drawer-title-h2"
     ref={ref}
     className={cn("text-lg font-medium text-foreground", className)}
     {...props}
@@ -124,7 +125,7 @@ export const DrawerBody = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex-1 overflow-auto p-6", className)}
+    className={cn("flex-1 overflow-auto p-6", className)} data-sonance-name="drawer"
     {...props}
   />
 ));
@@ -140,7 +141,7 @@ export const DrawerFooter = forwardRef<
     className={cn(
       "flex items-center justify-end gap-3 px-6 py-4 border-t border-border",
       className
-    )}
+    )} data-sonance-name="drawer"
     {...props}
   />
 ));

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

@@ -117,7 +117,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span id="dropdown-menu-checkbox-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -141,7 +141,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span id="dropdown-menu-radio-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -186,11 +186,7 @@ const DropdownMenuShortcut = ({
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-foreground-muted",
-        className
-      )}
+    <span id="dropdown-menu-shortcut-span" data-sonance-name="dropdown-menu"
       {...props}
     />
   );

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

@@ -178,7 +178,7 @@ export const CustomTrigger: Story = {
   render: () => (
     <Dropdown>
       <DropdownTrigger asChild>
-        <Button variant="secondary">Custom Button Trigger</Button>
+        <Button id="custom-trigger-button-secondary" variant="secondary">Custom Button Trigger</Button>
       </DropdownTrigger>
       <DropdownMenu>
         <DropdownItem>Action 1</DropdownItem>
@@ -197,13 +197,13 @@ export const UserMenu: Story = {
           <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">
             JD
           </div>
-          <span className="text-sm font-medium text-foreground">John Doe</span>
+          <span id="user-menu-span-john-doe" className="text-sm font-medium text-foreground">John Doe</span>
         </button>
       </DropdownTrigger>
       <DropdownMenu align="end">
         <div className="px-3 py-2 border-b border-border">
-          <p className="text-sm font-medium text-foreground">John Doe</p>
-          <p className="text-xs text-foreground-muted">john@sonance.com</p>
+          <p id="user-menu-p-john-doe" className="text-sm font-medium text-foreground">John Doe</p>
+          <p id="user-menu-p-johnsonancecom" className="text-xs text-foreground-muted">john@sonance.com</p>
         </div>
         <DropdownItem icon={<User className="h-4 w-4" />}>Profile</DropdownItem>
         <DropdownItem icon={<Settings className="h-4 w-4" />}>Settings</DropdownItem>
@@ -222,13 +222,13 @@ export const StateMatrix: Story = {
     const triggerStates: DropdownTriggerState[] = ['default', 'hover', 'focus', 'open', 'disabled'];
     const itemStates: DropdownItemState[] = ['default', 'hover', 'focus', 'selected', 'disabled'];
     return (
-      <div className="space-y-8">
+      <div data-sonance-name="dropdown.stories" className="space-y-8">
         <div>
-          <h3 className="text-sm font-medium text-foreground-muted mb-4">DropdownTrigger States</h3>
+          <h3 id="state-matrix-h3-dropdowntrigger-stat" className="text-sm font-medium text-foreground-muted mb-4">DropdownTrigger States</h3>
           <div className="flex flex-wrap gap-4">
             {triggerStates.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>
                 <Dropdown>
                   <DropdownTrigger state={state}>{state}</DropdownTrigger>
                   <DropdownMenu>
@@ -240,7 +240,7 @@ export const StateMatrix: Story = {
           </div>
         </div>
         <div>
-          <h3 className="text-sm font-medium text-foreground-muted mb-4">DropdownItem States (Open menu to see)</h3>
+          <h3 id="state-matrix-h3-dropdownitem-states-" className="text-sm font-medium text-foreground-muted mb-4">DropdownItem States (Open menu to see)</h3>
           <Dropdown>
             <DropdownTrigger state="open">View Item States</DropdownTrigger>
             <DropdownMenu>
@@ -263,7 +263,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 flex justify-center">
           <Dropdown>
             <DropdownTrigger>Actions</DropdownTrigger>
@@ -278,7 +278,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-between">
           <Dropdown>
             <DropdownTrigger>File</DropdownTrigger>
@@ -301,7 +301,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 gap-4">
             <Dropdown>
@@ -325,7 +325,7 @@ export const ResponsiveMatrix: Story = {
             <DropdownTrigger asChild>
               <button className="flex items-center gap-2 p-2 hover:bg-secondary-hover rounded">
                 <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">JD</div>
-                <span className="text-sm font-medium">John Doe</span>
+                <span id="responsive-matrix-span-john-doe" className="text-sm font-medium">John Doe</span>
               </button>
             </DropdownTrigger>
             <DropdownMenu align="end">

package/dist/assets/components/dropdown.tsx

@@ -106,14 +106,14 @@ export function DropdownTrigger({ children, className, asChild, disabled, state
 
   if (asChild) {
     return (
-      <span onClick={() => !isDisabled && setIsOpen(!isOpen)} className={className}>
+      <span id="dropdown-trigger-span-children" data-sonance-name="dropdown" onClick={() => !isDisabled && setIsOpen(!isOpen)} className={className}>
         {children}
       </span>
     );
   }
 
   return (
-    <button
+    <button data-sonance-name="dropdown"
       type="button"
       onClick={() => !isDisabled && setIsOpen(!isOpen)}
       disabled={isDisabled}
@@ -234,11 +234,11 @@ export function DropdownItem({
         className
       )}
     >
-      {icon && <span className="w-4 h-4 shrink-0">{icon}</span>}
-      <span className="flex-1">{children}</span>
+      {icon && <span id="dropdown-item-span-icon" className="w-4 h-4 shrink-0">{icon}</span>}
+      <span id="dropdown-item-span-children" className="flex-1">{children}</span>
       {isSelected && !icon && <Check className="h-4 w-4 ml-auto" />}
       {shortcut && (
-        <span className="ml-auto text-xs text-foreground-muted">{shortcut}</span>
+        <span id="dropdown-item-span-shortcut" className="ml-auto text-xs text-foreground-muted">{shortcut}</span>
       )}
     </button>
   );

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

@@ -29,10 +29,10 @@ export const Default: Story = {
     };
 
     return (
-      <Form onSubmit={handleSubmit} className="w-80 space-y-4">
+      <Form data-sonance-name="form.stories" onSubmit={handleSubmit} className="w-80 space-y-4">
         <FormField name="email">
           <FormLabel>Email</FormLabel>
-          <Input name="email" type="email" placeholder="Enter your email" />
+          <Input id="default-input-email" name="email" type="email" placeholder="Enter your email" />
         </FormField>
         <FormSubmit>Subscribe</FormSubmit>
       </Form>
@@ -75,13 +75,13 @@ export const WithValidation: Story = {
       >
         <FormField name="email">
           <FormLabel required>Email</FormLabel>
-          <Input name="email" type="email" placeholder="you@example.com" />
+          <Input id="with-validation-input-email" name="email" type="email" placeholder="you@example.com" />
           <FormMessage />
         </FormField>
 
         <FormField name="password">
           <FormLabel required>Password</FormLabel>
-          <Input name="password" type="password" placeholder="Enter password" />
+          <Input id="with-validation-input-password" name="password" type="password" placeholder="Enter password" />
           <FormDescription>Must be at least 8 characters</FormDescription>
           <FormMessage />
         </FormField>
@@ -121,13 +121,13 @@ export const ContactForm: Story = {
         <div className="grid grid-cols-2 gap-4">
           <FormField name="name">
             <FormLabel required>Name</FormLabel>
-            <Input name="name" placeholder="Your name" />
+            <Input id="contact-form-input-name" name="name" placeholder="Your name" />
             <FormMessage />
           </FormField>
 
           <FormField name="email">
             <FormLabel required>Email</FormLabel>
-            <Input name="email" type="email" placeholder="you@example.com" />
+            <Input id="contact-form-input-email" name="email" type="email" placeholder="you@example.com" />
             <FormMessage />
           </FormField>
         </div>
@@ -135,6 +135,7 @@ export const ContactForm: Story = {
         <FormField name="subject">
           <FormLabel required>Subject</FormLabel>
           <Select
+            id="contact-form-select-select-a-topic"
             placeholder="Select a topic"
             options={[
               { value: 'sales', label: 'Sales Inquiry' },
@@ -148,7 +149,7 @@ export const ContactForm: Story = {
 
         <FormField name="message">
           <FormLabel required>Message</FormLabel>
-          <Textarea name="message" placeholder="How can we help?" rows={4} />
+          <Textarea id="contact-form-textarea-message" name="message" placeholder="How can we help?" rows={4} />
           <FormMessage />
         </FormField>
 
@@ -201,38 +202,38 @@ export const RegistrationForm: Story = {
         <div className="grid grid-cols-2 gap-4">
           <FormField name="firstName">
             <FormLabel required>First Name</FormLabel>
-            <Input name="firstName" placeholder="John" />
+            <Input id="registration-form-input-firstname" name="firstName" placeholder="John" />
             <FormMessage />
           </FormField>
 
           <FormField name="lastName">
             <FormLabel required>Last Name</FormLabel>
-            <Input name="lastName" placeholder="Doe" />
+            <Input id="registration-form-input-lastname" name="lastName" placeholder="Doe" />
             <FormMessage />
           </FormField>
         </div>
 
         <FormField name="email">
           <FormLabel required>Email</FormLabel>
-          <Input name="email" type="email" placeholder="john@example.com" />
+          <Input id="registration-form-input-email" name="email" type="email" placeholder="john@example.com" />
           <FormMessage />
         </FormField>
 
         <FormField name="password">
           <FormLabel required>Password</FormLabel>
-          <Input name="password" type="password" />
+          <Input id="registration-form-input-password" name="password" type="password" />
           <FormDescription>Minimum 8 characters</FormDescription>
           <FormMessage />
         </FormField>
 
         <FormField name="confirmPassword">
           <FormLabel required>Confirm Password</FormLabel>
-          <Input name="confirmPassword" type="password" />
+          <Input id="registration-form-input-confirmpassword" name="confirmPassword" type="password" />
           <FormMessage />
         </FormField>
 
         <FormField name="terms">
-          <Checkbox name="terms" value="accepted" label="I accept the terms and conditions" />
+          <Checkbox id="registration-form-checkbox-terms" name="terms" value="accepted" label="I accept the terms and conditions" />
           <FormMessage />
         </FormField>
 
@@ -247,25 +248,25 @@ export const ComponentsShowcase: Story = {
   render: () => (
     <div className="w-80 space-y-6">
       <div>
-        <h4 className="text-sm font-medium mb-2">FormLabel</h4>
+        <h4 id="components-showcase-h4-formlabel" className="text-sm font-medium mb-2">FormLabel</h4>
         <FormLabel>Regular Label</FormLabel>
         <FormLabel required>Required Label</FormLabel>
       </div>
 
       <div>
-        <h4 className="text-sm font-medium mb-2">FormDescription</h4>
+        <h4 id="components-showcase-h4-formdescription" className="text-sm font-medium mb-2">FormDescription</h4>
         <FormDescription>
           This is helper text that provides additional context for the field.
         </FormDescription>
       </div>
 
       <div>
-        <h4 className="text-sm font-medium mb-2">FormMessage (Error)</h4>
+        <h4 id="components-showcase-h4-formmessage-error" className="text-sm font-medium mb-2">FormMessage (Error)</h4>
         <FormMessage>This field is required</FormMessage>
       </div>
 
       <div>
-        <h4 className="text-sm font-medium mb-2">FormSubmit</h4>
+        <h4 id="components-showcase-h4-formsubmit" className="text-sm font-medium mb-2">FormSubmit</h4>
         <FormSubmit>Submit Button</FormSubmit>
       </div>
     </div>
@@ -285,7 +286,7 @@ export const AsyncSubmission: Story = {
       <Form onSubmit={handleSubmit} className="w-80 space-y-4">
         <FormField name="data">
           <FormLabel>Data</FormLabel>
-          <Input name="data" placeholder="Enter something" />
+          <Input id="async-submission-input-data" name="data" placeholder="Enter something" />
           <FormDescription>
             The submit button shows loading state during submission
           </FormDescription>
@@ -302,12 +303,12 @@ 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">
           <Form className="space-y-4">
             <FormField name="email">
               <FormLabel>Email</FormLabel>
-              <Input name="email" type="email" placeholder="you@example.com" />
+              <Input id="responsive-matrix-input-email" name="email" type="email" placeholder="you@example.com" />
             </FormField>
             <FormSubmit className="w-full">Subscribe</FormSubmit>
           </Form>
@@ -315,22 +316,22 @@ 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">
           <Form className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <FormField name="firstName">
                 <FormLabel>First Name</FormLabel>
-                <Input name="firstName" placeholder="John" />
+                <Input id="responsive-matrix-input-firstname" name="firstName" placeholder="John" />
               </FormField>
               <FormField name="lastName">
                 <FormLabel>Last Name</FormLabel>
-                <Input name="lastName" placeholder="Doe" />
+                <Input id="responsive-matrix-input-lastname" name="lastName" placeholder="Doe" />
               </FormField>
             </div>
             <FormField name="email">
               <FormLabel>Email</FormLabel>
-              <Input name="email" type="email" placeholder="john@example.com" />
+              <Input id="responsive-matrix-input-email" name="email" type="email" placeholder="john@example.com" />
             </FormField>
             <FormSubmit>Submit</FormSubmit>
           </Form>
@@ -338,29 +339,29 @@ 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">
           <Form className="space-y-4 max-w-2xl">
             <div className="grid grid-cols-3 gap-4">
               <FormField name="firstName">
                 <FormLabel required>First Name</FormLabel>
-                <Input name="firstName" placeholder="John" />
+                <Input id="responsive-matrix-input-firstname" name="firstName" placeholder="John" />
                 <FormMessage />
               </FormField>
               <FormField name="lastName">
                 <FormLabel required>Last Name</FormLabel>
-                <Input name="lastName" placeholder="Doe" />
+                <Input id="responsive-matrix-input-lastname" name="lastName" placeholder="Doe" />
                 <FormMessage />
               </FormField>
               <FormField name="email">
                 <FormLabel required>Email</FormLabel>
-                <Input name="email" type="email" placeholder="john@example.com" />
+                <Input id="responsive-matrix-input-email" name="email" type="email" placeholder="john@example.com" />
                 <FormMessage />
               </FormField>
             </div>
             <FormField name="message">
               <FormLabel>Message</FormLabel>
-              <Textarea name="message" placeholder="How can we help?" rows={3} />
+              <Textarea id="responsive-matrix-textarea-message" name="message" placeholder="How can we help?" rows={3} />
               <FormDescription>Optional message</FormDescription>
             </FormField>
             <FormSubmit>Send Message</FormSubmit>