genesys-spark-components 4.0.0-beta.26 → 4.0.0-beta.27

package/dist/collection/components/{stable/gux-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/dropdown-option/gux-dropdown-option.css

@@ -23,7 +23,7 @@ gux-dropdown-option[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-gux-dropdown-option[disabled='false'] {
+gux-dropdown-option[disabled=false] {
   pointer-events: auto;
   cursor: pointer;
   opacity: 1;
@@ -32,8 +32,7 @@ gux-dropdown-option:not(:disabled)[selected] {
   color: #2e394c;
   background: #deeaff;
 }
-gux-dropdown-option:not(:disabled):hover,
-gux-dropdown-option:not(:disabled):focus-visible {
+gux-dropdown-option:not(:disabled):hover, gux-dropdown-option:not(:disabled):focus-visible {
   color: #fdfdfd;
   background: #2a60c8;
-}
+}

package/dist/collection/components/{stable/gux-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/dropdown-option/gux-dropdown-option.js

@@ -79,7 +79,7 @@ export class GuxDropdownOption {
   static get is() { return "gux-dropdown-option"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-dropdown-option.less"]
+      "$": ["gux-dropdown-option.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.css

@@ -0,0 +1,239 @@
+.gux-focus-ring-focused:focus {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
+/* Font Definitions. */
+/* From: https://google-webfonts-helper.herokuapp.com */
+/* roboto-300 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url("./fonts/roboto-v20-latin-300.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Light"), local("Roboto-Light"), url("./fonts/roboto-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-300.woff2") format("woff2"), url("./fonts/roboto-v20-latin-300.woff") format("woff"), url("./fonts/roboto-v20-latin-300.ttf") format("truetype"), url("./fonts/roboto-v20-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-regular - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url("./fonts/roboto-v20-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-regular.woff") format("woff"), url("./fonts/roboto-v20-latin-regular.ttf") format("truetype"), url("./fonts/roboto-v20-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-italic - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url("./fonts/roboto-v20-latin-italic.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Italic"), local("Roboto-Italic"), url("./fonts/roboto-v20-latin-italic.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-italic.woff2") format("woff2"), url("./fonts/roboto-v20-latin-italic.woff") format("woff"), url("./fonts/roboto-v20-latin-italic.ttf") format("truetype"), url("./fonts/roboto-v20-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-700 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url("./fonts/roboto-v20-latin-700.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-700.woff") format("woff"), url("./fonts/roboto-v20-latin-700.ttf") format("truetype"), url("./fonts/roboto-v20-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+body {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+/* Headings */
+h1 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 300;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+h2 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 300;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+h3 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+h4,
+h5,
+h6 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: 2px;
+}
+
+a {
+  color: #2a60c8;
+  text-decoration: underline;
+  border-radius: 2px;
+}
+a:hover {
+  color: #2754ac;
+}
+a:active {
+  color: #23478f;
+}
+a:focus-visible {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+table a {
+  color: #2a60c8;
+  text-decoration: underline;
+  border-radius: 2px;
+  text-decoration: none;
+}
+table a:hover {
+  color: #2754ac;
+}
+table a:active {
+  color: #23478f;
+}
+table a:focus-visible {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+/* Custom Styles */
+:host {
+  color: #2e394c;
+}
+
+gux-popup {
+  display: block;
+  margin: 4px 0;
+}
+gux-popup .gux-select-field {
+  position: relative;
+  width: 100%;
+  height: 32px;
+}
+gux-popup .gux-select-field a.gux-select-input {
+  position: absolute;
+  inset: 0;
+  padding: 6px 24px 6px 12px;
+  overflow: hidden;
+  color: #2e394c;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: #f6f7f9;
+  background-image: none;
+  border: 1px solid #6b7585;
+  border-radius: 4px;
+  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+}
+gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder,
+gux-popup .gux-select-field a.gux-select-input .gux-select-value {
+  line-height: 20px;
+}
+gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder {
+  color: #596373;
+}
+gux-popup .gux-select-field a.gux-select-input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(117, 168, 255, 0.5);
+}
+gux-popup .gux-select-field .gux-icon-wrapper {
+  position: absolute;
+  top: 1px;
+  right: 8px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+gux-popup .gux-select-field .gux-icon-wrapper gux-icon {
+  width: 16px;
+  height: 16px;
+  color: #596373;
+}
+gux-popup .gux-select-field:hover .gux-icon-wrapper gux-icon {
+  color: #2e394c;
+}
+gux-popup .gux-advanced-dropdown-menu {
+  width: 100%;
+  background: #fdfdfd;
+  border: 1px solid #b4bccb;
+  border-radius: 4px;
+  box-shadow: 0 0 2px 0 rgba(32, 41, 55, 0.24);
+}
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search {
+  margin: 8px 16px;
+}
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-cancel-button, gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-results-button, gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+gux-popup .gux-dropdown-options {
+  padding: 8px 0;
+  margin: 0;
+  overflow-y: auto;
+  color: #2e394c;
+  background: #fdfdfd;
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+gux-popup::part(gux-popup-container) {
+  width: inherit;
+}

package/dist/collection/components/{stable/gux-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/gux-advanced-dropdown.js

@@ -18,7 +18,7 @@ import advancedDropDownResources from './i18n/en.json';
 /**
  * @slot - collection of gux-dropdown-option elements
  */
-export class GuxAdvancedDropdown {
+export class GuxAdvancedDropdownLegacy {
   constructor() {
     this.disabled = false;
     this.placeholder = undefined;
@@ -195,11 +195,11 @@ export class GuxAdvancedDropdown {
       this.inputBox.focus();
     }
   }
-  static get is() { return "gux-advanced-dropdown"; }
+  static get is() { return "gux-advanced-dropdown-legacy"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-advanced-dropdown.less"]
+      "$": ["gux-advanced-dropdown.scss"]
     };
   }
   static get styleUrls() {
@@ -393,4 +393,4 @@ export class GuxAdvancedDropdown {
 }
 __decorate([
   OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxAdvancedDropdown.prototype, "onClickOutside", null);
+], GuxAdvancedDropdownLegacy.prototype, "onClickOutside", null);

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.css

@@ -10,4 +10,4 @@
   cursor: pointer;
   cursor: default;
   background-color: #c8cfda;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.js

@@ -7,7 +7,7 @@ export class GuxListDivider {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list-divider.less"]
+      "$": ["gux-list-divider.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-list/gux-list-item/gux-list-item.css

@@ -2,43 +2,54 @@
   width: 100%;
   outline: none;
 }
+
 :host([disabled]) {
   pointer-events: none;
 }
-:host([disabled='false']) {
+
+:host([disabled=false]) {
   pointer-events: auto;
 }
+
 ::slotted(gux-icon) {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
+  width: var(--gse-ui-menu-option-startIcon-height);
+  height: var(--gse-ui-menu-option-startIcon-height);
+  margin-right: var(--gse-ui-menu-option-gap);
   vertical-align: middle;
 }
+
 button {
   all: unset;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  background-color: var(--gse-ui-menu-option-default-backgroundColor);
   box-sizing: border-box;
   width: 100%;
-  min-height: 32px;
-  padding: 8px 16px;
-  color: #2e394c;
+  min-height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
   border: none;
   outline: none;
 }
 button:focus-visible:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
 button:hover:not(:disabled) {
-  color: #fdfdfd;
-  background: #2754ac;
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
 button:active:not(:disabled) {
-  color: #fdfdfd;
-  background: #23478f;
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
 }
 button:disabled {
-  color: rgba(46, 57, 76, 0.5);
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
   cursor: default;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list-item/gux-list-item.js

@@ -30,7 +30,7 @@ export class GuxListItem {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list-item.less"]
+      "$": ["gux-list-item.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-list/gux-list.css

@@ -5,4 +5,4 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list.js

@@ -56,7 +56,7 @@ export class GuxList {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list.less"]
+      "$": ["gux-list.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,4 +1,4 @@
-gux-pagination-buttons-beta .gux-pagination-buttons-container {
+gux-pagination-buttons .gux-pagination-buttons-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -8,18 +8,18 @@ gux-pagination-buttons-beta .gux-pagination-buttons-container {
   justify-content: flex-end;
   margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
-gux-pagination-buttons-beta .gux-pagination-buttons-container > div {
+gux-pagination-buttons .gux-pagination-buttons-container > div {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-group {
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-group {
   display: flex;
   flex-direction: row;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   white-space: nowrap;
 }
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container {
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container {
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
@@ -29,8 +29,8 @@ gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-bu
   align-items: center;
   justify-content: center;
 }
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current,
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current,
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
   min-width: 28px;
   min-height: 24px;
   padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
@@ -44,21 +44,21 @@ gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-bu
   line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
 }
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current:focus-visible,
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target:focus-visible {
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current:focus-visible,
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target: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-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current {
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current {
   background-color: var(--gse-ui-button-ghost-active-backgroundColor);
   border-radius: var(--gse-ui-button-borderRadius);
 }
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
   color: var(--gse-ui-button-ghost-default-foregroundColor);
   cursor: pointer;
 }
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target:hover {
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-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);

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-buttons-beta/gux-pagination-buttons-beta.js → stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.js}

@@ -1,9 +1,9 @@
 import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../i18n';
 import paginationResources from './i18n/en.json';
-import { GuxPaginationButtonsService } from './gux-pagination-button-beta.service';
+import { GuxPaginationButtonsService } from './gux-pagination-button.service';
 import { afterNextRender } from '@utils/dom/after-next-render';
-export class GuxPaginationButtonsBeta {
+export class GuxPaginationButtons {
   constructor() {
     this.currentPage = undefined;
     this.totalPages = undefined;
@@ -57,15 +57,15 @@ export class GuxPaginationButtonsBeta {
   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.getPageNavigation(), 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-beta"; }
+  static get is() { return "gux-pagination-buttons"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-buttons-beta.scss"]
+      "$": ["gux-pagination-buttons.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["gux-pagination-buttons-beta.css"]
+      "$": ["gux-pagination-buttons.css"]
     };
   }
   static get properties() {
@@ -108,12 +108,12 @@ export class GuxPaginationButtonsBeta {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "GuxPaginationLayoutBeta",
+          "original": "GuxPaginationLayout",
           "resolved": "\"advanced\" | \"simple\"",
           "references": {
-            "GuxPaginationLayoutBeta": {
+            "GuxPaginationLayout": {
               "location": "import",
-              "path": "../gux-pagination-beta.types"
+              "path": "../gux-pagination.types"
             }
           }
         },

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-item-counts-beta/gux-pagination-item-counts-beta.css → stable/gux-pagination/gux-pagination-item-counts/gux-pagination-item-counts.css}

@@ -1,4 +1,4 @@
-gux-pagination-item-counts-beta .gux-pagination-item-counts-container {
+gux-pagination-item-counts .gux-pagination-item-counts-container {
   display: flex;
   flex-direction: row;
   gap: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
@@ -8,7 +8,4 @@ gux-pagination-item-counts-beta .gux-pagination-item-counts-container {
   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-item-counts-beta .gux-pagination-item-counts-container .gux-pagination-item-counts-range {
-  font-weight: bold;
 }

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-item-counts-beta/gux-pagination-item-counts-beta.js → stable/gux-pagination/gux-pagination-item-counts/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 GuxPaginationItemCounts {
   constructor() {
     this.totalItems = 0;
     this.currentPage = 0;
@@ -33,15 +33,15 @@ export class GuxPaginationItemCountsBeta {
       lastItem: this.lastItem
     })), this.getPaginationItemCountsRange()));
   }
-  static get is() { return "gux-pagination-item-counts-beta"; }
+  static get is() { return "gux-pagination-item-counts"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-item-counts-beta.scss"]
+      "$": ["gux-pagination-item-counts.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["gux-pagination-item-counts-beta.css"]
+      "$": ["gux-pagination-item-counts.css"]
     };
   }
   static get properties() {

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

@@ -1,4 +1,4 @@
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container {
+gux-pagination-items-per-page .gux-pagination-items-per-page-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -7,22 +7,22 @@ gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container {
   align-items: center;
   justify-content: center;
 }
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container > div {
+gux-pagination-items-per-page .gux-pagination-items-per-page-container > div {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
   white-space: nowrap;
 }
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown {
+gux-pagination-items-per-page .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown {
   display: inline-block;
   width: 64px;
 }
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container gux-dropdown div.gux-dropdown .gux-options.gux-opened {
+gux-pagination-items-per-page .gux-pagination-items-per-page-container gux-dropdown div.gux-dropdown .gux-options.gux-opened {
   bottom: 100%;
   display: flex;
   flex-direction: column-reverse;
 }
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container .gux-pagination-per-page {
+gux-pagination-items-per-page .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);

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-items-per-page-beta/gux-pagination-items-per-page-beta.js → stable/gux-pagination/gux-pagination-items-per-page/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 GuxPaginationItemsPerPage {
   constructor() {
     this.itemsPerPage = 25;
   }
@@ -21,15 +21,15 @@ export class GuxPaginationItemsPerPageBeta {
   render() {
     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"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-items-per-page-beta.scss"]
+      "$": ["gux-pagination-items-per-page.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["gux-pagination-items-per-page-beta.css"]
+      "$": ["gux-pagination-items-per-page.css"]
     };
   }
   static get properties() {
@@ -43,7 +43,7 @@ export class GuxPaginationItemsPerPageBeta {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../gux-pagination-beta.types"
+              "path": "../gux-pagination.types"
             }
           }
         },