diff --git a/web-components/packages/carbon-web-components/src/components/button/button.scss b/web-components/packages/carbon-web-components/src/components/button/button.scss
index ac1ec129519f..2ae289f0f625 100644
--- a/web-components/packages/carbon-web-components/src/components/button/button.scss
+++ b/web-components/packages/carbon-web-components/src/components/button/button.scss
@@ -12,6 +12,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/components/popover/index';
 @use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/theme' as *;
 
 :host(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
@@ -21,6 +22,30 @@ $css--plex: true !default;
     width: rem(20px);
     height: rem(20px);
   }
+
+  &[pagination] {
+    .#{$prefix}--btn {
+      border: none;
+      border-left: 1px solid $border-subtle;
+      transition: none;
+
+      &:focus {
+        outline: 2px solid $focus;
+        outline-offset: -2px;
+        box-shadow: none;
+        border-left: 1px solid transparent;
+      }
+    }
+
+    &:not([disabled]) {
+      .#{$prefix}--btn {
+        color: $icon-primary;
+        &:active {
+          background-color: $layer-hover;
+        }
+      }
+    }
+  }
 }
 
 :host(#{$prefix}-button[kind='ghost']:hover) .#{$prefix}--btn--ghost,
diff --git a/web-components/packages/carbon-web-components/src/components/button/button.ts b/web-components/packages/carbon-web-components/src/components/button/button.ts
index 606cca86b88c..590f60bcda2e 100644
--- a/web-components/packages/carbon-web-components/src/components/button/button.ts
+++ b/web-components/packages/carbon-web-components/src/components/button/button.ts
@@ -76,7 +76,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @HostListener('mouseover')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleOver = () => {
-    this.openTooltip = !this.openTooltip;
+    this.openTooltip = true;
   };
 
   /**
@@ -85,7 +85,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @HostListener('mouseout')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleHoverOut = async () => {
-    this.openTooltip = !this.openTooltip;
+    this.openTooltip = false;
   };
 
   /**
@@ -95,7 +95,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @HostListener('focus')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleFocus = async (event) => {
-    this._handleOver();
+    this.openTooltip = true;
   };
 
   /**
@@ -105,7 +105,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @HostListener('focusout')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleFocusout = async (event) => {
-    this._handleOver();
+    this.openTooltip = false;
   };
 
   /**
@@ -114,6 +114,12 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ type: Boolean, reflect: true })
   autofocus = false;
 
+  /**
+   * Specify an optional className to be added to your Button
+   */
+  @property({ reflect: true, attribute: 'class-name' })
+  className;
+
   /**
    * Specify the message read by screen readers for the danger button variant
    */
@@ -229,6 +235,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   render() {
     const {
       autofocus,
+      className,
       dangerDescriptor,
       disabled,
       download,
@@ -251,7 +258,8 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
       _hasMainContent: hasMainContent,
       _handleSlotChange: handleSlotChange,
     } = this;
-    const classes = classMap({
+
+    let defaultClasses = {
       [`${prefix}--btn`]: true,
       [`${prefix}--btn--${kind}`]: kind,
       [`${prefix}--btn--disabled`]: disabled,
@@ -260,7 +268,16 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
       [`${prefix}-ce--btn--has-icon`]: hasIcon,
       [`${prefix}--btn--expressive`]: isExpressive,
       [`${prefix}--btn--selected`]: isSelected && kind === 'ghost',
-    });
+    };
+
+    if (className) {
+      const outputObject = {};
+      className?.split(' ').forEach((element) => {
+        outputObject[element] = true;
+      });
+      defaultClasses = outputObject;
+    }
+    const classes = classMap(defaultClasses);
 
     const isDanger = kind.includes('danger');
 
@@ -308,7 +325,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
       [`${prefix}--popover--${tooltipPosition}${alignmentClass}`]: tooltipText,
     });
 
