chore: promote develop to main (#2)

Author: dorixdev

.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<link
+	rel="stylesheet"
+	href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
+/>
+<link
+	rel="stylesheet"
+	href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
+/>

.storybook/preview.ts

@@ -2,15 +2,9 @@ import type { Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
 	parameters: {
-		actions: {
-			argTypesRegex: '^on[A-Z].*'
-		},
-		controls: {
-			matchers: {
-				color: /(background|color)$/i,
-				date: /Date$/i
-			}
-		}
+		chromatic: { pauseAnimationAtEnd: true, delay: 400 },
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } }
 	},
 	tags: ['autodocs']
 };

lib/components/DualScrollSync/DualScrollSync.module.scss

@@ -12,13 +12,6 @@
 		--dual-scroll-sync-highlight-background-color,
 		#{$highlight-background-color}
 	);
-
-	* {
-		box-sizing: border-box;
-		margin: 0;
-		padding: 0;
-		border: none;
-	}
 }
 
 .scrollSyncNav {
@@ -41,6 +34,7 @@
 	height: calc(100% / var(--menu-nav-visible-count));
 	min-height: 56px;
 	padding: var(--dual-scroll-sync-space-m, #{$space-m}) var(--dual-scroll-sync-space-s, #{$space-s});
+	border: none;
 	border-bottom: 1px solid var(--dual-scroll-sync-border-color, #{$border-color});
 
 	text-align: left;
@@ -71,8 +65,11 @@
 .scrollSyncNavItemLabel {
 	display: flex;
 	align-items: center;
+
 	height: 100%;
 	padding: 0 var(--dual-scroll-sync-space-m, #{$space-m});
+
+	font-size: smaller;
 }
 
 .scrollSyncContentSectionLabel {
@@ -81,11 +78,11 @@
 }
 
 .scrollSyncNavItemActive {
-	background-color: var(--dual-scroll-sync-highlight-color, #{$highlight-background-color});
+	background-color: var(--dual-scroll-sync-background-color, #{$highlight-background-color});
 
 	span {
 		border-left: 3px solid
-			var(--dual-scroll-sync-highlight-background-color, #{$highlight-foreground-color});
+			var(--dual-scroll-sync-highlight-foreground-color, #{$highlight-foreground-color});
 		font-weight: bold;
 		color: var(--dual-scroll-sync-highlight-foreground-color, #{$highlight-foreground-color});
 	}

lib/components/DualScrollSync/DualScrollSync.stories.tsx

@@ -9,17 +9,17 @@ export type DualScrollSyncItem = PropsWithChildren<DualScrollSyncBaseProps>;
 
 export type DualScrollSyncProps = {
 	/**
-	 * Unique identifier for the DualScrollSync component.
+	 * Unique identifier for the DualScrollSync component. (Optional)
 	 * @default 'dual-scroll-sync'
 	 */
 	id?: string;
 	/**
-	 * Array of `ScrollSyncItem` objects.
+	 * Array of `DualScrollSyncItem` objects.
 	 * @default []
 	 */
 	items: DualScrollSyncItem[];
 	/**
-	 * Maximum visible items in the navigation menu. If the number of items exceeds this value, scrolling is activated.
+	 * Maximum visible items in the navigation menu. If the number of items exceeds this value, scrolling is activated. (Optional)
 	 * @default 6
 	 */
 	maxVisibleItems?: number;

lib/components/DualScrollSync/DualScrollSync.types.ts

@@ -19,27 +19,30 @@ import {
 
 **DualScrollSync** is a UI component that synchronizes a vertical navigation menu with scrollable content panels, ideal for advanced catalogs or complex filters.
 
-### 📦 Import
-
-```tsx
-import { DualScrollSync } from '@dorixdev/scroll-sync';
-```
-
-### 💡 Features
+## 💡 Features
 
 - Synchronizes the active state between navigation menu and visible content.
 - Enables smooth scrolling between sections.
 - Highlights the active menu item for better user orientation.
 
-### 🔧 Props
+## 📦 Import
+
+```tsx
+import { DualScrollSync } from '@dorixdev/react-dual-scroll-sync';
+
+// Add styles once in your app
+import '@dorixdev/react-dual-scroll-sync/styles.css';
+```
+
+## 🔧 Props
 
 <ArgTypes of={DualScrollSyncStories.Default} />
 
-### 🧩 Events & Callbacks
+## 🧩 Events & Callbacks
 
 `onItemClick`: Callback triggered when a menu item is clicked, receiving the active section key as an argument. This can be used for analytics or other side effects.
 
-### 🎨 Styling & Customization
+## 🎨 Styling & Customization
 
 You can customize the styles by overriding the CSS variables defined in the package. Here’s an example of how to do that in your CSS file:
 
@@ -58,7 +61,7 @@ You can customize the styles by overriding the CSS variables defined in the pack
 }
 ```
 
-### ⚙️ Best Practices & Limitations
+## ⚙️ Best Practices & Limitations
 
 - Use `sectionKey` to uniquely identify each section for proper synchronization.
 - Designed for responsive mobile-first layouts but adaptable to any size.