fix(PhotoCarousel): use Button component for nav arrows and add dark mode support

- Replace custom arrow buttons with Button component using iconOnly prop
- Update nav button styling to match Carousel component (hover/active states)
- Add dark mode support to dots using design tokens instead of hardcoded white
- Improve Carousel nav button hover/active states for consistency
- Add images array example and documentation to FullscreenMap stories

Author: JakeLin

packages/ui/src/components/Carousel/Carousel.module.css

@@ -155,16 +155,17 @@
   border-radius: 50%;
   box-shadow: var(--ai-elevation-1-shadow);
   transition:
-    background-color 0.2s ease,
-    box-shadow 0.2s ease;
+    background-color 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
 .navButton:hover {
-  opacity: 0.9;
+  background-color: var(--ai-color-bg-secondary);
 }
 
 .navButton:active {
-  opacity: 1;
+  background-color: var(--ai-color-bg-tertiary);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .navButtonPrev {

packages/ui/src/components/Map/FullscreenMap.stories.tsx

@@ -19,6 +19,12 @@ const sampleLocations: LocationData[] = [
     description:
       'Award-winning Neapolitan pies in North Beach.<br/><br/>A San Francisco institution serving authentic Italian pizza with locally-sourced ingredients.',
     thumbnail: 'https://persistent.oaistatic.com/pizzaz/pizzaz-1.png',
+    images: [
+      'https://persistent.oaistatic.com/pizzaz/pizzaz-1.png',
+      'https://persistent.oaistatic.com/pizzaz/pizzaz-2.png',
+      'https://persistent.oaistatic.com/pizzaz/pizzaz-3.png',
+      'https://persistent.oaistatic.com/pizzaz/pizzaz-4.png',
+    ],
     features: [{ icon: 'star', label: '4.8' }, { label: '$$$' }],
     actions: [
       { label: 'Add to favorites', variant: 'primary' },
@@ -262,6 +268,11 @@ const FullscreenMapDoc: FC = () => {
             Fullscreen maps use native scroll wheel zoom by default (`scrollWheelZoom=true`) for the
             best desktop experience, while compact maps use custom pinch-to-zoom handlers.
           </li>
+          <li>
+            Add an `images` array to LocationData for multi-photo locations—the inspector
+            automatically renders a PhotoCarousel with dots and arrows when multiple images are
+            present, falling back to a single thumbnail otherwise.
+          </li>
         </ul>
       </section>
 

packages/ui/src/components/PhotoCarousel/PhotoCarousel.module.css

@@ -46,42 +46,38 @@
   pointer-events: auto;
 }
 
-/* Navigation Arrows */
-.arrowButton {
+/* Navigation Buttons */
+.navButton {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
   z-index: 3;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  background-color: var(--ai-color-bg-primary);
   border-radius: 50%;
-  border: none;
-  background-color: rgba(255, 255, 255, 0.9);
-  color: var(--ai-color-text-primary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--ai-elevation-1-shadow);
+  transition:
+    background-color 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
-.arrowButton:hover:not(:disabled) {
-  background-color: rgba(255, 255, 255, 1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+.navButton:hover {
+  background-color: var(--ai-color-bg-secondary);
 }
 
-.arrowButton:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+.navButton:active {
+  background-color: var(--ai-color-bg-tertiary);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
-.arrowPrev {
-  left: 16px;
+.navButtonPrev {
+  left: var(--ai-spacing-4);
 }
 
-.arrowNext {
-  right: 16px;
+.navButtonNext {
+  right: var(--ai-spacing-4);
 }
 
 /* Navigation Dots */
@@ -102,19 +98,21 @@
   height: 8px;
   border-radius: 50%;
   border: none;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: var(--ai-color-bg-primary);
+  opacity: 0.6;
   cursor: pointer;
   padding: 0;
   transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .dot:hover {
-  background-color: rgba(255, 255, 255, 0.8);
+  opacity: 0.85;
   transform: scale(1.2);
 }
 
 .dotActive {
-  background-color: rgba(255, 255, 255, 1);
+  opacity: 1;
   width: 10px;
   height: 10px;
 }

packages/ui/src/components/PhotoCarousel/PhotoCarousel.module.css.d.ts

@@ -5,9 +5,9 @@ declare const styles: {
   readonly emblaSlide: string;
   readonly photo: string;
   readonly overlayContainer: string;
-  readonly arrowButton: string;
-  readonly arrowPrev: string;
-  readonly arrowNext: string;
+  readonly navButton: string;
+  readonly navButtonPrev: string;
+  readonly navButtonNext: string;
   readonly dotsContainer: string;
   readonly dot: string;
   readonly dotActive: string;

packages/ui/src/components/PhotoCarousel/PhotoCarousel.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Overlay } from '../Overlay';
-import { Icon } from '../Icon';
+import { Button } from '../Button';
 import { cn } from '../../utils/cn';
 import styles from './PhotoCarousel.module.css';
 
@@ -171,27 +171,23 @@ export const PhotoCarousel: React.FC<PhotoCarouselProps> = ({
       {topOverlay && <div className={styles.overlayContainer}>{topOverlay}</div>}
 
       {/* Navigation Arrows */}
-      {showArrows && images.length > 1 && (
-        <>
-          <button
-            className={cn(styles.arrowButton, styles.arrowPrev)}
-            onClick={scrollPrev}
-            disabled={!hasPrev}
-            aria-label="Previous photo"
-            type="button"
-          >
-            <Icon name="chevron-left-lg" size={24} />
-          </button>
-          <button
-            className={cn(styles.arrowButton, styles.arrowNext)}
-            onClick={scrollNext}
-            disabled={!hasNext}
-            aria-label="Next photo"
-            type="button"
-          >
-            <Icon name="chevron-right-lg" size={24} />
-          </button>
-        </>
+      {showArrows && images.length > 1 && hasPrev && (
+        <Button
+          variant="ghost"
+          iconOnly="chevron-left-md"
+          onClick={scrollPrev}
+          aria-label="Previous photo"
+          className={cn(styles.navButton, styles.navButtonPrev)}
+        />
+      )}
+      {showArrows && images.length > 1 && hasNext && (
+        <Button
+          variant="ghost"
+          iconOnly="chevron-right-md"
+          onClick={scrollNext}
+          aria-label="Next photo"
+          className={cn(styles.navButton, styles.navButtonNext)}
+        />
       )}
 
       {/* Navigation Dots */}