-    return tooltipText
+    return tooltipText && !disabled
       ? html`
           <span class="${tooltipClasses}">
             <button
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/data-table-story.ts b/web-components/packages/carbon-web-components/src/components/data-table/data-table-story.ts
index 785b76ead294..5c305448a442 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/data-table-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/data-table-story.ts
@@ -28,8 +28,6 @@ import '../overflow-menu/overflow-menu';
 import '../overflow-menu/overflow-menu-body';
 import '../overflow-menu/overflow-menu-item';
 import '../pagination/pagination';
-import '../pagination/page-sizes-select';
-import '../pagination/pages-select';
 import { TABLE_COLOR_SCHEME, TABLE_SIZE } from './table';
 import './table-head';
 import './table-header-row';
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/defs.ts b/web-components/packages/carbon-web-components/src/components/pagination/defs.ts
new file mode 100644
index 000000000000..afe597c84fe2
--- /dev/null
+++ b/web-components/packages/carbon-web-components/src/components/pagination/defs.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Pagination size.
+ */
+export enum PAGINATION_SIZE {
+  /**
+   * Small size.
+   */
+  SMALL = 'sm',
+
+  /**
+   * Medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+}
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/index.ts b/web-components/packages/carbon-web-components/src/components/pagination/index.ts
index cd4bab101725..50b82c342213 100644
--- a/web-components/packages/carbon-web-components/src/components/pagination/index.ts
+++ b/web-components/packages/carbon-web-components/src/components/pagination/index.ts
@@ -1,12 +1,10 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import './page-sizes-select';
-import './pages-select';
 import './pagination';
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/page-sizes-select.ts b/web-components/packages/carbon-web-components/src/components/pagination/page-sizes-select.ts
deleted file mode 100644
index eabe8d4206d6..000000000000
--- a/web-components/packages/carbon-web-components/src/components/pagination/page-sizes-select.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { LitElement, html } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import { prefix } from '../../globals/settings';
-import FocusMixin from '../../globals/mixins/focus';
-import styles from './pagination.scss';
-
-/**
- * The select box for page sizes.
- *
- * @element cds-page-sizes-select
- * @slot label-text - The label text.
- * @fires cds-page-sizes-select-changed - The custom event fired after the page size is changed.
- */
-@customElement(`${prefix}-page-sizes-select`)
-class BXPageSizesSelect extends FocusMixin(LitElement) {
-  @query('select')
-  private _selectNode!: HTMLSelectElement;
-
-  /**
-   * Handles `change` event on the `<select>` to select page size.
-   */
-  private _handleChange({ target }: Event) {
-    const value = Number((target as HTMLSelectElement).value);
-    this.dispatchEvent(
-      new CustomEvent(
-        (this.constructor as typeof BXPageSizesSelect).eventChange,
-        {
-          bubbles: true,
-          composed: true,
-          detail: {
-            value,
-          },
-        }
-      )
-    );
-    this.value = value;
-  }
-
-  /**
-   * Handles `slotchange` event for the `<slot>` for `<options>`.
-   *
-   * @param event The event.
-   */
-  private _handleSlotChange({ target }: Event) {
-    const { _selectNode: selectNode } = this;
-    while (selectNode.firstChild) {
-      selectNode.removeChild(selectNode.firstChild);
-    }
-    (
-      (target as HTMLSlotElement).assignedNodes() as HTMLOptionElement[]
-    ).forEach((item) => {
-      selectNode?.appendChild(item.cloneNode(true));
-    });
-  }
-
-  /**
-   * The label text.
-   */
-  @property({ attribute: 'label-text' })
-  labelText = 'Items per page:';
-
-  /**
-   * The value, working as the current page size.
-   */
-  @property({ type: Number })
-  value!: number;
-
-  render() {
-    const {
-      labelText,
-      value,
-      _handleChange: handleChange,
-      _handleSlotChange: handleSlotChange,
-    } = this;
-    return html`
-      <label for="select" class="${prefix}--pagination__text"
-        ><slot name="label-text">${labelText}</slot></label
-      >
-      <div class="${prefix}--select__item-count">
-        <select
-          id="select"
-          class="${prefix}--select-input"
-          .value="${value}"
-          @change=${handleChange}></select>
-        ${ChevronDown16({ class: `${prefix}--select__arrow` })}
-      </div>
-      <div hidden><slot @slotchange="${handleSlotChange}"></slot></div>
-    `;
-  }
-
-  /**
-   * The name of the custom event fired after the page size is changed.
-   */
-  static get eventChange() {
-    return `${prefix}-page-sizes-select-changed`;
-  }
-
-  static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default BXPageSizesSelect;
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/pages-select.ts b/web-components/packages/carbon-web-components/src/components/pagination/pages-select.ts
deleted file mode 100644
index e08f733e691e..000000000000
--- a/web-components/packages/carbon-web-components/src/components/pagination/pages-select.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import { prefix } from '../../globals/settings';
-import FocusMixin from '../../globals/mixins/focus';
-import styles from './pagination.scss';
-
-/**
- * The select box for the current page.
- *
- * @element cds-pages-select
- * @fires cds-pages-select-changed - The custom event fired after the page is changed.
- */
-@customElement(`${prefix}-pages-select`)
-class BXPagesSelect extends FocusMixin(LitElement) {
-  /**
-   * Handles `change` event on the `<select>` to select page size.
-   */
-  private _handleChange({ target }: Event) {
-    const value = Number((target as HTMLSelectElement).value);
-    this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXPagesSelect).eventChange, {
-        bubbles: true,
-        composed: true,
-        detail: {
-          value,
-        },
-      })
-    );
-    this.value = value;
-  }
-
-  /**
-   * The formatter for the assistive text for screen readers to announce.
-   * Should be changed upon the locale the UI is rendered with.
-   */
-  @property({ attribute: false })
-  formatLabelText = ({ count }) =>
-    `Page number, of ${count} page${count <= 1 ? '' : 's'}`;
-
-  /**
-   * The formatter for the text next to the select box. Should be changed upon the locale the UI is rendered with.
-   */
-  @property({ attribute: false })
-  formatSupplementalText = ({ count }) =>
-    `of ${count} page${count <= 1 ? '' : 's'}`;
-
-  /**
-   * The number of total pages.
-   */
-  @property({ type: Number })
-  total!: number;
-
-  /**
-   * The value, working as the current page, index that starts with zero.
-   */
-  @property({ type: Number })
-  value!: number;
-
-  render() {
-    const {
-      formatLabelText,
-      formatSupplementalText,
-      total,
-      value,
-      _handleChange: handleChange,
-    } = this;
-    // `<option ?selected="${index === value}">` is a workaround for:
-    // https://github.com/Polymer/lit-html/issues/1052
-    return html`
-      <div class="${prefix}--select__page-number">
-        <label for="select" class="${prefix}--label ${prefix}--visually-hidden">
-          ${formatLabelText({ count: total })}
-        </label>
-        <select
-          class="${prefix}--select-input"
-          .value="${value}"
-          @change="${handleChange}">
-          ${Array.from(new Array(total)).map(
-            (_item, index) =>
-              html`
-                <option value=${index} ?selected="${index === value}">
-                  ${index + 1}
-                </option>
-              `
-          )}
-        </select>
-        ${ChevronDown16({ class: `${prefix}--select__arrow` })}
-      </div>
-      <span class="${prefix}--pagination__text">
-        ${formatSupplementalText({ count: total })}
-      </span>
-    `;
-  }
-
-  /**
-   * The name of the custom event fired after the page is changed.
-   */
-  static get eventChange() {
-    return `${prefix}-pages-select-changed`;
-  }
-
-  static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default BXPagesSelect;
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.mdx b/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
index fa0e295a20e6..c90a709dacfd 100644
--- a/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
@@ -10,7 +10,7 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 [![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
 
 The pagination component is used to switch through multiple pages of items, when
-only a maxium number of items can be displayed per page. Can be used in
+only a maximum number of items can be displayed per page. Can be used in
 combination with other components like data table.
 
 ## Getting started
@@ -29,13 +29,14 @@ import '@carbon/web-components/es/components/pagination/index.js';
 ### HTML
 
 ```html
