feat(carousel): Add stories for numeric, alphabetical, and carousel pagination variants

[pixel-perfectionist]

The design review highlighted that dot indicators alone don’t cover all carousel navigation needs.
This PR expands Fluent UI Storybook with numeric, alphabetical, and pagination CarouselNav stories, providing developers with flexible, ready-to-use navigation patterns.

Previous Behavior

Storybook only included the default CarouselNav example, limiting discoverability of other navigation patterns. Developers often had to experiment or build their own demos to explore alternative configurations.

New Behavior

New Stories Added

• CarouselNavNumeric.stories.tsx: Numeric page buttons (1, 2, 3…).

• CarouselNavAlphabetical.stories.tsx: Alphabetical page buttons (A, B, C…).

• CarouselNavPagination.stories.tsx: Pagination control allowing direct page number input.

• Implementation Notes
• No changes were made to the core CarouselNav implementation, all updates are documentation-focused.

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[layershifter]

I am not a big fan of this approach it also breaks accessibility on CarouselNavButton (not the same role being applied):

Let's use recomposition instead, this will be more solid and future proof:

const CustomNavButton: ForwardRefComponent<CarouselNavButtonProps> = React.forwardRef((props, ref) => {
  const classes = useCustomNavButtonClasses();
  const state = useCarouselNavButton_unstable(props, ref);

  state.root.children = state.index;
  state.root.className = mergeClasses(classes.root, state.selected && classes.selected, state.root.className);

  return renderCarouselNavButton_unstable(state);
});

// packages/react-components/react-carousel/library/src/components/CarouselNavButton/useCarouselNavButton.ts

  const state: CarouselNavButtonState = {
    selected,
    appearance,
    components: {
      root: 'button',
    },
    root: _carouselButton,
+   index
  };

// packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.types.ts

  /**
   * Enables selection state control
   */
  selected?: boolean;

+ index?: number;

[layershifter]

[layershifter]

Let's use SpinButton instead: https://storybooks.fluentui.dev/react/?path=/docs/components-spinbutton--docs

[layershifter]

Do we really need to have this example this way? Have to say that UI has mixed user experience to suggest it to anybody...

[layershifter]

Please re-implement buttons & let's follow up on the pagination example in offline