sonance-brand-mcp 1.3.1 → 1.3.3

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

@@ -96,20 +96,23 @@ export const Password: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="space-y-6 w-80">
-      <Input placeholder="Default input" />
-      <Input label="With Label" placeholder="Enter text..." />
+      <Input id="all-states-input-default-input" placeholder="Default input" />
+      <Input id="all-states-input-enter-text" label="With Label" placeholder="Enter text..." />
       <Input
+        id="all-states-input-enter-email"
         label="With Error"
         placeholder="Enter email..."
         error="This field is required"
         defaultValue="invalid"
       />
       <Input
+        id="all-states-input-cannot-edit"
         label="Disabled"
         placeholder="Cannot edit..."
         disabled
       />
       <Input
+        id="all-states-input"
         label="With Value"
         defaultValue="Pre-filled value"
       />
@@ -121,10 +124,10 @@ export const AllStates: Story = {
 export const FormExample: Story = {
   render: () => (
     <form className="space-y-4 w-80">
-      <Input label="First Name" placeholder="John" />
-      <Input label="Last Name" placeholder="Doe" />
-      <Input label="Email" type="email" placeholder="john@example.com" />
-      <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+      <Input id="form-example-input-john" label="First Name" placeholder="John" />
+      <Input id="form-example-input-doe" label="Last Name" placeholder="Doe" />
+      <Input id="form-example-input-johnexamplecom" label="Email" type="email" placeholder="john@example.com" />
+      <Input id="form-example-input-1-555-0000000" label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
     </form>
   ),
 };
@@ -135,13 +138,14 @@ export const StateMatrix: Story = {
     const states: InputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
 
     return (
-      <div className="space-y-6 w-96">
-        <h3 className="text-sm font-medium text-foreground-muted">Input States</h3>
+      <div data-sonance-name="input.stories" className="space-y-6 w-96">
+        <h3 id="state-matrix-h3-input-states" className="text-sm font-medium text-foreground-muted">Input 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>
               <Input
+                id="state-matrix-input"
                 state={state}
                 placeholder={`${state} state`}
                 defaultValue={state !== 'default' ? 'Input value' : ''}
@@ -161,18 +165,19 @@ export const LabeledStateMatrix: Story = {
 
     return (
       <div className="space-y-6">
-        <h3 className="text-sm font-medium text-foreground-muted">Input with Label - All States</h3>
+        <h3 id="labeled-state-matrix-h3-input-with-label-all" className="text-sm font-medium text-foreground-muted">Input with Label - All States</h3>
         <div className="grid grid-cols-5 gap-4">
           {states.map((state) => (
             <div key={state} className="text-center">
               <Input
+                id="labeled-state-matrix-input-nameexamplecom"
                 label="Email"
                 state={state}
                 placeholder="name@example.com"
                 defaultValue={state !== 'default' ? 'user@email.com' : ''}
                 error={state === 'error' ? 'Invalid email' : undefined}
               />
-              <p className="text-xs text-foreground-muted mt-2 uppercase">{state}</p>
+              <p id="labeled-state-matrix-p-state" className="text-xs text-foreground-muted mt-2 uppercase">{state}</p>
             </div>
           ))}
         </div>
@@ -187,34 +192,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">
-          <Input label="Email" placeholder="name@example.com" />
-          <Input label="Password" type="password" placeholder="Enter password" />
-          <Input label="Error State" error="This field is required" defaultValue="Invalid" />
+          <Input id="responsive-matrix-input-nameexamplecom" label="Email" placeholder="name@example.com" />
+          <Input id="responsive-matrix-input-enter-password" label="Password" type="password" placeholder="Enter password" />
+          <Input id="responsive-matrix-input" label="Error State" error="This field is required" defaultValue="Invalid" />
         </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">
-            <Input label="First Name" placeholder="John" />
-            <Input label="Last Name" placeholder="Doe" />
-            <Input label="Email" type="email" placeholder="john@example.com" />
-            <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+            <Input id="responsive-matrix-input-john" label="First Name" placeholder="John" />
+            <Input id="responsive-matrix-input-doe" label="Last Name" placeholder="Doe" />
+            <Input id="responsive-matrix-input-johnexamplecom" label="Email" type="email" placeholder="john@example.com" />
+            <Input id="responsive-matrix-input-1-555-0000000" label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
           </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">
-            <Input label="First Name" placeholder="John" />
-            <Input label="Last Name" placeholder="Doe" />
-            <Input label="Email" type="email" placeholder="john@example.com" />
-            <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+            <Input id="responsive-matrix-input-john" label="First Name" placeholder="John" />
+            <Input id="responsive-matrix-input-doe" label="Last Name" placeholder="Doe" />
+            <Input id="responsive-matrix-input-johnexamplecom" label="Email" type="email" placeholder="john@example.com" />
+            <Input id="responsive-matrix-input-1-555-0000000" label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
           </div>
         </div>
       </div>

package/dist/assets/components/input.tsx

@@ -8,6 +8,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: string;
   /** Visual state for Storybook/Figma documentation */
   state?: InputState;
+  /** Container style for the wrapper div */
+  wrapperStyle?: React.CSSProperties;
 }
 
 // State styles for Storybook/Figma visualization
@@ -25,12 +27,12 @@ const getStateStyles = (state?: InputState) => {
 };
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, error, state, disabled, ...props }, ref) => {
+  ({ className, label, error, state, disabled, style, wrapperStyle, ...props }, ref) => {
     const isDisabled = disabled || state === "disabled";
     const hasError = error || state === "error";
 
     return (
-      <div className="w-full">
+      <div data-sonance-name="input" className="w-full" style={wrapperStyle}>
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -39,6 +41,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         <input
           ref={ref}
           disabled={isDisabled}
+          style={style}
           className={cn(
             "w-full border border-input-border bg-input px-4 py-3",
             "text-foreground placeholder:text-input-placeholder",
@@ -49,10 +52,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             hasError && "border-error",
             getStateStyles(state),
             className
-          )}
+          )} data-sonance-name="input"
           {...props}
         />
-        {error && <p className="mt-1 text-sm text-error">{error}</p>}
+        {error && <p id="input-p-error" className="mt-1 text-sm text-error">{error}</p>}
       </div>
     );
   }

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

@@ -50,27 +50,27 @@ export const CommonShortcuts: Story = {
   render: () => (
     <div className="space-y-3">
       <div className="flex items-center justify-between">
-        <span className="text-foreground-secondary">Copy</span>
+        <span id="common-shortcuts-span-copy" className="text-foreground-secondary">Copy</span>
         <Kbd keys={shortcuts.copy} />
       </div>
       <div className="flex items-center justify-between">
-        <span className="text-foreground-secondary">Paste</span>
+        <span id="common-shortcuts-span-paste" className="text-foreground-secondary">Paste</span>
         <Kbd keys={shortcuts.paste} />
       </div>
       <div className="flex items-center justify-between">
-        <span className="text-foreground-secondary">Undo</span>
+        <span id="common-shortcuts-span-undo" className="text-foreground-secondary">Undo</span>
         <Kbd keys={shortcuts.undo} />
       </div>
       <div className="flex items-center justify-between">
-        <span className="text-foreground-secondary">Redo</span>
+        <span id="common-shortcuts-span-redo" className="text-foreground-secondary">Redo</span>
         <Kbd keys={shortcuts.redo} />
       </div>
       <div className="flex items-center justify-between">
-        <span className="text-foreground-secondary">Save</span>
+        <span id="common-shortcuts-span-save" className="text-foreground-secondary">Save</span>
         <Kbd keys={shortcuts.save} />
       </div>
       <div className="flex items-center justify-between">
-        <span className="text-foreground-secondary">Find</span>
+        <span id="common-shortcuts-span-find" className="text-foreground-secondary">Find</span>
         <Kbd keys={shortcuts.find} />
       </div>
     </div>
@@ -81,15 +81,15 @@ export const Variants: Story = {
   render: () => (
     <div className="space-y-4">
       <div className="flex items-center gap-4">
-        <span className="text-xs text-foreground-muted w-20">Default</span>
+        <span id="variants-span-default" className="text-xs text-foreground-muted w-20">Default</span>
         <Kbd variant="default" keys={['cmd', 'shift', 'p']} />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-xs text-foreground-muted w-20">Outline</span>
+        <span id="variants-span-outline" className="text-xs text-foreground-muted w-20">Outline</span>
         <Kbd variant="outline" keys={['cmd', 'shift', 'p']} />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-xs text-foreground-muted w-20">Flat</span>
+        <span id="variants-span-flat" className="text-xs text-foreground-muted w-20">Flat</span>
         <Kbd variant="flat" keys={['cmd', 'shift', 'p']} />
       </div>
     </div>
@@ -100,15 +100,15 @@ export const Sizes: Story = {
   render: () => (
     <div className="space-y-4">
       <div className="flex items-center gap-4">
-        <span className="text-xs text-foreground-muted w-20">Small</span>
+        <span id="sizes-span-small" className="text-xs text-foreground-muted w-20">Small</span>
         <Kbd size="sm" keys={['cmd', 'k']} />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-xs text-foreground-muted w-20">Medium</span>
+        <span id="sizes-span-medium" className="text-xs text-foreground-muted w-20">Medium</span>
         <Kbd size="md" keys={['cmd', 'k']} />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-xs text-foreground-muted w-20">Large</span>
+        <span id="sizes-span-large" className="text-xs text-foreground-muted w-20">Large</span>
         <Kbd size="lg" keys={['cmd', 'k']} />
       </div>
     </div>
@@ -118,48 +118,48 @@ export const Sizes: Story = {
 export const KeyMapping: Story = {
   render: () => (
     <div className="space-y-3">
-      <p className="text-xs text-foreground-muted mb-4">
+      <p id="key-mapping-p-common-key-names-are" className="text-xs text-foreground-muted mb-4">
         Common key names are automatically mapped to symbols:
       </p>
       <div className="grid grid-cols-2 gap-4">
         <div className="flex items-center gap-2">
-          <span className="text-foreground-secondary text-sm">cmd</span>
-          <span>→</span>
+          <span id="key-mapping-span-cmd" className="text-foreground-secondary text-sm">cmd</span>
+          <span id="key-mapping-span">→</span>
           <Kbd>cmd</Kbd>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-foreground-secondary text-sm">ctrl</span>
-          <span>→</span>
+          <span id="key-mapping-span-ctrl" className="text-foreground-secondary text-sm">ctrl</span>
+          <span id="key-mapping-span">→</span>
           <Kbd>ctrl</Kbd>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-foreground-secondary text-sm">alt</span>
-          <span>→</span>
+          <span id="key-mapping-span-alt" className="text-foreground-secondary text-sm">alt</span>
+          <span id="key-mapping-span">→</span>
           <Kbd>alt</Kbd>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-foreground-secondary text-sm">shift</span>
-          <span>→</span>
+          <span id="key-mapping-span-shift" className="text-foreground-secondary text-sm">shift</span>
+          <span id="key-mapping-span">→</span>
           <Kbd>shift</Kbd>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-foreground-secondary text-sm">enter</span>
-          <span>→</span>
+          <span id="key-mapping-span-enter" className="text-foreground-secondary text-sm">enter</span>
+          <span id="key-mapping-span">→</span>
           <Kbd>enter</Kbd>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-foreground-secondary text-sm">escape</span>
-          <span>→</span>
+          <span id="key-mapping-span-escape" className="text-foreground-secondary text-sm">escape</span>
+          <span id="key-mapping-span">→</span>
           <Kbd>escape</Kbd>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-foreground-secondary text-sm">backspace</span>
-          <span>→</span>
+          <span id="key-mapping-span-backspace" className="text-foreground-secondary text-sm">backspace</span>
+          <span id="key-mapping-span">→</span>
           <Kbd>backspace</Kbd>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-foreground-secondary text-sm">up</span>
-          <span>→</span>
+          <span id="key-mapping-span-up" className="text-foreground-secondary text-sm">up</span>
+          <span id="key-mapping-span">→</span>
           <Kbd>up</Kbd>
         </div>
       </div>
@@ -194,7 +194,7 @@ export const InContext: Story = {
             key={item.label}
             className="w-full flex items-center justify-between px-3 py-2 text-sm text-foreground hover:bg-secondary-hover"
           >
-            <span>{item.label}</span>
+            <span id="in-context-span-itemlabel">{item.label}</span>
             <Kbd keys={item.keys} size="sm" variant="flat" />
           </button>
         ))}
@@ -224,17 +224,17 @@ 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 justify-between">
-            <span className="text-foreground-secondary text-sm">Save</span>
+            <span id="responsive-matrix-span-save" className="text-foreground-secondary text-sm">Save</span>
             <Kbd keys={['cmd', 's']} size="sm" />
           </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">
           <div className="grid grid-cols-2 gap-4">
             <KeyboardShortcut label="Copy" keys={['cmd', 'c']} />
@@ -246,7 +246,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 items-center gap-8">

package/dist/assets/components/kbd.tsx

@@ -36,12 +36,12 @@ export const Kbd = forwardRef<HTMLElement, KbdProps>(
     if (keys) {
       const keyArray = Array.isArray(keys) ? keys : [keys];
       return (
-        <span className="inline-flex items-center gap-1">
+        <span id="kbd-span" data-sonance-name="kbd" className="inline-flex items-center gap-1">
           {keyArray.map((key, index) => (
             <kbd
               key={index}
               ref={index === 0 ? ref : undefined}
-              className={cn(kbdVariants({ variant, size }), className)}
+              className={cn(kbdVariants({ variant, size }), className)} data-sonance-name="kbd"
               {...props}
             >
               {formatKey(key)}
@@ -54,7 +54,7 @@ export const Kbd = forwardRef<HTMLElement, KbdProps>(
     return (
       <kbd
         ref={ref}
-        className={cn(kbdVariants({ variant, size }), className)}
+        className={cn(kbdVariants({ variant, size }), className)} data-sonance-name="kbd"
         {...props}
       >
         {children}
@@ -103,8 +103,8 @@ interface KeyboardShortcutProps {
 
 export function KeyboardShortcut({ keys, label, className }: KeyboardShortcutProps) {
   return (
-    <span className={cn("inline-flex items-center gap-1.5 sm:gap-2 flex-wrap", className)}>
-      {label && <span className="text-xs sm:text-sm text-foreground-muted">{label}</span>}
+    <span id="keyboard-shortcut-span" data-sonance-name="kbd" className={cn("inline-flex items-center gap-1.5 sm:gap-2 flex-wrap", className)}>
+      {label && <span id="keyboard-shortcut-span-label" className="text-xs sm:text-sm text-foreground-muted">{label}</span>}
       <Kbd keys={keys} />
     </span>
   );

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

@@ -86,9 +86,9 @@ export const ExternalWithoutIcon: Story = {
 export const Sizes: Story = {
   render: () => (
     <div className="flex items-center gap-4">
-      <Link href="#" size="sm">Small</Link>
-      <Link href="#" size="md">Medium</Link>
-      <Link href="#" size="lg">Large</Link>
+      <Link id="sizes-link" href="#" size="sm">Small</Link>
+      <Link id="sizes-link" href="#" size="md">Medium</Link>
+      <Link id="sizes-link" href="#" size="lg">Large</Link>
     </div>
   ),
 };
@@ -97,28 +97,28 @@ export const AllVariants: Story = {
   render: () => (
     <div className="space-y-4">
       <div>
-        <p className="text-xs text-foreground-muted mb-1">Default</p>
-        <Link href="#">Click here to learn more</Link>
+        <p id="all-variants-p-default" className="text-xs text-foreground-muted mb-1">Default</p>
+        <Link id="all-variants-link" href="#">Click here to learn more</Link>
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-1">Primary</p>
-        <Link href="#" variant="primary">View documentation</Link>
+        <p id="all-variants-p-primary" className="text-xs text-foreground-muted mb-1">Primary</p>
+        <Link id="all-variants-link-primary" href="#" variant="primary">View documentation</Link>
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-1">Muted</p>
-        <Link href="#" variant="muted">Terms of service</Link>
+        <p id="all-variants-p-muted" className="text-xs text-foreground-muted mb-1">Muted</p>
+        <Link id="all-variants-link-muted" href="#" variant="muted">Terms of service</Link>
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-1">Subtle</p>
-        <Link href="#" variant="subtle">Privacy policy</Link>
+        <p id="all-variants-p-subtle" className="text-xs text-foreground-muted mb-1">Subtle</p>
+        <Link id="all-variants-link-subtle" href="#" variant="subtle">Privacy policy</Link>
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-1">Nav</p>
-        <Link href="#" variant="nav">Navigation item</Link>
+        <p id="all-variants-p-nav" className="text-xs text-foreground-muted mb-1">Nav</p>
+        <Link id="all-variants-link-nav" href="#" variant="nav">Navigation item</Link>
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-1">External</p>
-        <Link href="https://sonance.com">Visit Sonance</Link>
+        <p id="all-variants-p-external" className="text-xs text-foreground-muted mb-1">External</p>
+        <Link id="all-variants-link" href="https://sonance.com">Visit Sonance</Link>
       </div>
     </div>
   ),
@@ -126,10 +126,10 @@ export const AllVariants: Story = {
 
 export const InParagraph: Story = {
   render: () => (
-    <p className="text-foreground-secondary max-w-md">
+    <p id="in-paragraph-p" className="text-foreground-secondary max-w-md">
       Sonance has been creating premium audio solutions for over 35 years.{' '}
-      <Link href="#">Learn more about our history</Link> or{' '}
-      <Link href="https://sonance.com" variant="primary">visit our website</Link>{' '}
+      <Link id="in-paragraph-link" href="#">Learn more about our history</Link> or{' '}
+      <Link id="in-paragraph-link-primary" href="https://sonance.com" variant="primary">visit our website</Link>{' '}
       for the latest products.
     </p>
   ),
@@ -139,10 +139,10 @@ export const AnchorExample: Story = {
   render: () => (
     <Anchor href="#" className="group">
       <div className="p-4 border border-border hover:border-primary transition-colors">
-        <h3 className="font-medium text-foreground group-hover:text-primary transition-colors">
+        <h3 id="anchor-example-h3-clickable-card" className="font-medium text-foreground group-hover:text-primary transition-colors">
           Clickable Card
         </h3>
-        <p className="text-sm text-foreground-muted">
+        <p id="anchor-example-p-the-anchor-component" className="text-sm text-foreground-muted">
           The Anchor component wraps any element in an unstyled link.
         </p>
       </div>
@@ -156,40 +156,40 @@ 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">
-          <p className="text-foreground-secondary text-sm">
-            Visit <Link href="#">our products</Link> or <Link href="https://sonance.com">sonance.com</Link>.
+          <p id="responsive-matrix-p" className="text-foreground-secondary text-sm">
+            Visit <Link id="responsive-matrix-link" href="#">our products</Link> or <Link id="responsive-matrix-link" href="https://sonance.com">sonance.com</Link>.
           </p>
         </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="flex items-center gap-6">
-            <Link href="#" variant="nav">Home</Link>
-            <Link href="#" variant="nav">Products</Link>
-            <Link href="#" variant="nav">About</Link>
-            <Link href="#" variant="nav">Contact</Link>
+            <Link id="responsive-matrix-link-nav" href="#" variant="nav">Home</Link>
+            <Link id="responsive-matrix-link-nav" href="#" variant="nav">Products</Link>
+            <Link id="responsive-matrix-link-nav" href="#" variant="nav">About</Link>
+            <Link id="responsive-matrix-link-nav" href="#" variant="nav">Contact</Link>
           </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="flex items-center justify-between">
             <div className="flex items-center gap-6">
-              <Link href="#" variant="nav">Home</Link>
-              <Link href="#" variant="nav">Products</Link>
-              <Link href="#" variant="nav">Support</Link>
-              <Link href="#" variant="nav">About</Link>
+              <Link id="responsive-matrix-link-nav" href="#" variant="nav">Home</Link>
+              <Link id="responsive-matrix-link-nav" href="#" variant="nav">Products</Link>
+              <Link id="responsive-matrix-link-nav" href="#" variant="nav">Support</Link>
+              <Link id="responsive-matrix-link-nav" href="#" variant="nav">About</Link>
             </div>
             <div className="flex items-center gap-4">
-              <Link href="#" variant="muted" size="sm">Terms</Link>
-              <Link href="#" variant="muted" size="sm">Privacy</Link>
-              <Link href="https://sonance.com" variant="primary">Visit Sonance</Link>
+              <Link id="responsive-matrix-link-muted" href="#" variant="muted" size="sm">Terms</Link>
+              <Link id="responsive-matrix-link-muted" href="#" variant="muted" size="sm">Privacy</Link>
+              <Link id="responsive-matrix-link-primary" href="https://sonance.com" variant="primary">Visit Sonance</Link>
             </div>
           </div>
         </div>

package/dist/assets/components/link.tsx

@@ -97,6 +97,8 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 
     return (
       <a
+        id="link-a"
+        data-sonance-name="link"
         ref={ref}
         href={href}
         className={cn(
@@ -130,8 +132,10 @@ export const Anchor = forwardRef<
 
   return (
     <a
+      id="anchor-a"
       ref={ref}
       href={href}
+      data-sonance-name="link"
       className={cn("focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus", className)}
       {...(isExternal && {
         target: "_blank",

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

@@ -208,8 +208,8 @@ export const StateMatrix: Story = {
   render: () => {
     const states: ListboxItemState[] = ['default', 'hover', 'focus', 'selected', 'disabled'];
     return (
-      <div className="space-y-6 w-64">
-        <h3 className="text-sm font-medium text-foreground-muted">ListboxItem States</h3>
+      <div data-sonance-name="listbox.stories" className="space-y-6 w-64">
+        <h3 id="state-matrix-h3-listboxitem-states" className="text-sm font-medium text-foreground-muted">ListboxItem States</h3>
         <Listbox>
           {states.map((state) => (
             <ListboxItem key={state} value={state} state={state}>
@@ -228,7 +228,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">
           <Listbox label="Select Speaker" defaultValue="speaker1">
             <ListboxItem value="speaker1">VP66 TL</ListboxItem>
@@ -239,7 +239,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">
             <Listbox label="Product Category" defaultValue="inwall">
@@ -257,7 +257,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">
             <Listbox label="Select Product" defaultValue="vp66">

package/dist/assets/components/listbox.tsx

@@ -129,7 +129,7 @@ export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
     const finalSelected = isSelected || isSelectedState;
 
     return (
-      <li
+      <li data-sonance-name="listbox"
         ref={ref}
         role="option"
         aria-selected={finalSelected}
@@ -147,7 +147,7 @@ export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
         )}
       >
         {startContent && (
-          <span className="shrink-0">{startContent}</span>
+          <span id="listbox-item-span-startcontent" className="shrink-0">{startContent}</span>
         )}
         <div className="flex-1 min-w-0">
           <div className="text-sm font-medium truncate">{children}</div>
@@ -163,7 +163,7 @@ export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
           )}
         </div>
         {endContent && (
-          <span className="shrink-0">{endContent}</span>
+          <span id="listbox-item-span-endcontent" className="shrink-0">{endContent}</span>
         )}
         {finalSelected && !endContent && (
           <Check className="h-4 w-4 shrink-0" />
@@ -184,7 +184,7 @@ interface ListboxSectionProps {
 
 export function ListboxSection({ title, children, className }: ListboxSectionProps) {
   return (
-    <li className={className}>
+    <li data-sonance-name="listbox" className={className}>
       {title && (
         <div className="px-4 py-2 text-xs font-medium uppercase tracking-widest text-foreground-muted bg-background-secondary">
           {title}