-<cds-pagination page-size="10" start="0" total="100">
-  <cds-page-sizes-select slot="page-sizes-select">
-    <option value="10">10</option>
-    <option value="20">20</option>
-    <option value="30">30</option>
+<cds-pagination page-size="10" total="100">
+  <cds-select>
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
   </cds-page-sizes-select>
-  <cds-pages-select></cds-pages-select>
 </cds-pagination>
 ```
 
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.ts b/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.ts
index 9db9a630fc1e..8a98d76e816a 100644
--- a/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.ts
@@ -8,59 +8,129 @@
  */
 
 import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { action } from '@storybook/addon-actions';
-import { boolean, number } from '@storybook/addon-knobs';
+import { boolean, number, text, select } from '@storybook/addon-knobs';
 import './pagination';
-import './page-sizes-select';
-import './pages-select';
 import storyDocs from './pagination-story.mdx';
 import { prefix } from '../../globals/settings';
+import { PAGINATION_SIZE } from './defs';
 
-export const Default = (args) => {
+const sizes = {
+  [`Small size (${PAGINATION_SIZE.SMALL})`]: PAGINATION_SIZE.SMALL,
+  [`Medium size (${PAGINATION_SIZE.MEDIUM})`]: PAGINATION_SIZE.MEDIUM,
+  [`Large size (${PAGINATION_SIZE.LARGE})`]: PAGINATION_SIZE.LARGE,
+};
+
+export const Default = () => {
+  return html`
+    <cds-pagination start="0" total-items="103">
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
+    </cds-pagination>
+  `;
+};
+
+export const MultiplePaginationComponents = () => {
+  return html`
+    <cds-pagination start="0" total-items="103">
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
+    </cds-pagination>
+    <cds-pagination start="0" total-items="103">
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
+    </cds-pagination>
+  `;
+};
+
+MultiplePaginationComponents.storyName = 'Multiple Pagination components';
+
+export const PaginationCustomPageSizeLabel = () => {
+  return html`
+    <cds-pagination start="0" total-items="103">
+      <cds-select-item value="10">Ten</cds-select-item>
+      <cds-select-item value="20">Twenty</cds-select-item>
+      <cds-select-item value="30">Thirty</cds-select-item>
+      <cds-select-item value="40">Forty</cds-select-item>
+      <cds-select-item value="50">Fifty</cds-select-item>
+    </cds-pagination>
+  `;
+};
+
+PaginationCustomPageSizeLabel.storyname =
+  'Pagination with custom page sizes label';
+
+export const Playground = (args) => {
   const {
-    atLastPage,
-    pageSize,
-    start,
-    total,
+    backwardText,
     onChangedCurrent,
     onChangedPageSizesSelect,
+    disabled,
+    forwardText,
+    isLastPage,
+    itemsPerPageText,
+    page,
+    pageInputDisabled,
+    pageSizeInputDisabled,
+    pagesUnknown,
+    size,
+    totalItems,
   } = args?.[`${prefix}-pagination`] ?? {};
   return html`
     <cds-pagination
-      ?at-last-page="${atLastPage || undefined}"
-      page-size="${ifDefined(pageSize)}"
-      start="${ifDefined(start)}"
-      total="${ifDefined(total)}"
+      background-text=${backwardText}
+      ?disabled=${disabled}
+      forward-text=${forwardText}
+      ?is-last-page=${isLastPage}
+      items-per-page=${itemsPerPageText}
+      page=${page}
+      ?page-input-disabled=${pageInputDisabled}
+      ?page-size-input-disabled=${pageSizeInputDisabled}
+      size=${size}
+      ?pages-unknown=${pagesUnknown}
+      total-items=${totalItems}
       @cds-pagination-changed-current="${onChangedCurrent}"
       @cds-page-sizes-select-changed="${onChangedPageSizesSelect}">
