sonance-brand-mcp 1.3.1 → 1.3.2

package/dist/assets/components/range-calendar.tsx

@@ -112,8 +112,8 @@ export function RangeCalendar({
     const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
 
     return (
-      <div key={monthDate.toISOString()}>
-        <h3 className="text-sm font-medium text-foreground text-center mb-4">
+      <div data-sonance-name="range-calendar" key={monthDate.toISOString()}>
+        <h3 id="h3-formatmonthdate-mmmm" className="text-sm font-medium text-foreground text-center mb-4">
           {format(monthDate, "MMMM yyyy")}
         </h3>
 
@@ -140,7 +140,7 @@ export function RangeCalendar({
             const isEnd = isRangeEnd(day);
 
             return (
-              <button
+              <button data-sonance-name="range-calendar"
                 key={day.toISOString()}
                 type="button"
                 onClick={() => handleSelectDate(day)}

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

@@ -25,13 +25,13 @@ export const Default: Story = {
     >
       <ResizablePanel defaultSize={50}>
         <div className="flex h-[200px] items-center justify-center p-6">
-          <span className="font-medium text-foreground">One</span>
+          <span id="default-span-one" className="font-medium text-foreground">One</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={50}>
         <div className="flex h-[200px] items-center justify-center p-6">
-          <span className="font-medium text-foreground">Two</span>
+          <span id="default-span-two" className="font-medium text-foreground">Two</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>
@@ -46,13 +46,13 @@ export const Vertical: Story = {
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
-          <span className="font-medium text-foreground">Header</span>
+          <span id="vertical-span-header" className="font-medium text-foreground">Header</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={75}>
         <div className="flex h-full items-center justify-center p-6">
-          <span className="font-medium text-foreground">Content</span>
+          <span id="vertical-span-content" className="font-medium text-foreground">Content</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>
@@ -67,13 +67,13 @@ export const WithHandle: Story = {
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
-          <span className="font-medium text-foreground">Sidebar</span>
+          <span id="with-handle-span-sidebar" className="font-medium text-foreground">Sidebar</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel defaultSize={75}>
         <div className="flex h-full items-center justify-center p-6">
-          <span className="font-medium text-foreground">Content</span>
+          <span id="with-handle-span-content" className="font-medium text-foreground">Content</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>
@@ -88,19 +88,19 @@ export const ThreePanels: Story = {
     >
       <ResizablePanel defaultSize={20} minSize={15}>
         <div className="flex h-full items-center justify-center p-4">
-          <span className="text-sm font-medium text-foreground">Nav</span>
+          <span id="three-panels-span-nav" className="text-sm font-medium text-foreground">Nav</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel defaultSize={60}>
         <div className="flex h-full items-center justify-center p-4">
-          <span className="font-medium text-foreground">Main Content</span>
+          <span id="three-panels-span-main-content" className="font-medium text-foreground">Main Content</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel defaultSize={20} minSize={15}>
         <div className="flex h-full items-center justify-center p-4">
-          <span className="text-sm font-medium text-foreground">Panel</span>
+          <span id="three-panels-span-panel" className="text-sm font-medium text-foreground">Panel</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>
@@ -115,7 +115,7 @@ export const NestedPanels: Story = {
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
-          <span className="font-medium text-foreground">Sidebar</span>
+          <span id="nested-panels-span-sidebar" className="font-medium text-foreground">Sidebar</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
@@ -123,13 +123,13 @@ export const NestedPanels: Story = {
         <ResizablePanelGroup direction="vertical">
           <ResizablePanel defaultSize={50}>
             <div className="flex h-full items-center justify-center p-6">
-              <span className="font-medium text-foreground">Top Panel</span>
+              <span id="nested-panels-span-top-panel" className="font-medium text-foreground">Top Panel</span>
             </div>
           </ResizablePanel>
           <ResizableHandle />
           <ResizablePanel defaultSize={50}>
             <div className="flex h-full items-center justify-center p-6">
-              <span className="font-medium text-foreground">Bottom Panel</span>
+              <span id="nested-panels-span-bottom-panel" className="font-medium text-foreground">Bottom Panel</span>
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
@@ -146,14 +146,14 @@ export const IDELayout: Story = {
     >
       <ResizablePanel defaultSize={20} minSize={10}>
         <div className="flex h-full flex-col bg-background p-2">
-          <p className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
+          <p id="i-d-e-layout-p-explorer" className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
             Explorer
           </p>
           <div className="space-y-1 text-sm text-foreground-secondary">
-            <p>📁 src</p>
-            <p className="pl-4">📁 components</p>
-            <p className="pl-4">📁 lib</p>
-            <p>📄 package.json</p>
+            <p id="i-d-e-layout-p--src">📁 src</p>
+            <p id="i-d-e-layout-p--components" className="pl-4">📁 components</p>
+            <p id="i-d-e-layout-p--lib" className="pl-4">📁 lib</p>
+            <p id="i-d-e-layout-p--packagejson">📄 package.json</p>
           </div>
         </div>
       </ResizablePanel>
@@ -162,13 +162,13 @@ export const IDELayout: Story = {
         <ResizablePanelGroup direction="vertical">
           <ResizablePanel defaultSize={70}>
             <div className="flex h-full items-center justify-center bg-card p-6">
-              <span className="font-medium text-foreground">Editor</span>
+              <span id="i-d-e-layout-span-editor" className="font-medium text-foreground">Editor</span>
             </div>
           </ResizablePanel>
           <ResizableHandle />
           <ResizablePanel defaultSize={30} minSize={15}>
             <div className="flex h-full flex-col bg-background p-2">
-              <p className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
+              <p id="i-d-e-layout-p-terminal" className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
                 Terminal
               </p>
               <code className="text-sm text-foreground-secondary">
@@ -181,13 +181,13 @@ export const IDELayout: Story = {
       <ResizableHandle withHandle />
       <ResizablePanel defaultSize={20} minSize={10}>
         <div className="flex h-full flex-col bg-background p-2">
-          <p className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
+          <p id="i-d-e-layout-p-outline" className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
             Outline
           </p>
           <div className="space-y-1 text-sm text-foreground-secondary">
-            <p>• function Button</p>
-            <p>• function Card</p>
-            <p>• function Dialog</p>
+            <p id="button-p--function-button">• function Button</p>
+            <p id="card-p--function-card">• function Card</p>
+            <p id="dialog-p--function-dialog">• function Dialog</p>
           </div>
         </div>
       </ResizablePanel>

package/dist/assets/components/resizable.tsx

@@ -8,7 +8,7 @@ const ResizablePanelGroup = ({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
+  <ResizablePrimitive.PanelGroup data-sonance-name="resizable"
     className={cn(
       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
       className

package/dist/assets/components/scroll-area.stories.tsx

@@ -22,7 +22,7 @@ export const Default: Story = {
   render: () => (
     <ScrollArea className="h-72 w-48 rounded-sm border border-border">
       <div className="p-4">
-        <h4 className="mb-4 text-sm font-medium leading-none text-foreground">Tags</h4>
+        <h4 id="default-h4-tags" className="mb-4 text-sm font-medium leading-none text-foreground">Tags</h4>
         {tags.map((tag) => (
           <div key={tag}>
             <div className="text-sm text-foreground-secondary">{tag}</div>
@@ -65,12 +65,12 @@ export const Horizontal: Story = {
           <figure key={artwork.artist} className="shrink-0">
             <div className="overflow-hidden rounded-sm">
               <div className="h-[150px] w-[200px] bg-secondary-hover flex items-center justify-center">
-                <span className="text-foreground-muted text-xs">{artwork.art}</span>
+                <span id="horizontal-span-artworkart" className="text-foreground-muted text-xs">{artwork.art}</span>
               </div>
             </div>
             <figcaption className="pt-2 text-xs text-foreground-muted">
               Photo by{" "}
-              <span className="font-medium text-foreground">
+              <span id="horizontal-span-artworkartist" className="font-medium text-foreground">
                 {artwork.artist}
               </span>
             </figcaption>
@@ -86,33 +86,33 @@ export const LargeContent: Story = {
   render: () => (
     <ScrollArea className="h-[400px] w-[350px] rounded-sm border border-border p-4">
       <div className="space-y-4">
-        <h4 className="text-lg font-medium text-foreground">Sonance Brand Guidelines</h4>
-        <p className="text-sm text-foreground-secondary leading-relaxed">
+        <h4 id="large-content-h4-sonance-brand-guidel" className="text-lg font-medium text-foreground">Sonance Brand Guidelines</h4>
+        <p id="large-content-p-welcome-to-the-sonan" className="text-sm text-foreground-secondary leading-relaxed">
           Welcome to the Sonance Brand Guidelines. This document outlines the visual 
           identity and design standards for the Sonance family of brands.
         </p>
-        <h5 className="text-sm font-medium text-foreground mt-6">Typography</h5>
-        <p className="text-sm text-foreground-secondary leading-relaxed">
+        <h5 id="large-content-h5-typography" className="text-sm font-medium text-foreground mt-6">Typography</h5>
+        <p id="large-content-p-all-text-should-use-" className="text-sm text-foreground-secondary leading-relaxed">
           All text should use the Montserrat font family. Headlines use font-weight 300 
           (Light) or 500 (Medium), while body text uses 400 (Regular).
         </p>
-        <h5 className="text-sm font-medium text-foreground mt-6">Colors</h5>
-        <p className="text-sm text-foreground-secondary leading-relaxed">
+        <h5 id="large-content-h5-colors" className="text-sm font-medium text-foreground mt-6">Colors</h5>
+        <p id="large-content-p-the-sonance-brand-us" className="text-sm text-foreground-secondary leading-relaxed">
           The Sonance brand uses a sophisticated palette centered around Charcoal 
           (#333F48) as the primary color, with Sonance Blue (#00D3C8) as the accent.
         </p>
-        <h5 className="text-sm font-medium text-foreground mt-6">Logo Usage</h5>
-        <p className="text-sm text-foreground-secondary leading-relaxed">
+        <h5 id="large-content-h5-logo-usage" className="text-sm font-medium text-foreground mt-6">Logo Usage</h5>
+        <p id="large-content-p-the-sonance-logo-sho" className="text-sm text-foreground-secondary leading-relaxed">
           The Sonance logo should always have adequate clear space and never be 
           stretched, rotated, or modified in any way.
         </p>
-        <h5 className="text-sm font-medium text-foreground mt-6">Photography</h5>
-        <p className="text-sm text-foreground-secondary leading-relaxed">
+        <h5 id="large-content-h5-photography" className="text-sm font-medium text-foreground mt-6">Photography</h5>
+        <p id="large-content-p-use-photorealistic-i" className="text-sm text-foreground-secondary leading-relaxed">
           Use photo-realistic imagery only. Avoid cartoons, illustrations, or 
           AI-generated images that don&apos;t meet our quality standards.
         </p>
-        <h5 className="text-sm font-medium text-foreground mt-6">Design Principles</h5>
-        <p className="text-sm text-foreground-secondary leading-relaxed">
+        <h5 id="large-content-h5-design-principles" className="text-sm font-medium text-foreground mt-6">Design Principles</h5>
+        <p id="large-content-p-embrace-generous-whi" className="text-sm text-foreground-secondary leading-relaxed">
           Embrace generous whitespace, minimal borders, refined shadows, and clean 
           backgrounds. Every element should feel premium and intentional.
         </p>

package/dist/assets/components/scroll-area.tsx

@@ -8,7 +8,7 @@ const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
+  <ScrollAreaPrimitive.Root data-sonance-name="scroll-area"
     ref={ref}
     className={cn("relative overflow-hidden", className)}
     {...props}

package/dist/assets/components/scroll-shadow.stories.tsx

@@ -41,8 +41,8 @@ type Story = StoryObj<typeof meta>;
 
 const sampleContent = Array.from({ length: 20 }, (_, i) => (
   <div key={i} className="p-4 border-b border-border">
-    <h4 className="font-medium">Item {i + 1}</h4>
-    <p className="text-sm text-foreground-muted">
+    <h4 id="h4-item-i-1" className="font-medium">Item {i + 1}</h4>
+    <p id="p-this-is-sample-conte" className="text-sm text-foreground-muted">
       This is sample content for item {i + 1}. Scroll to see the shadow effect.
     </p>
   </div>
@@ -53,8 +53,8 @@ const horizontalItems = Array.from({ length: 15 }, (_, i) => (
     key={i}
     className="flex-shrink-0 w-48 h-32 p-4 border border-border rounded-sm bg-card"
   >
-    <h4 className="font-medium">Card {i + 1}</h4>
-    <p className="text-sm text-foreground-muted">Scroll horizontally</p>
+    <h4 id="h4-card-i-1" className="font-medium">Card {i + 1}</h4>
+    <p id="p-scroll-horizontally" className="text-sm text-foreground-muted">Scroll horizontally</p>
   </div>
 ));
 
@@ -141,7 +141,7 @@ export const LargeShadow: Story = {
 export const HiddenScrollbar: Story = {
   render: () => (
     <div className="space-y-4">
-      <p className="text-sm text-foreground-muted">
+      <p id="hidden-scrollbar-p-scrollbar-is-hidden-" className="text-sm text-foreground-muted">
         Scrollbar is hidden but scrolling still works
       </p>
       <ScrollShadow
@@ -171,19 +171,19 @@ export const ProductListExample: Story = {
     ];
 
     return (
-      <div className="w-80 border border-border rounded-sm">
+      <div data-sonance-name="scroll-shadow.stories" className="w-80 border border-border rounded-sm">
         <div className="p-4 border-b border-border">
-          <h3 className="font-medium">Products ({products.length})</h3>
+          <h3 id="product-list-example-h3-products-productslen" className="font-medium">Products ({products.length})</h3>
         </div>
         <ScrollShadow className="h-64">
           {products.map((product, i) => (
             <div key={i} className="p-4 border-b border-border hover:bg-secondary-hover transition-colors cursor-pointer">
               <div className="flex justify-between items-start">
                 <div>
-                  <h4 className="font-medium text-sm">{product.name}</h4>
-                  <p className="text-xs text-foreground-muted">{product.category}</p>
+                  <h4 id="product-list-example-h4-productname" className="font-medium text-sm">{product.name}</h4>
+                  <p id="product-list-example-p-productcategory" className="text-xs text-foreground-muted">{product.category}</p>
                 </div>
-                <span className="font-medium">{product.price}</span>
+                <span id="product-list-example-span-productprice" className="font-medium">{product.price}</span>
               </div>
             </div>
           ))}
@@ -203,7 +203,7 @@ export const ImageGalleryExample: Story = {
 
     return (
       <div className="space-y-2">
-        <h3 className="font-medium">Gallery</h3>
+        <h3 id="image-gallery-example-h3-gallery" className="font-medium">Gallery</h3>
         <ScrollShadow
           orientation="horizontal"
           hideScrollbar
@@ -265,19 +265,19 @@ export const AllSizesComparison: Story = {
   render: () => (
     <div className="flex gap-8">
       <div className="space-y-2">
-        <p className="text-sm font-medium">Small</p>
+        <p id="all-sizes-comparison-p-small" className="text-sm font-medium">Small</p>
         <ScrollShadow size="sm" className="h-48 w-64 border border-border rounded-sm">
           {sampleContent.slice(0, 10)}
         </ScrollShadow>
       </div>
       <div className="space-y-2">
-        <p className="text-sm font-medium">Medium</p>
+        <p id="all-sizes-comparison-p-medium" className="text-sm font-medium">Medium</p>
         <ScrollShadow size="md" className="h-48 w-64 border border-border rounded-sm">
           {sampleContent.slice(0, 10)}
         </ScrollShadow>
       </div>
       <div className="space-y-2">
-        <p className="text-sm font-medium">Large</p>
+        <p id="all-sizes-comparison-p-large" className="text-sm font-medium">Large</p>
         <ScrollShadow size="lg" className="h-48 w-64 border border-border rounded-sm">
           {sampleContent.slice(0, 10)}
         </ScrollShadow>
@@ -292,7 +292,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">
           <ScrollShadow className="h-48 border border-border rounded-sm">
             {sampleContent.slice(0, 8)}
@@ -301,7 +301,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">
           <ScrollShadow
             orientation="horizontal"
@@ -315,7 +315,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">
             <ScrollShadow size="sm" className="h-48 border border-border rounded-sm">

package/dist/assets/components/scroll-shadow.tsx

@@ -92,9 +92,9 @@ export function ScrollShadow({
   const isHorizontal = orientation === "horizontal" || orientation === "both";
 
   return (
-    <div className={cn("relative", className)} style={style}>
+    <div data-sonance-name="scroll-shadow" className={cn("relative", className)} style={style}>
       {/* Start shadow (top/left) */}
-      <div
+      <div data-sonance-name="scroll-shadow"
         className={cn(
           "pointer-events-none absolute z-10 transition-opacity duration-200",
           isVertical && "inset-x-0 top-0",

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

@@ -101,11 +101,11 @@ export const WithDisabledOption: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="space-y-6 w-72">
-      <Select options={defaultOptions} placeholder="Default select" />
-      <Select options={countryOptions} label="With Label" placeholder="Select..." />
-      <Select options={countryOptions} label="With Value" defaultValue="uk" />
-      <Select options={countryOptions} label="With Error" error="Required field" />
-      <Select options={countryOptions} label="Disabled" defaultValue="us" disabled />
+      <Select id="all-states-select-default-select" options={defaultOptions} placeholder="Default select" />
+      <Select id="all-states-select" options={countryOptions} label="With Label" placeholder="Select..." />
+      <Select id="all-states-select" options={countryOptions} label="With Value" defaultValue="uk" />
+      <Select id="all-states-select" options={countryOptions} label="With Error" error="Required field" />
+      <Select id="all-states-select" options={countryOptions} label="Disabled" defaultValue="us" disabled />
     </div>
   ),
 };
@@ -132,13 +132,14 @@ export const StateMatrix: Story = {
   render: () => {
     const states: SelectState[] = ['default', 'hover', 'focus', 'open', 'error', 'disabled'];
     return (
-      <div className="space-y-6 w-80">
-        <h3 className="text-sm font-medium text-foreground-muted">Select States</h3>
+      <div data-sonance-name="select.stories" className="space-y-6 w-80">
+        <h3 id="state-matrix-h3-select-states" className="text-sm font-medium text-foreground-muted">Select 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>
               <Select
+                id="state-matrix-select-select-option"
                 state={state}
                 options={defaultOptions}
                 placeholder="Select option"
@@ -159,31 +160,31 @@ 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">
-          <Select options={countryOptions} label="Country" placeholder="Select..." />
-          <Select options={defaultOptions} label="Option" placeholder="Choose..." />
+          <Select id="responsive-matrix-select" options={countryOptions} label="Country" placeholder="Select..." />
+          <Select id="responsive-matrix-select-choose" options={defaultOptions} label="Option" placeholder="Choose..." />
         </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">
-            <Select options={countryOptions} label="Country" placeholder="Select country..." />
-            <Select options={defaultOptions} label="Category" placeholder="Select category..." />
+            <Select id="responsive-matrix-select-select-country" options={countryOptions} label="Country" placeholder="Select country..." />
+            <Select id="responsive-matrix-select-select-category" options={defaultOptions} label="Category" placeholder="Select category..." />
           </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">
-            <Select options={countryOptions} label="Country" defaultValue="us" />
-            <Select options={defaultOptions} label="Default" placeholder="Select..." />
-            <Select options={countryOptions} label="With Error" error="Required" />
-            <Select options={countryOptions} label="Disabled" defaultValue="uk" disabled />
+            <Select id="responsive-matrix-select" options={countryOptions} label="Country" defaultValue="us" />
+            <Select id="responsive-matrix-select" options={defaultOptions} label="Default" placeholder="Select..." />
+            <Select id="responsive-matrix-select" options={countryOptions} label="With Error" error="Required" />
+            <Select id="responsive-matrix-select" options={countryOptions} label="Disabled" defaultValue="uk" disabled />
           </div>
         </div>
       </div>

package/dist/assets/components/select.tsx

@@ -39,6 +39,8 @@ interface SelectProps {
   className?: string;
   /** Visual state for Storybook/Figma documentation */
   state?: SelectState;
+  /** Style for the select button */
+  style?: React.CSSProperties;
 }
 
 export function Select({
@@ -52,6 +54,7 @@ export function Select({
   disabled = false,
   className,
   state,
+  style,
 }: SelectProps) {
   const isDisabled = disabled || state === "disabled";
   const hasError = error || state === "error";
@@ -94,7 +97,7 @@ export function Select({
   }, []);
 
   return (
-    <div className={cn("w-full", className)} ref={containerRef}>
+    <div data-sonance-name="select" className={cn("w-full", className)} ref={containerRef}>
       {label && (
         <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
           {label}
@@ -105,6 +108,7 @@ export function Select({
           type="button"
           onClick={() => !isDisabled && setIsOpen(!isOpen)}
           disabled={isDisabled}
+          style={style}
           className={cn(
             "flex w-full items-center justify-between border border-input-border bg-input px-4 py-3",
             "text-left text-foreground transition-colors duration-200",
@@ -115,7 +119,7 @@ export function Select({
             getStateStyles(state)
           )}
         >
-          <span className={cn(!selectedOption && "text-input-placeholder")}>
+          <span id="span-selectedoptionlabel-" className={cn(!selectedOption && "text-input-placeholder")}>
             {selectedOption?.label || placeholder}
           </span>
           <ChevronDown
@@ -155,7 +159,7 @@ export function Select({
           </div>
         )}
       </div>
-      {error && <p className="mt-1 text-sm text-error">{error}</p>}
+      {error && <p id="p-error" className="mt-1 text-sm text-error">{error}</p>}
     </div>
   );
 }
@@ -191,7 +195,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     const hasError = error || state === "error";
 
     return (
-      <div className="w-full">
+      <div data-sonance-name="select" className="w-full">
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -209,7 +213,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               hasError && "border-error",
               getNativeSelectStateStyles(state),
               className
-            )}
+            )} data-sonance-name="select"
             {...props}
           >
             {options.map((option) => (
@@ -220,7 +224,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           </select>
           <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground-muted" />
         </div>
-        {error && <p className="mt-1 text-sm text-error">{error}</p>}
+        {error && <p id="native-select-p-error" className="mt-1 text-sm text-error">{error}</p>}
       </div>
     );
   }

package/dist/assets/components/separator.tsx

@@ -13,7 +13,7 @@ const Separator = React.forwardRef<
     { className, orientation = "horizontal", decorative = true, ...props },
     ref
   ) => (
-    <SeparatorPrimitive.Root
+    <SeparatorPrimitive.Root data-sonance-name="separator"
       ref={ref}
       decorative={decorative}
       orientation={orientation}

package/dist/assets/components/sheet.tsx

@@ -67,7 +67,7 @@ const SheetContent = React.forwardRef<
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+        <span id="sheet-content-span-close" className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
@@ -78,11 +78,7 @@ const SheetHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+  <div data-sonance-name="sheet"
     {...props}
   />
 )
@@ -96,7 +92,7 @@ const SheetFooter = ({
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       className
-    )}
+    )} data-sonance-name="sheet"
     {...props}
   />
 )