genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.31

package/dist/collection/components/legacy/gux-notification-toast-legacy/gux-notification-toast.css

@@ -0,0 +1,118 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+:host {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 294px;
+  padding: 16px 8px 16px 16px;
+  margin-bottom: 4px;
+  color: #2e394c;
+  background: #f6f7f9;
+  border: 1px solid #b4bccb;
+  border-color: #b4bccb;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
+}
+
+.gux-icon {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  margin: 4px;
+}
+.gux-icon ::slotted(gux-icon) {
+  width: 24px !important;
+  height: 24px !important;
+}
+.gux-icon.gux-alert {
+  color: #ea0b0b;
+}
+.gux-icon.gux-warning {
+  color: #ffae00;
+}
+.gux-icon.gux-positive {
+  color: #3c8527;
+}
+.gux-icon.gux-neutral {
+  color: #203b73;
+}
+
+.gux-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  align-self: auto;
+  justify-content: flex-start;
+  order: 0;
+  margin: 0 12px 0 8px;
+  color: #2e394c;
+}
+.gux-content .gux-title,
+.gux-content .gux-message {
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 0;
+}
+.gux-content .gux-title {
+  font-family: var(--gse-core-fontFamily-heading), var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-semiBold);
+  font-size: var(--gse-core-fontSize-sm);
+  line-height: var(--gse-core-lineHeight-sm);
+}

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-button.service.js