-      <cds-page-sizes-select slot="page-sizes-select">
-        <option value="10">10</option>
-        <option value="20">20</option>
-        <option value="30">30</option>
-      </cds-page-sizes-select>
-      ${total == null
-        ? undefined
-        : html` <cds-pages-select></cds-pages-select> `}
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
     </cds-pagination>
   `;
 };
 
-Default.storyName = 'Default';
-
 export default {
   title: 'Components/Pagination',
   parameters: {
     ...storyDocs.parameters,
     knobs: {
       [`${prefix}-pagination`]: () => ({
-        atLastPage: boolean(
-          'Explicitly state that the user is at the last page (at-last-apge)',
+        backwardText: text('Backward text', 'Previous page'),
+        disabled: boolean('Disabled', false),
+        forwardText: text('Forward text', 'Next page'),
+        isLastPage: boolean(
+          'Explicitly state that the user is at the last page (is-last-page)',
           false
         ),
+        itemsPerPage: text('Items per page text', 'Items per page:'),
+        page: number('The current page', 1),
+
         pageSize: number('Number of rows per page (page-size)', 10),
-        start: number('Start row index of the current page (start)', 0),
-        total: number('Total rows count (total)', 100),
+        pageInputDisabled: boolean('Pages input disabled', false),
+        pageSizeInputDisabled: boolean('Pages size input disabled', false),
+        pagesUnknown: boolean('Pages unknown', false),
+        size: select('Size (size)', sizes, PAGINATION_SIZE.MEDIUM),
+        totalItems: number('Total item count (total-items)', 103),
         onChangedCurrent: action(`${prefix}-pagination-changed-current`),
         onChangedPageSizesSelect: action(`${prefix}-page-sizes-select-changed`),
       }),
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/pagination.scss b/web-components/packages/carbon-web-components/src/components/pagination/pagination.scss
index de2c97557292..fc73351cea98 100644
--- a/web-components/packages/carbon-web-components/src/components/pagination/pagination.scss
+++ b/web-components/packages/carbon-web-components/src/components/pagination/pagination.scss
@@ -21,10 +21,6 @@ $css--plex: true !default;
   position: relative;
   outline: none;
 
-  .#{$prefix}--pagination__left {
-    flex: 1;
-  }
-
   .#{$prefix}-ce--pagination__divider {
     height: 100%;
     width: rem(1px);
@@ -39,65 +35,3 @@ $css--plex: true !default;
     transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};
   }
 }
-
-:host(#{$prefix}-pages-select) {
-  @extend .#{$prefix}--select__page-number;
-
-  outline: none;
-}
-
-:host(#{$prefix}-page-sizes-select) {
-  @extend .#{$prefix}--select__item-count;
-
-  outline: none;
-}
-
-:host(#{$prefix}-pages-select),
-:host(#{$prefix}-page-sizes-select) {
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  .#{$prefix}--select-input {
-    @include type-style('body-short-01');
-
-    width: auto;
-    min-width: auto;
-    height: 100%;
-    padding: 0 2.5rem 0 $spacing-05;
-    margin-right: 0;
-    border: none;
-
-    @include breakpoint('md') {
-      padding-right: rem(36px);
-    }
-
-    &:hover {
-      // TODO: check value because this is a split token
-      // (hover-ui became field-hover-01 and field-hover-02)
-      background: $field-hover-01;
-    }
-  }
-
-  .#{$prefix}--select__arrow {
-    top: auto;
-    bottom: auto;
-
-    @include breakpoint('md') {
-      right: $spacing-05;
-    }
-  }
-}
-
-:host(#{$prefix}-pages-select) .#{$prefix}--select__page-number,
-:host(#{$prefix}-page-sizes-select) .#{$prefix}--select__item-count {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  position: relative;
-}
-
-:host(#{$prefix}-pages-select) .#{$prefix}--pagination__text {
-  margin-right: 1rem;
-  margin-left: rem(1px);
-}
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/pagination.ts b/web-components/packages/carbon-web-components/src/components/pagination/pagination.ts
index c191d875acea..9568f5316255 100644
--- a/web-components/packages/carbon-web-components/src/components/pagination/pagination.ts
+++ b/web-components/packages/carbon-web-components/src/components/pagination/pagination.ts
@@ -7,19 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property, customElement, query } from 'lit/decorators.js';
 import CaretLeft16 from '@carbon/icons/lib/caret--left/16';
 import CaretRight16 from '@carbon/icons/lib/caret--right/16';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
-import { forEach } from '../../globals/internal/collection-helpers';
-import BXPagesSelect from './pages-select';
-import BXPageSizesSelect from './page-sizes-select';
 import styles from './pagination.scss';
+import { PAGINATION_SIZE } from './defs';
+import CDSSelect from '../select/select';
 
 /**
  * Pagination UI.
@@ -31,30 +29,47 @@ import styles from './pagination.scss';
  *   The custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
  */
 @customElement(`${prefix}-pagination`)
-class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
+class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
+  @query(`${prefix}-select`)
+  private _pageSizeSelect!: HTMLElement;
+
+  private _handleSlotChange({ target }: Event) {
+    const content = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
+
+    content.forEach((item) => {
+      this._pageSizeSelect.appendChild(item);
+    });
+  }
+
   /**
    * @returns Page status text.
    */
   private _renderStatusText() {
     const {
-      atLastPage,
       start,
       pageSize,
-      total,
+      totalItems,
+      pagesUnknown,
       formatStatusWithDeterminateTotal,
       formatStatusWithIndeterminateTotal,
     } = this;
     // * Regular: `1-10 of 100 items`
     // * Indeterminate total: `Item 1-10` (`Item 11-` at the last page)
-    const end = atLastPage
-      ? undefined
-      : Math.min(start + pageSize, total == null ? Infinity : total);
+    const end = Math.min(
+      start + pageSize,
+      totalItems == null ? Infinity : totalItems
+    );
     const format =
-      total == null
+      totalItems == null || pagesUnknown
         ? formatStatusWithIndeterminateTotal
         : formatStatusWithDeterminateTotal;
+
     // `start`/`end` properties starts with zero, whereas we want to show number starting with 1
-    return format({ start: start + 1, end, count: total });
+    return format({ start: start + 1, end, count: totalItems });
   }
 
   /**
@@ -66,12 +81,13 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
     this.start = start;
     this.dispatchEvent(
       new CustomEvent(
-        (this.constructor as typeof BXPagination).eventChangeCurrent,
+        (this.constructor as typeof CDSPagination).eventChangeCurrent,
         {
           bubbles: true,
           composed: true,
           detail: {
-            start,
+            page: this.page,
+            pageSize: this.pageSize,
           },
         }
       )
@@ -83,6 +99,7 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
    */
   private _handleClickPrevButton() {
     const { start: oldStart, pageSize } = this;
+    this.page--;
     const newStart = Math.max(oldStart - pageSize, 0);
     if (newStart !== oldStart) {
       this._handleUserInitiatedChangeStart(newStart);
@@ -93,36 +110,55 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
    * Handles `click` event on the next button.
    */
   private _handleClickNextButton() {
-    const { start: oldStart, pageSize, total } = this;
+    const { start: oldStart, pageSize, totalItems } = this;
+    this.page++;
     const newStart = oldStart + pageSize;
-    if (newStart < (total == null ? Infinity : total)) {
+    if (newStart < (totalItems == null ? Infinity : totalItems)) {
       this._handleUserInitiatedChangeStart(newStart);
     }
   }
 
   /**
-   * Handles user-initiated change in current page.
+   * Handles user-initiated change in number of rows per page.
    *
    * @param event The event.
    */
-  @HostListener('eventChangePage')
+  @HostListener('eventChangeSelect')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleChangePage = ({ detail }: CustomEvent) => {
-    const { value } = detail;
-    const { pageSize } = this;
-    this._handleUserInitiatedChangeStart(value * pageSize);
-  };
+  private _handleChangeSelector(event) {
+    const { value } = event.detail;
+    const { totalItems, pageSize } = this;
+
+    if (event.composedPath()[0] === this._pageSizeSelect) {
+      this.pageSize = parseInt(value);
+      this.totalPages = Math.ceil(totalItems / pageSize);
+      this.page = 1;
+      this.start = 0;
+    } else {
+      this.page = value;
+      this._handleUserInitiatedChangeStart((value - 1) * pageSize);
+    }
+  }
 
   /**
-   * Handles user-initiated change in number of rows per page.
-   *
-   * @param event The event.
+   * The assistive text for the button to go to previous page.
    */
-  @HostListener('eventChangePageSize')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleChangePageSize = ({ detail }: CustomEvent) => {
-    this.pageSize = detail.value;
-  };
+  @property({ attribute: 'backward-text' })
+  backwardText = 'Previous page';
+
+  /**
+   * The current page
+   */
+  @property({ type: Number, reflect: true })
+  page = 1;
+
+  /**
+   * The formatter for the assistive text for screen readers to announce.
+   * Should be changed upon the locale the UI is rendered with.
+   */
+  @property({ attribute: false })
+  formatLabelText = ({ count }) =>
+    `Page number, of ${count} page${count <= 1 ? '' : 's'}`;
 
   /**
    * The formatter, used with determinate the total pages. Should be changed upon the locale the UI is rendered with.
@@ -135,14 +171,30 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
    * The formatter, used with indeterminate the total pages. Should be changed upon the locale the UI is rendered with.
    */
   @property({ attribute: false })
-  formatStatusWithIndeterminateTotal = ({ start, end }) =>
-    end == null ? `Item ${start}–` : `Item ${start}–${end}`;
+  formatStatusWithIndeterminateTotal = ({ start, end, count }) =>
+    end == null
+      ? `Item ${start}–`
+      : `${start}–${end} item${count <= 1 ? '' : 's'}`;
 
+  /**
+   * The formatter for the text next to the select box. Should be changed upon the locale the UI is rendered with.
+   */
+  @property({ attribute: false })
+  formatSupplementalText = ({ count }) =>
+    this.pagesUnknown || !this.totalItems
+      ? `page`
+      : `of ${count} page${count <= 1 ? '' : 's'}`;
   /**
    * `true` to explicitly state that user is at the last page.
    */
-  @property({ type: Boolean, attribute: 'at-last-page' })
-  atLastPage!: boolean;
+  @property({ type: Boolean, attribute: 'is-last-page' })
+  isLastPage!: boolean;
+
+  /**
+   * The translatable text indicating the number of items per page.
+   */
+  @property({ attribute: 'items-per-page-text' })
+  itemsPerPageText = 'Items per page:';
 
   /**
    * `true` if the pagination UI should be disabled.
@@ -153,15 +205,27 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
   /**
    * The assistive text for the button to go to next page.
    */
-  @property({ attribute: 'next-button-text' })
-  nextButtonText = 'Next page';
+  @property({ attribute: 'forward-text' })
+  forwardText = 'Next page';
+
+  /**
+   * true if the select box to change the page should be disabled.
+   */
+  @property({ attribute: 'page-input-disabled' })
+  pageInputDisabled;
 
   /**
    * Number of items per page.
    */
-  @property({ type: Number, attribute: 'page-size' })
+  @property({ type: Number, attribute: 'page-size', reflect: true })
   pageSize = 10;
 
+  /**
+   * true if the select box to change the items per page should be disabled.
+   */
+  @property({ type: Boolean, attribute: 'page-size-input-disabled' })
+  pageSizeInputDisabled;
+
   /**
    * The label text for the UI to select page size.
    */
@@ -169,10 +233,16 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
   pageSizeLabelText!: string;
 
   /**
-   * The assistive text for the button to go to previous page.
+   * true if the total number of items is unknown.
    */
-  @property({ attribute: 'prev-button-text' })
-  prevButtonText = 'Previous page';
+  @property({ type: Boolean, reflect: true, attribute: 'pages-unknown' })
+  pagesUnknown = false;
+
+  /**
+   * Specify the size of the Pagination.
+   */
+  @property({ reflect: true })
+  size = PAGINATION_SIZE.MEDIUM;
 
   /**
    * The row number where current page start with, index that starts with zero.
@@ -183,83 +253,174 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
   /**
    * The number of total items.
    */
+  @property({ type: Number, attribute: 'total-items' })
+  totalItems!: number;
+
+  /**
+   * The number of total pages.
+   */
   @property({ type: Number })
-  total!: number;
+  totalPages = 1;
 
   updated(changedProperties) {
-    const { pageSize } = this;
+    const { page, pageSize, totalItems } = this;
     const { selectorPageSizesSelect, selectorPagesSelect } = this
-      .constructor as typeof BXPagination;
+      .constructor as typeof CDSPagination;
+
     if (changedProperties.has('pageSize')) {
-      forEach(this.querySelectorAll(selectorPageSizesSelect), (elem) => {
-        (elem as BXPageSizesSelect).value = pageSize;
-      });
+      (this.shadowRoot!.querySelector(selectorPageSizesSelect) as any).value =
+        pageSize;
     }
     if (changedProperties.has('pageSize') || changedProperties.has('start')) {
-      const { start } = this;
-      forEach(this.querySelectorAll(selectorPagesSelect), (elem) => {
-        (elem as BXPagesSelect).value = Math.floor(start / pageSize);
-      });
+      this.totalPages = Math.ceil(totalItems / pageSize);
+      (this.shadowRoot!.querySelector(selectorPagesSelect) as CDSSelect).value =
+        this.page.toString();
     }
-    if (changedProperties.has('pageSize') || changedProperties.has('total')) {
-      const { total } = this;
-      forEach(this.querySelectorAll(selectorPagesSelect), (elem) => {
-        (elem as BXPagesSelect).total = Math.ceil(total / pageSize);
-      });
+
+    if (changedProperties.has('page')) {
+      this._handleUserInitiatedChangeStart((page - 1) * pageSize);
     }
   }
 
   render() {
     const {
+      page,
       disabled,
-      nextButtonText,
-      prevButtonText,
+      forwardText,
+      backwardText,
+      itemsPerPageText,
+      pageInputDisabled,
       pageSize,
+      pageSizeInputDisabled,
+      pagesUnknown,
+      size,
       start,
-      total,
+      totalItems,
+      totalPages,
       _handleClickPrevButton: handleClickPrevButton,
       _handleClickNextButton: handleClickNextButton,
+      _handleSlotChange: handleSlotChange,
+      formatLabelText,
+      formatSupplementalText,
     } = this;
-    const { atLastPage = start + pageSize >= total } = this;
+
+    const { isLastPage = start + pageSize >= totalItems } = this;
     const prevButtonDisabled = disabled || start === 0;
-    const nextButtonDisabled = disabled || atLastPage;
-    const prevButtonClasses = classMap({
+    const nextButtonDisabled = disabled || isLastPage;
+
+    const prevButtonClassMap = {
+      [`${prefix}--btn`]: true,
+      [`${prefix}--btn--icon-only`]: true,
       [`${prefix}--pagination__button`]: true,
       [`${prefix}--pagination__button--backward`]: true,
       [`${prefix}--pagination__button--no-index`]: prevButtonDisabled,
-    });
-    const nextButtonClasses = classMap({
+      [`${prefix}--btn--${size}`]: true,
+      [`${prefix}--btn--ghost`]: true,
+    };
+    const nextButtonClassMap = {
+      [`${prefix}--btn`]: true,
+      [`${prefix}--btn--icon-only`]: true,
       [`${prefix}--pagination__button`]: true,
       [`${prefix}--pagination__button--forward`]: true,
       [`${prefix}--pagination__button--no-index`]: nextButtonDisabled,
-    });
+      [`${prefix}--btn--${size}`]: true,
+      [`${prefix}--btn--ghost`]: true,
+    };
+
+    const prevButtonClasses = Object.entries(prevButtonClassMap)
+      .filter(([, value]) => value === true)
+      .map(([key]) => key)
+      .join(' ');
+    const nextButtonClasses = Object.entries(nextButtonClassMap)
+      .filter(([, value]) => value === true)
+      .map(([key]) => key)
+      .join(' ');
+
     return html`
       <div class="${prefix}--pagination__left">
