Implement OnyxPagination "inline" mode

Open questions:

[ ] @jannick-ux For bigger numbers, is it okay for the buttons to not be square anymore
[ ] @jannick-ux Is the amount of shown page buttons dynamic? And if yes, how does it behave? What about mobile, there doesn't seem to be enough space?
[ ] @jannick-ux What is the use-case of the "inline" mode vs the "select" mode
[ ] @jannick-ux How can you jump large gaps, e.g., having 200 pages: how to go from 1 to 100?

Why?

Pagination is used to navigate through multiple pages of data. This is the implementation ticket for the inline mode of the OnyxPagination.

Design

Figma

Acceptance criteria

[ ] Create OnyxPagination base component
[ ] The modelValue prop is mandatory, when the component is not in skeleton mode
[ ] Arrow buttons are disabled, if clicking them wouldn't change the selected page
[ ] Based on the available width and the given page count, the page buttons are rendered
[ ] When there is not enough space, one or more "…" (more pages in between) indicators (non-interactive) are shown
- the first and last page number button should always be shown
- the current page is always in the middle, like in CoreUI:
- the min width fits five segments: < 1 ... 6 ... 99 >
[ ] Arrow Keys can be used to move focus inside the group
[ ] Arrow Buttons trigger a page change => current page plus/minus 1
[ ] only click, not focus changes page selection
[ ] The accessibility tree should look like the following:
- A group, labelled "Pagination":
- a list with listitems:
  - a button, labelled "Previous page"
  - buttons, labelled "Page X"
  - a text "…" (visually-hidden: "More pages in between")
  - a button, labelled "Next page"

Definition of Done

The following component requirements are implemented:
- [ ] skeleton
- [ ] density
- [ ] example usage added to apps/demo-app/src/views/HomeView.vue
[ ] covered by component tests
[ ] screenshot tests are updated
[ ] follow-up tickets were created if necessary
[ ] updated version + documentation is deployed
[ ] Storybook can show the feature
[ ] Storybook code snippet of new/changed examples are checked that they are generated correctly
[ ] Namings are aligned with Figma

Approval

Storybook
Deployed Docs
[ ] approved by designer @jannick-ux
[ ] approved by dev

Implementation details

There are two types: modern and classic.

The two Pagination types are implemented as individual support components and are "proxied" by the actual OnyxPagination.

export type OnyxPaginationProps = {
  /**
   * The different style variants of the pagination:
   * `inline`: A pagination with many numbered page buttons surrounded by arrow buttons to navigate to pages.
   * `select`: A less space consuming pagination, which provides a dropdown and arrow keys for the page selection.
   */
   type: 'inline' | 'select';
   /**
    *  The maximum number of pages
    */
   pages: number;
   /**
    *  The currently selected, zero-based page index
    */
   modelValue?: number;
}

Reference implementations

Applicable ARIA Pattern

no pattern available, but a similar component exists at https://design-system.w3.org/components/pagination.html

SchwarzIT / onyx

Implement OnyxPagination "inline" mode #1714