@@ -0,0 +1,91 @@
+export class GuxPaginationButtonsService {
+  static getPageList(currentPage, totalPages) {
+    if (totalPages <= 10) {
+      return [...Array(totalPages).keys()].map(index => {
+        const pageNumber = index + 1;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+    }
+    if (currentPage <= 5) {
+      const startPageList = [...Array(6).keys()].map(index => {
+        const pageNumber = index + 1;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+      return [
+        ...startPageList,
+        {
+          pageNumber: 7,
+          display: '...',
+          current: false
+        },
+        {
+          pageNumber: totalPages,
+          display: String(totalPages),
+          current: false
+        }
+      ];
+    }
+    if (currentPage > totalPages - 5) {
+      const endPageList = [...Array(6).keys()].map(index => {
+        const pageNumber = index + totalPages - 5;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+      return [
+        {
+          pageNumber: 1,
+          display: '1',
+          current: false
+        },
+        {
+          pageNumber: totalPages - 6,
+          display: '...',
+          current: false
+        },
+        ...endPageList
+      ];
+    }
+    const middlePageList = [...Array(5).keys()].map(index => {
+      const pageNumber = index + currentPage - 2;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+    return [
+      {
+        pageNumber: 1,
+        display: '1',
+        current: false
+      },
+      {
+        pageNumber: currentPage - 3,
+        display: '...',
+        current: false
+      },
+      ...middlePageList,
+      {
+        pageNumber: currentPage + 3,
+        display: '...',
+        current: false
+      },
+      {
+        pageNumber: totalPages,
+        display: String(totalPages),
+        current: false
+      }
+    ];
+  }
+}

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons-legacy.css

@@ -0,0 +1,95 @@
+gux-pagination-buttons-legacy .gux-pagination-buttons-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container.gux-expanded {
+  justify-content: center;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container > div {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-group {
+  white-space: nowrap;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container > div {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  white-space: nowrap;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input {
+  width: 60px;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input input {
+  width: inherit;
+  text-align: center;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+  justify-content: center;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button {
+  height: 32px;
+  padding-left: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
+  padding-right: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
+  margin-left: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
+  margin-right: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
+  background: inherit;
+  border: none;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible {
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current {
+  background-color: var(--gse-ui-button-ghost-active-backgroundColor);
+  border-radius: var(--gse-ui-button-borderRadius);
+  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
+  padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  color: var(--gse-ui-button-ghost-default-foregroundColor);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target {
+  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
+  padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  color: var(--gse-ui-button-ghost-default-foregroundColor);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+  cursor: pointer;
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target:hover {
+  color: var(--gse-ui-button-ghost-hover-foregroundColor);
+  background-color: var(--gse-ui-button-ghost-hover-backgroundColor);
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-spacer {
+  width: var(--gse-ui-dataTableItems-tablePagination-padding);
+}

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons.js

@@ -0,0 +1,167 @@
+import { h } from '@stencil/core';
+import { buildI18nForComponent } from '../../../../i18n';
+import paginationResources from './i18n/en.json';
+import { GuxPaginationButtonsService } from './gux-pagination-button.service';
+export class GuxPaginationButtonsLegacy {
+  constructor() {
+    this.currentPage = undefined;
+    this.totalPages = undefined;
+    this.layout = 'full';
+  }
+  get onFirstPage() {
+    return this.currentPage <= 1;
+  }
+  get onLastPage() {
+    return this.currentPage >= this.totalPages;
+  }
+  handleClickFirst() {
+    this.internalcurrentpagechange.emit(1);
+  }
+  handleClickPrevious() {
+    this.internalcurrentpagechange.emit(this.currentPage - 1);
+  }
+  handleClickNext() {
+    this.internalcurrentpagechange.emit(this.currentPage + 1);
+  }
+  handleClickLast() {
+    this.internalcurrentpagechange.emit(this.totalPages);
+  }
+  handleClickPage(pageNumber) {
+    this.internalcurrentpagechange.emit(pageNumber);
+  }
+  setPageFromInput(value) {
+    const page = parseInt(value, 10);
+    if (!page || isNaN(page)) {
+      this.textFieldRef.value = String(this.currentPage);
+    }
+    else {
+      this.internalcurrentpagechange.emit(page);
+    }
+  }
+  getPageListEnteries(currentPage, totalPages) {
+    return GuxPaginationButtonsService.getPageList(currentPage, totalPages).reduce((acc, cv) => {
+      if (cv.current) {
+        return acc.concat((h("button", { class: "gux-pagination-buttons-list-button gux-current" }, cv.display)));
+      }
+      return acc.concat((h("button", { class: "gux-pagination-buttons-list-button gux-target", onClick: () => this.handleClickPage(cv.pageNumber) }, cv.display)));
+    }, []);
+  }
+  getSmallPagePicker() {
+    return (h("div", { class: 'gux-pagination-buttons-spacer' }));
+  }
+  getExpandedPagePicker() {
+    return (h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages)));
+  }
+  getFullPagePicker() {
+    return (h("div", { class: "gux-pagination-buttons-input-container" }, h("div", null, this.i18n('page')), h("div", { class: "gux-pagination-buttons-input" }, h("gux-form-field-text-like", { "label-position": "screenreader" }, h("label", { slot: "label" }, this.i18n('pageInputLabel', {
+      currentPage: this.currentPage,
+      totalPages: this.totalPages
+    })), h("input", { type: "text", slot: "input", value: String(this.currentPage), ref: ref => (this.textFieldRef = ref), onChange: () => this.setPageFromInput(this.textFieldRef.value) }))), h("div", null, this.i18n('totalPages', { totalPages: this.totalPages }))));
+  }
+  getPagePicker(layout) {
+    if (layout === 'small') {
+      return this.getSmallPagePicker();
+    }
+    if (layout === 'expanded') {
+      return this.getExpandedPagePicker();
+    }
+    return this.getFullPagePicker();
+  }
+  async componentWillLoad() {
+    this.i18n = await buildI18nForComponent(this.root, paginationResources);
+  }
+  render() {
+    return (h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
+  }
+  static get is() { return "gux-pagination-buttons-legacy"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-pagination-buttons-legacy.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-pagination-buttons-legacy.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "currentPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "current-page",
+        "reflect": false
+      },
+      "totalPages": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "total-pages",
+        "reflect": false
+      },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxPaginationLayout",
+          "resolved": "\"expanded\" | \"full\" | \"small\"",
+          "references": {
+            "GuxPaginationLayout": {
+              "location": "import",
+              "path": "../gux-pagination.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "'full'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "internalcurrentpagechange",
+        "name": "internalcurrentpagechange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "root"; }
+}

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/gux-pagination-item-counts-legacy.css

@@ -0,0 +1,11 @@
+gux-pagination-item-counts-legacy .gux-pagination-item-counts-container {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+  gap: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+}

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-item-counts-beta/gux-pagination-item-counts-beta.js → legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/gux-pagination-item-counts.js}

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../i18n';
 import paginationResources from './i18n/en.json';
-export class GuxPaginationItemCountsBeta {
+export class GuxPaginationItemCountsLegacy {
   constructor() {
     this.totalItems = 0;
     this.currentPage = 0;
@@ -22,26 +22,21 @@ export class GuxPaginationItemCountsBeta {
   async componentWillLoad() {
     this.i18n = await buildI18nForComponent(this.root, paginationResources);
   }
-  getPaginationItemCountsRange() {
-    if (this.totalItems) {
-      return (h("span", null, this.i18n('totalItems', { totalItems: this.totalItems })));
-    }
-  }
   render() {
     return (h("div", { class: "gux-pagination-item-counts-container" }, h("span", { class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
       firstItem: this.firstItem,
       lastItem: this.lastItem
-    })), this.getPaginationItemCountsRange()));
+    })), h("span", null, this.i18n('totalItems', { totalItems: this.totalItems }))));
   }
-  static get is() { return "gux-pagination-item-counts-beta"; }
+  static get is() { return "gux-pagination-item-counts-legacy"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-item-counts-beta.less"]
+      "$": ["gux-pagination-item-counts-legacy.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["gux-pagination-item-counts-beta.css"]
+      "$": ["gux-pagination-item-counts-legacy.css"]
     };
   }
   static get properties() {

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/gux-pagination-items-per-page-legacy.css

@@ -0,0 +1,26 @@
+gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+}
+gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container > div {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  white-space: nowrap;
+}
+gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown {
+  display: inline-block;
+  width: 64px;
+}
+gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container .gux-pagination-per-page {
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+}

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-items-per-page-beta/gux-pagination-items-per-page-beta.js → legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/gux-pagination-items-per-page.js}

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../i18n';
 import paginationResources from './i18n/en.json';
-export class GuxPaginationItemsPerPageBeta {
+export class GuxPaginationItemsPerPageLegacy {
   constructor() {
     this.itemsPerPage = 25;
   }
@@ -19,17 +19,17 @@ export class GuxPaginationItemsPerPageBeta {
       }) }, h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, h("gux-option", { value: "25" }, "25"), h("gux-option", { value: "50" }, "50"), h("gux-option", { value: "75" }, "75"), h("gux-option", { value: "100" }, "100"))));
   }
   render() {
-    return (h("div", { class: "gux-pagination-items-per-page-container" }, h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", null, this.i18n('perPage'))));
+    return (h("div", { class: "gux-pagination-items-per-page-container" }, h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { class: "gux-pagination-per-page" }, this.i18n('perPage'))));
   }
-  static get is() { return "gux-pagination-items-per-page-beta"; }
+  static get is() { return "gux-pagination-items-per-page-legacy"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-items-per-page-beta.less"]
+      "$": ["gux-pagination-items-per-page-legacy.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["gux-pagination-items-per-page-beta.css"]
+      "$": ["gux-pagination-items-per-page-legacy.css"]
     };
   }
   static get properties() {
@@ -43,7 +43,7 @@ export class GuxPaginationItemsPerPageBeta {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../gux-pagination-beta.types"
+              "path": "../gux-pagination.types"
             }
           }
         },

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-beta.css → legacy/gux-pagination-legacy/gux-pagination-legacy.css}

@@ -1,7 +1,8 @@
 :host {
   display: block;
-  border-top: 1px solid #e2e6ee;
+  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
 }
+
 .gux-pagination-container {
   display: flex;
   flex-direction: row;
@@ -9,12 +10,13 @@
   align-content: stretch;
   align-items: center;
   justify-content: space-between;
-  height: 40px;
-  margin: 12px 12px 0 12px;
+  height: var(--gse-ui-dataTableItems-cell-tablePagination-height);
+  padding: var(--gse-ui-dataTableItems-tablePagination-padding);
+  background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
 }
 .gux-pagination-container .gux-pagination-info {
   display: flex;
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: stretch;
@@ -22,22 +24,18 @@
   align-self: auto;
   justify-content: flex-start;
   order: 0;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 .gux-pagination-container .gux-pagination-info > * {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
-.gux-pagination-container .gux-pagination-spacer {
-  flex: 1 1 auto;
-  align-self: auto;
-  order: 0;
-}
 .gux-pagination-container .gux-pagination-change {
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   align-self: auto;
   order: 0;
 }
 .gux-pagination-container .gux-pagination-change:first-child {
   margin-left: 0;
-}
+}