-        <slot name="page-sizes-select"></slot>
-        <div class="${prefix}-ce--pagination__divider"></div>
+        <label for="select" class="${prefix}--pagination__text"
+          ><slot name="label-text">${itemsPerPageText}</slot></label
+        >
+        <cds-select
+          ?disabled=${disabled || pageSizeInputDisabled}
+          id="page-size-select"
+          left-select
+          pagination
+          inline
+          value="${pageSize}">
+          <slot @slotchange=${handleSlotChange}></slot>
+        </cds-select>
         <span
           class="${prefix}--pagination__text ${prefix}--pagination__items-count"
           >${this._renderStatusText()}</span
         >
       </div>
-      <div class="${prefix}-ce--pagination__divider"></div>
       <div class="${prefix}--pagination__right">
-        <slot></slot>
+        <label for="select" class="${prefix}--label ${prefix}--visually-hidden">
+          ${formatLabelText({ count: totalPages })}
+        </label>
+        ${pagesUnknown || !totalItems
+          ? html`
+              <span
+                class="${prefix}--pagination__text ${prefix}--pagination__page-text"
+                >${formatSupplementalText({ count: totalPages })}</span
+              >
+
+              <cds-select
+                ?disabled=${disabled || pageInputDisabled}
+                id="pages-select"
+                pagination
+                inline
+                value="${page}">
+                ${Array.from(new Array(totalPages)).map(
+                  (_item, index) =>
+                    html`
+                      <cds-select-item value="${index + 1}">
+                        ${index + 1}
+                      </cds-select-item>
+                    `
+                )}
+              </cds-select>
+            `
+          : html`
+              <cds-select
+                ?disabled=${disabled || pageInputDisabled}
+                id="pages-select"
+                pagination
+                inline
+                value="${page}">
+                ${Array.from(new Array(totalPages)).map(
+                  (_item, index) =>
+                    html`
+                      <cds-select-item value="${index + 1}">
+                        ${index + 1}
+                      </cds-select-item>
+                    `
+                )}
+              </cds-select>
+              <span class="${prefix}--pagination__text"
+                >${formatSupplementalText({ count: totalPages })}</span
+              >
+            `}
+
         <div class="${prefix}--pagination__control-buttons">
