Add CarouselButton component and integrate into CarouselCardList and CarouselFeatured showcases

- Introduced CarouselButton component for navigation with multiple color variants (neutral, green, black).
- Enhanced CarouselCardListShowcase to include a visual showcase of CarouselButton in various states.
- Created CarouselFeatured component showcasing featured images with navigation and responsive behavior.
- Updated styles for CarouselButton and integrated it into existing patterns for improved navigation experience.

shared/components/CarouselButton/CarouselButton.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Props for the CarouselButton component
+ */
+export interface CarouselButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Arrow direction */
+  direction: 'prev' | 'next';
+  /** Color variant */
+  variant: 'neutral' | 'green' | 'black';
+}
+
+/**
+ * CarouselButton Component
+ * 
+ * A circular navigation button for carousel components.
+ * Displays left/right arrow icons and supports multiple color variants.
+ * 
+ * @example
+ * ```tsx
+ * <CarouselButton
+ *   direction="prev"
+ *   variant="neutral"
+ *   onClick={() => scroll('prev')}
+ *   disabled={!canScrollPrev}
+ *   aria-label="Previous items"
+ * />
+ * ```
+ */
+export const CarouselButton: React.FC<CarouselButtonProps> = ({
+  direction,
+  variant,
+  disabled,
+  className,
+  ...buttonProps
+}) => {
+  return (
+    <button
+      type="button"
+      className={clsx(
+        'bds-carousel-button',
+        `bds-carousel-button--${direction}`,
+        `bds-carousel-button--${variant}`,
+        { 'bds-carousel-button--disabled': disabled },
+        className
+      )}
+      disabled={disabled}
+      {...buttonProps}
+    >
+      {direction === 'prev' ? <CarouselArrowIconLeft /> : <CarouselArrowIconRight />}
+    </button>
+  );
+};
+
+CarouselButton.displayName = 'CarouselButton';
+
+/**
+ * SVG Arrow Icon for carousel navigation - Right arrow
+ */
+export const CarouselArrowIconRight: React.FC = () => (
+  <svg
+    className="bds-carousel-button__arrow-icon"
+    width="18"
+    height="16"
+    viewBox="0 0 18 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M9.33387 1.33461L15.9999 8.00058L9.33387 14.6666M15.9982 7.99893L-0.000149269 7.99893"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+    />
+  </svg>
+);
+
+CarouselArrowIconRight.displayName = 'CarouselArrowIconRight';
+
+/**
+ * SVG Arrow Icon for carousel navigation - Left arrow
+ */
+export const CarouselArrowIconLeft: React.FC = () => (
+  <svg
+    className="bds-carousel-button__arrow-icon"
+    width="18"
+    height="15"
+    viewBox="0 0 18 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M7.72667 0.530285L1.0607 7.19626L7.72667 13.8622M1.06235 7.19461L17.0607 7.19461"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+    />
+  </svg>
+);
+
+CarouselArrowIconLeft.displayName = 'CarouselArrowIconLeft';
+
+export default CarouselButton;
+