fix(phase-10): correct wrap boundary behavior and prep 2.1.2 (#166)

* chore(vscode): associate CSS files with Tailwind CSS language mode

* style(docs): add brand color tokens and update header logo styling

* fix(phase-10): correct wrap boundary behavior and prep 2.1.2

Author: pedropalau

.vscode/settings.json

@@ -28,4 +28,7 @@
     "[json]": {
         "editor.defaultFormatter": "vscode.json-language-features"
     },
+    "files.associations": {
+        "*.css": "tailwindcss"
+    }
 }

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 2.1.2
+
+### Patch Changes
+
+- Fix `wrap` boundary navigation semantics so:
+
+  - `wrap={false}` stops at the first/last photo.
+  - `wrap={true}` loops across boundaries as documented.
+
+  Also adds behavior tests for keyboard navigation at boundaries and control visibility in both wrap modes.
+
 ## 2.1.0
 
 ### Minor Changes

MODERNIZATION_PLAN_v2.md

@@ -488,7 +488,7 @@ Add decisions here as we align each phase:
 - [#37](https://github.com/pedropalau/react-bnb-gallery/issues/37): add explicit image alt fields (for example `alt` and `thumbnailAlt`) while keeping `caption` as the default fallback for backward compatibility.
   - Target scope: upcoming `v2.x.x` patch/minor delivery after `2.1.0` release execution.
 - [#42](https://github.com/pedropalau/react-bnb-gallery/issues/42): fix `wrap` boundary behavior so runtime navigation semantics match documented expectations.
-  - Target scope: upcoming `v2.x.x` patch/minor delivery after `2.1.0` release execution.
+  - Status: delivered in `2.1.2` (2026-02-26).
 - [#43](https://github.com/pedropalau/react-bnb-gallery/pull/43) concept: support `ReactNode` values for `caption` and `subcaption`.
   - Target scope: upcoming `v2.x.x` patch/minor delivery after `2.1.0` release execution.
   - Delivery note: reimplement with current architecture/types/tests/docs; do not revive legacy PR code directly.

docs/app/styles.css

@@ -8,6 +8,8 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+	--brand: oklch(0.5769 0.2277 18.5);
+	--brand-foreground: oklch(1 0 0);
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.145 0 0);
 	--card: oklch(1 0 0);
@@ -43,6 +45,8 @@
 }
 
 .dark {
+	--brand: oklch(0.5769 0.2277 18.5);
+	--brand-foreground: oklch(1 0 0);
 	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
 	--card: oklch(0.205 0 0);
@@ -83,6 +87,8 @@
 	--breakpoint-3xl: 1600px;
 	--breakpoint-4xl: 2000px;
 
+	--color-brand: var(--brand);
+	--color-brand-foreground: var(--brand-foreground);
 	--color-sidebar-ring: var(--sidebar-ring);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

docs/components/logo.tsx

@@ -7,21 +7,17 @@ export function Logo({
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
-			className={cn('w-8 h-auto fill-primary', className)}
+			className={cn('w-7 h-auto fill-current', className)}
 			fill="none"
 			viewBox="0 0 180 98"
 			{...rest}
 		>
 			<path
-				fill="#000"
 				fillRule="evenodd"
 				d="M89.683 0c9.83 0 17.534-.004 23.538.454 5.79.442 10.72 1.348 14.852 3.576l.397.221c4.595 2.607 7.056 6.296 8.164 10.974.843 3.555.92 7.845.926 12.447v42.203c-.006 4.601-.083 8.892-.926 12.447-1.108 4.678-3.569 8.366-8.164 10.974-4.212 2.39-9.272 3.34-15.249 3.797-6.004.458-13.708.454-23.538.454s-17.535.004-23.539-.454c-5.977-.456-11.036-1.407-15.248-3.796l-.001-.001C46.3 90.688 43.84 87 42.732 82.322c-.843-3.555-.92-7.846-.927-12.447V27.672c.006-4.602.084-8.892.927-12.447C43.84 10.547 46.3 6.858 50.896 4.25 55.108 1.861 60.167.91 66.144.454 72.148-.004 79.853 0 89.683 0m0 11.547c-10.017 0-17.2.003-22.661.42-5.488.418-8.475 1.217-10.429 2.326-1.57.89-2.193 1.767-2.626 3.594-.578 2.441-.615 5.865-.615 11.775v38.223c0 5.91.037 9.333.615 11.774.433 1.827 1.056 2.704 2.626 3.595l.38.204c1.958 1.003 4.904 1.73 10.049 2.122 5.461.417 12.644.42 22.661.42s17.199-.003 22.66-.42c5.488-.418 8.474-1.217 10.429-2.326 1.57-.891 2.194-1.767 2.627-3.594.578-2.441.615-5.865.615-11.775V29.662c0-5.91-.037-9.334-.615-11.775-.433-1.827-1.057-2.703-2.627-3.594-1.955-1.109-4.941-1.908-10.429-2.326-5.461-.417-12.643-.42-22.66-.42"
 				clipRule="evenodd"
 			/>
-			<path
-				fill="#000"
-				d="M.035 24.257A5.774 5.774 0 0 1 6.4 19.144c4.924.538 9.22 1.547 12.895 3.705 4.583 2.69 6.982 6.46 8.062 11.173.827 3.61.905 7.976.911 12.704v4.094c-.006 4.728-.084 9.093-.911 12.704-1.046 4.566-3.331 8.245-7.639 10.916l-.423.256c-3.675 2.158-7.97 3.167-12.895 3.704a5.774 5.774 0 0 1-1.254-11.477c3.958-.432 6.347-1.125 7.986-2.006l.319-.179c1.54-.904 2.2-1.823 2.65-3.792.586-2.554.621-6.12.621-12.173 0-6.055-.035-9.62-.62-12.174-.451-1.969-1.112-2.889-2.651-3.792-1.647-.967-4.083-1.723-8.305-2.184a5.774 5.774 0 0 1-5.112-6.366M172.971 19.145a5.774 5.774 0 0 1 1.253 11.478c-4.221.46-6.657 1.217-8.304 2.184-1.539.903-2.201 1.823-2.652 3.792-.585 2.554-.619 6.119-.619 12.174s.034 9.618.619 12.173c.451 1.969 1.112 2.889 2.65 3.792 1.647.967 4.084 1.724 8.306 2.185a5.773 5.773 0 0 1-1.253 11.477c-4.925-.537-9.22-1.547-12.895-3.704-4.582-2.69-6.983-6.459-8.063-11.172-.827-3.61-.905-7.976-.911-12.704v-4.094c.006-4.728.084-9.093.911-12.704 1.08-4.713 3.48-8.483 8.062-11.172l.001-.001c3.675-2.157 7.97-3.167 12.895-3.704"
-			/>
+			<path d="M.035 24.257A5.774 5.774 0 0 1 6.4 19.144c4.924.538 9.22 1.547 12.895 3.705 4.583 2.69 6.982 6.46 8.062 11.173.827 3.61.905 7.976.911 12.704v4.094c-.006 4.728-.084 9.093-.911 12.704-1.046 4.566-3.331 8.245-7.639 10.916l-.423.256c-3.675 2.158-7.97 3.167-12.895 3.704a5.774 5.774 0 0 1-1.254-11.477c3.958-.432 6.347-1.125 7.986-2.006l.319-.179c1.54-.904 2.2-1.823 2.65-3.792.586-2.554.621-6.12.621-12.173 0-6.055-.035-9.62-.62-12.174-.451-1.969-1.112-2.889-2.651-3.792-1.647-.967-4.083-1.723-8.305-2.184a5.774 5.774 0 0 1-5.112-6.366M172.971 19.145a5.774 5.774 0 0 1 1.253 11.478c-4.221.46-6.657 1.217-8.304 2.184-1.539.903-2.201 1.823-2.652 3.792-.585 2.554-.619 6.119-.619 12.174s.034 9.618.619 12.173c.451 1.969 1.112 2.889 2.65 3.792 1.647.967 4.084 1.724 8.306 2.185a5.773 5.773 0 0 1-1.253 11.477c-4.925-.537-9.22-1.547-12.895-3.704-4.582-2.69-6.983-6.459-8.063-11.172-.827-3.61-.905-7.976-.911-12.704v-4.094c.006-4.728.084-9.093.911-12.704 1.08-4.713 3.48-8.483 8.062-11.172l.001-.001c3.675-2.157 7.97-3.167 12.895-3.704" />
 		</svg>
 	);
 }

docs/components/site-header.tsx

@@ -24,7 +24,7 @@ export function SiteHeader({
 					<div className="flex items-center">
 						<Link
 							href="/"
-							className="inline-flex items-center justify-center hover:bg-accent w-12 h-10 rounded-md"
+							className="inline-flex items-center justify-center hover:text-brand size-10"
 						>
 							<Logo />
 						</Link>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bnb-gallery",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Accessible React lightbox and photo gallery component inspired by Airbnb’s image gallery.",
   "author": "Pedro Palau <palauisaac@gmail.com>",
   "homepage": "https://bnb-gallery.vercel.app",

src/components/gallery.tsx

@@ -71,14 +71,14 @@ function getNormalizedActivePhotoIndex(
 }
 
 /**
- * Computes control visibility when wrap mode is enabled.
+ * Computes control visibility based on boundary and wrap mode.
  */
 function getWrapControlState(
 	activePhotoIndex: number,
 	totalPhotos: number,
 	wrap: boolean,
 ) {
-	if (!wrap || totalPhotos <= 1) {
+	if (wrap || totalPhotos <= 1) {
 		return {
 			hidePrevButton: false,
 			hideNextButton: false,
@@ -178,7 +178,7 @@ const Gallery = forwardRef<GalleryController, GalleryProps>(function Gallery(
 				(isPrevDirection && activeIndex === 0) ||
 				(isNextDirection && activeIndex === lastItemIndex);
 
-			if (isGoingToWrap && wrap) {
+			if (isGoingToWrap && !wrap) {
 				return activeIndex;
 			}
 

tests/components/Gallery.test.js

@@ -52,7 +52,7 @@ describe('Gallery', () => {
 			).toBeInTheDocument();
 		});
 
-		it('syncs wrap controls when activePhotoIndex prop changes', () => {
+		it('keeps both controls visible when wrap is enabled', () => {
 			const photoList = photos.slice(0, 2);
 			const { container, rerender } = render(
 				<Gallery
@@ -65,7 +65,7 @@ describe('Gallery', () => {
 
 			expect(
 				container.querySelector('.gallery-control--prev'),
-			).not.toBeInTheDocument();
+			).toBeInTheDocument();
 			expect(
 				container.querySelector('.gallery-control--next'),
 			).toBeInTheDocument();
@@ -79,6 +79,41 @@ describe('Gallery', () => {
 				/>,
 			);
 
+			expect(
+				container.querySelector('.gallery-control--prev'),
+			).toBeInTheDocument();
+			expect(
+				container.querySelector('.gallery-control--next'),
+			).toBeInTheDocument();
+		});
+
+		it('hides boundary controls when wrap is disabled', () => {
+			const photoList = photos.slice(0, 2);
+			const { container, rerender } = render(
+				<Gallery
+					photos={photoList}
+					showThumbnails={false}
+					wrap={false}
+					activePhotoIndex={0}
+				/>,
+			);
+
+			expect(
+				container.querySelector('.gallery-control--prev'),
+			).not.toBeInTheDocument();
+			expect(
+				container.querySelector('.gallery-control--next'),
+			).toBeInTheDocument();
+
+			rerender(
+				<Gallery
+					photos={photoList}
+					showThumbnails={false}
+					wrap={false}
+					activePhotoIndex={1}
+				/>,
+			);
+
 			expect(
 				container.querySelector('.gallery-control--prev'),
 			).toBeInTheDocument();
@@ -89,7 +124,7 @@ describe('Gallery', () => {
 
 		it('renders accessible labels on navigation controls', () => {
 			const { container } = render(
-				<Gallery photos={photos.slice(0, 2)} showThumbnails={false} />,
+				<Gallery photos={photos.slice(0, 2)} showThumbnails={false} wrap />,
 			);
 
 			expect(container.querySelector('.gallery-control--prev')).toHaveAttribute(

tests/components/react-bnb-gallery.test.js

@@ -150,6 +150,42 @@ describe('ReactBnbGallery', () => {
 			).toHaveTextContent('2 / 3');
 		});
 
+		it('stops at the last photo when wrap is disabled', () => {
+			render(
+				<ReactBnbGallery
+					photos={photos.slice(0, 3)}
+					show
+					activePhotoIndex={2}
+					wrap={false}
+				/>,
+			);
+
+			const modal = document.body.querySelector('.gallery-modal');
+			fireEvent.keyDown(modal, { key: 'ArrowRight' });
+
+			expect(
+				document.body.querySelector('.gallery-photo-counter'),
+			).toHaveTextContent('3 / 3');
+		});
+
+		it('wraps from last photo to first when wrap is enabled', () => {
+			render(
+				<ReactBnbGallery
+					photos={photos.slice(0, 3)}
+					show
+					activePhotoIndex={2}
+					wrap
+				/>,
+			);
+
+			const modal = document.body.querySelector('.gallery-modal');
+			fireEvent.keyDown(modal, { key: 'ArrowRight' });
+
+			expect(
+				document.body.querySelector('.gallery-photo-counter'),
+			).toHaveTextContent('1 / 3');
+		});
+
 		it('warns when photos is passed as a single string', () => {
 			render(<ReactBnbGallery photos="https://example.com/photo.jpg" show />);