-          <button
+          <cds-button
+            pagination
             ?disabled="${prevButtonDisabled}"
-            class="${prevButtonClasses}"
-            title="${prevButtonText}"
+            class-name="${prevButtonClasses}"
+            tooltip-text="${backwardText}"
             @click="${handleClickPrevButton}">
-            ${CaretLeft16()}
-          </button>
-          <button
+            ${CaretLeft16({ slot: 'icon' })}
+          </cds-button>
+          <cds-button
+            tooltip-position="top-right"
+            pagination
             ?disabled="${nextButtonDisabled}"
-            class="${nextButtonClasses}"
-            title="${nextButtonText}"
+            class-name="${nextButtonClasses}"
+            tooltip-text="${forwardText}"
             @click="${handleClickNextButton}">
-            ${CaretRight16()}
-          </button>
+            ${CaretRight16({ slot: 'icon' })}
+          </cds-button>
         </div>
       </div>
     `;
@@ -269,14 +430,14 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
    * A selector that will return the select box for the current page.
    */
   static get selectorPagesSelect() {
-    return `${prefix}-pages-select`;
+    return `${prefix}-select#pages-select`;
   }
 
   /**
    * A selector that will return the select box for page sizes.
    */
   static get selectorPageSizesSelect() {
-    return `${prefix}-page-sizes-select`;
+    return `${prefix}-select`;
   }
 
   /**
@@ -286,18 +447,11 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
     return `${prefix}-pagination-changed-current`;
   }
 
-  /**
-   * The name of the custom event fired after the current page is changed from `<cds-pages-select>`.
-   */
-  static get eventChangePage() {
-    return `${prefix}-pages-select-changed`;
-  }
-
   /**
    * The name of the custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
    */
-  static get eventChangePageSize() {
-    return `${prefix}-page-sizes-select-changed`;
+  static get eventChangeSelect() {
+    return `${prefix}-select-selected`;
   }
 
   static shadowRootOptions = {
@@ -307,4 +461,4 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXPagination;
+export default CDSPagination;
diff --git a/web-components/packages/carbon-web-components/src/components/select/select.scss b/web-components/packages/carbon-web-components/src/components/select/select.scss
index 3678eeb88140..a8850b3088e2 100644
--- a/web-components/packages/carbon-web-components/src/components/select/select.scss
+++ b/web-components/packages/carbon-web-components/src/components/select/select.scss
@@ -8,7 +8,9 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/select';
+@use '@carbon/styles/scss/theme' as *;
 
 :host(#{$prefix}-select) {
   @extend .#{$prefix}--select;
@@ -39,7 +41,32 @@ $css--plex: true !default;
     }
 
     .#{$prefix}--select__invalid-icon--warning {
-      right: 2rem;
+      right: $spacing-07;
+    }
+  }
+
+  &[pagination] {
+    .#{$prefix}--label {
+      margin: 0;
+    }
+
+    .#{$prefix}--select-input {
+      padding: 0 2.25rem 0 $spacing-05;
+
+      &:focus {
+        background-color: transparent;
+      }
+    }
+
+    .#{$prefix}--select__arrow {
+      top: 50%;
+      transform: translate(-#{$spacing-03}, -50%);
+    }
+
+    &[left-select] {
+      .#{$prefix}--select-input {
+        border-right: 1px solid $border-subtle;
+      }
     }
   }
 }
diff --git a/web-components/packages/carbon-web-components/src/components/select/select.ts b/web-components/packages/carbon-web-components/src/components/select/select.ts
index cc63df0ab5be..a76fb9430d01 100644
--- a/web-components/packages/carbon-web-components/src/components/select/select.ts
+++ b/web-components/packages/carbon-web-components/src/components/select/select.ts
@@ -287,7 +287,7 @@ class CDSSelect extends FormMixin(LitElement) {
   /**
    * The value of the text area.
    */
-  @property()
+  @property({ reflect: true })
   value = '';
 
   connectedCallback() {
diff --git a/web-components/packages/carbon-web-components/src/index.ts b/web-components/packages/carbon-web-components/src/index.ts
index 3846fd4377de..cc78125426fb 100644
--- a/web-components/packages/carbon-web-components/src/index.ts
+++ b/web-components/packages/carbon-web-components/src/index.ts
@@ -76,8 +76,6 @@ export { default as CDSOverflowMenu } from './components/overflow-menu/overflow-
 export { default as CDSOverflowMenuBody } from './components/overflow-menu/overflow-menu-body';
 export { default as CDSOverflowMenuItem } from './components/overflow-menu/overflow-menu-item';
 export { default as CDSPagination } from './components/pagination/pagination';
-export { default as CDSPageSizesSelect } from './components/pagination/page-sizes-select';
-export { default as CDSPagesSelect } from './components/pagination/pages-select';
 export { default as CDSProgressBar } from './components/progress-bar/progress-bar';
 export { default as CDSProgressIndicator } from './components/progress-indicator/progress-indicator';
 export { default as CDSProgressIndicatorSkeleton } from './components/progress-indicator/progress-indicator-skeleton';
diff --git a/web-components/packages/carbon-web-components/tests/spec/pagination_spec.ts b/web-components/packages/carbon-web-components/tests/spec/pagination_spec.ts
index f9e3323ec7df..80c7516ddc4f 100644
--- a/web-components/packages/carbon-web-components/tests/spec/pagination_spec.ts
+++ b/web-components/packages/carbon-web-components/tests/spec/pagination_spec.ts
@@ -9,13 +9,12 @@
 
 import { render } from 'lit';
 import EventManager from '../utils/event-manager';
-import BXPagination from '../../src/components/pagination/pagination';
-import BXPageSizesSelect from '../../src/components/pagination/page-sizes-select';
-import BXPagesSelect from '../../src/components/pagination/pages-select';
-import { Default } from '../../src/components/pagination/pagination-story';
+import CDSPagination from '../../src/components/pagination/pagination';
+import { Playground } from '../../src/components/pagination/pagination-story';
+import CDSSelect from '../../src/components/select/select';
 
 const template = (props?) =>
-  Default({
+  Playground({
     'cds-pagination': props,
   });
 
@@ -38,7 +37,7 @@ describe('cds-pagination', function () {
         template({
           pageSize: 20,
           start: 10,
-          total: 200,
+          totalItems: 200,
         }),
         document.body
       );
@@ -60,7 +59,7 @@ describe('cds-pagination', function () {
     });
 
     it('should render <cds-pages-select> with minimum attributes', async function () {
-      render(template({ total: 100 }), document.body);
+      render(template({ totalItems: 100 }), document.body);
       await Promise.resolve(); // Update cycle for `<cds-pagination>`
       await Promise.resolve(); // Update cycle for `<cds-pages-select>`
       expect(
@@ -77,7 +76,7 @@ describe('cds-pagination', function () {
         template({
           pageSize: 1,
           start: 0,
-          total: 1,
+          totalItems: 1,
         }),
         document.body
       );
@@ -93,7 +92,7 @@ describe('cds-pagination', function () {
         template({
           pageSize: 20,
           start: 10,
-          total: null,
+          totalItems: null,
         }),
         document.body
       );
@@ -110,7 +109,7 @@ describe('cds-pagination', function () {
           atLastPage: true,
           pageSize: 20,
           start: 30,
-          total: null,
+          totalItems: null,
         }),
         document.body
       );
@@ -123,48 +122,45 @@ describe('cds-pagination', function () {
   });
 
   describe('Propagating changes', function () {
-    it('should propagate `pageSize` property to `<cds-page-sizes-select>`', async function () {
+    it('should propagate `pageSize` property to `<cds-select>`', async function () {
       render(template(), document.body);
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       paginationNode.pageSize = 20;
       await Promise.resolve();
-      const pageSizesSelectNode = document.body.querySelector(
-        'cds-page-sizes-select'
-      ) as BXPageSizesSelect;
-      expect(pageSizesSelectNode.value).toBe(20);
+      const pageSizesSelectNode = paginationNode.shadowRoot?.querySelector(
+        'cds-select'
+      ) as CDSSelect;
+      expect(pageSizesSelectNode.value).toBe('20');
     });
 
-    it('should propagate the current page to `<cds-pages-select>`', async function () {
-      render(template({ total: 100 }), document.body);
+    it('should propagate the current page to `<cds-select>`', async function () {
+      render(template({ totalItems: 100 }), document.body);
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       paginationNode.pageSize = 5;
       paginationNode.start = 21;
       await Promise.resolve();
-      const pagesSelectNode = document.body.querySelector(
-        'cds-pages-select'
-      ) as BXPagesSelect;
-      expect(pagesSelectNode.value).toBe(4);
+      const pagesSelectNode = paginationNode.shadowRoot?.querySelector(
+        '#pages-select'
+      ) as CDSSelect;
+      expect(pagesSelectNode.value).toBe('4');
     });
 
     it('should propagate the total pages to `<cds-pages-select>`', async function () {
-      render(template({ total: 100 }), document.body);
+      render(template({ totalItems: 100 }), document.body);
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       paginationNode.pageSize = 5;
-      paginationNode.total = 21;
+      paginationNode.totalItems = 21;
       await Promise.resolve();
-      const pagesSelectNode = document.body.querySelector(
-        'cds-pages-select'
-      ) as BXPagesSelect;
-      expect(pagesSelectNode.total).toBe(5);
+      expect(paginationNode.totalItems).toBe(5);
     });
 
     it('should handle change in page size at non-first page', async function () {
@@ -174,20 +170,20 @@ describe('cds-pagination', function () {
         template({
           pageSize: 10,
           start: 190,
-          total: 200,
+          totalItems: 200,
         }),
         document.body
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       paginationNode.pageSize = 5;
       await Promise.resolve(); // Update in `<cds-pagination>`
       await Promise.resolve(); // Update in `<cds-pages-select>`
-      const pagesSelectNode = document.body.querySelector(
-        'cds-pages-select'
-      ) as BXPagesSelect;
+      const pagesSelectNode = paginationNode.shadowRoot?.querySelector(
+        '#pages-select'
+      ) as CDSSelect;
       expect(pagesSelectNode.shadowRoot!.querySelector('select')!.value).toBe(
         '38'
       );
@@ -207,7 +203,7 @@ describe('cds-pagination', function () {
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       events.on(
         paginationNode,
         'cds-pagination-changed-current',
@@ -232,7 +228,7 @@ describe('cds-pagination', function () {
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       events.on(
         paginationNode,
         'cds-pagination-changed-current',
@@ -256,7 +252,7 @@ describe('cds-pagination', function () {
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       const spyChanged = jasmine.createSpy('changed');
       events.on(paginationNode, 'cds-pagination-changed-current', spyChanged);
       // Prev button should be disabled when `start` indicates that we are at the first page,
@@ -279,7 +275,7 @@ describe('cds-pagination', function () {
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       events.on(
         paginationNode,
         'cds-pagination-changed-current',
@@ -297,14 +293,14 @@ describe('cds-pagination', function () {
         template({
           pageSize: 10,
           start: 20,
-          total: 30,
+          totalItems: 30,
         }),
         document.body
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       const spyChanged = jasmine.createSpy('changed');
       events.on(paginationNode, 'cds-pagination-changed-current', spyChanged);
       // Next button should be disabled when `start` indicates that we are at the last page,
@@ -320,14 +316,14 @@ describe('cds-pagination', function () {
         template({
           pageSize: 10,
           start: 25,
-          total: 30,
+          totalItems: 30,
         }),
         document.body
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       const spyChanged = jasmine.createSpy('changed');
       events.on(paginationNode, 'cds-pagination-changed-current', spyChanged);
       // Next button should be disabled when `start` indicates that we are at the last page,
@@ -344,14 +340,14 @@ describe('cds-pagination', function () {
         template({
           pageSize: 10,
           start: 25,
-          total: null,
+          totalItems: null,
         }),
         document.body
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       events.on(
         paginationNode,
         'cds-pagination-changed-current',
@@ -365,30 +361,30 @@ describe('cds-pagination', function () {
     });
 
     it('should support user-initiated change in page size', async function () {
-      render(template({ total: 100 }), document.body);
+      render(template({ totalItems: 100 }), document.body);
       await Promise.resolve();
-      const pagesSelectNode = document.body.querySelector(
-        'cds-pages-select'
-      ) as BXPagesSelect;
+      const paginationNode = document.body.querySelector(
+        'cds-pagination'
+      ) as CDSPagination;
+      const pagesSelectNode = paginationNode.shadowRoot?.querySelector(
+        '#pages-select'
+      ) as CDSSelect;
       pagesSelectNode.dispatchEvent(
-        new CustomEvent('cds-page-sizes-select-changed', {
+        new CustomEvent('cds-select-selected', {
           bubbles: true,
           detail: { value: 5 },
         })
       );
-      const paginationNode = document.body.querySelector(
-        'cds-pagination'
-      ) as BXPagination;
       expect(paginationNode.pageSize).toBe(5);
     });
 
     it('should support user-initiated change in current page', async function () {
       let newStart;
-      render(template({ pageSize: 10, total: 100 }), document.body);
+      render(template({ pageSize: 10, totalItems: 100 }), document.body);
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
         'cds-pagination'
-      ) as BXPagination;
+      ) as CDSPagination;
       events.on(
         paginationNode,
         'cds-pagination-changed-current',
@@ -396,11 +392,11 @@ describe('cds-pagination', function () {
           newStart = event.detail.start;
         }
       );
-      const pagesSelectNode = document.body.querySelector(
-        'cds-pages-select'
-      ) as BXPagesSelect;
+      const pagesSelectNode = paginationNode.shadowRoot?.querySelector(
+        '#pages-select'
+      ) as CDSSelect;
       pagesSelectNode.dispatchEvent(
-        new CustomEvent('cds-pages-select-changed', {
+        new CustomEvent('cds-select-selected', {
           bubbles: true,
           detail: { value: 3 },
         })