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

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.css

@@ -1,162 +1,46 @@
-.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 */
+/**
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-large-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-large-width : TODO https://inindca.atlassian.net/browse/COMUI-2264
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-medium-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-medium-width
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-small-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-small-width
+  * @prop --gse-progressAndLoading-large-gap
+  * @prop --gse-progressAndLoading-large-gapText
+  * @prop --gse-progressAndLoading-pageLoading-gap
+  * @prop --gse-progressAndLoading-medium-gap
+  * @prop --gse-progressAndLoading-medium-gapText
+  * @prop --gse-progressAndLoading-small-gap
+  * @prop --gse-progressAndLoading-small-gapText
+  * @prop --gse-ui-progressAndLoading-textColor
+  */
 :host {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  container-type: inline-size;
 }
 
 .gux-container {
@@ -164,44 +48,55 @@ table a:focus-visible {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-}
-.gux-container slot[name=primary-message] {
-  color: #364154;
+  color: var(--gse-ui-progressAndLoading-textColor);
   text-align: center;
 }
-.gux-container slot[name=additional-guidance] {
-  color: #596373;
-  text-align: center;
-}
-.gux-container.gux-small, .gux-container.gux-medium {
-  padding: 8px 0 4px;
-}
-.gux-container.gux-small slot[name=primary-message], .gux-container.gux-medium slot[name=primary-message] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-}
-.gux-container.gux-small slot[name=additional-guidance], .gux-container.gux-medium slot[name=additional-guidance] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 16px;
-}
-.gux-container.gux-large {
-  padding: 16px 0 4px;
-}
-.gux-container.gux-large slot[name=primary-message] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
-}
-.gux-container.gux-large slot[name=additional-guidance] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
+
+@container (width > 400px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-large-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-large-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-large-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-large-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-large-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-large-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontSize);
+  }
+}
+@container (width > 200px) and (width <=400px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-medium-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-medium-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontSize);
+  }
+}
+@container (width <=200px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-small-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-small-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-small-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-small-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-small-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-small-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontSize);
+  }
 }

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.js

@@ -1,57 +1,16 @@
-import { h, readTask } from '@stencil/core';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { h } from '@stencil/core';
 import { trackComponent } from '@utils/tracking/usage';
-import * as loadingMessageWidth from './gux-loading-message-constants';
 /**
  * @slot progress - Required slot for progress.
  * @slot primary-guidance - Required slot for primary guidance.
  * @slot additional-guidance - Slot for additional guidance.
  */
 export class GuxLoadingMessage {
-  constructor() {
-    this.hasAdditionalGuidance = undefined;
-    this.loadingMessageSize = undefined;
-  }
-  updateLoadingMessageSize() {
-    readTask(() => {
-      const containerWidth = this.root.clientWidth;
-      if (containerWidth <= loadingMessageWidth.SMALL_LOADING_MESSAGE) {
-        this.loadingMessageSize = 'small';
-      }
-      else if (containerWidth <= loadingMessageWidth.MEDIUM_LOADING_MESSAGE) {
-        this.loadingMessageSize = 'medium';
-      }
-      else {
-        this.loadingMessageSize = 'large';
-      }
-    });
-  }
   componentWillLoad() {
     trackComponent(this.root);
   }
-  componentDidLoad() {
-    if (!this.resizeObserver && window.ResizeObserver) {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateLoadingMessageSize();
-      });
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.observe(this.root);
-    }
-    afterNextRenderTimeout(() => {
-      this.updateLoadingMessageSize();
-    }, 500);
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver) {
-      this.resizeObserver.unobserve(this.root);
-    }
-  }
   render() {
-    return (h("div", { class: {
-        'gux-container': true,
-        [`gux-${this.loadingMessageSize}`]: true
-      }, role: "alert", "aria-live": "assertive" }, h("slot", { name: "progress" }), h("slot", { name: "primary-message" }), h("slot", { name: "additional-guidance" })));
+    return (h("div", { class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { class: "gux-progress" }, h("slot", { name: "progress" })), h("div", { class: "gux-primary-message" }, h("slot", { name: "primary-message" })), h("div", { class: "gux-additional-guidance" }, h("slot", { name: "additional-guidance" }))));
   }
   static get is() { return "gux-loading-message"; }
   static get encapsulation() { return "shadow"; }
@@ -65,11 +24,5 @@ export class GuxLoadingMessage {
       "$": ["gux-loading-message.css"]
     };
   }
-  static get states() {
-    return {
-      "hasAdditionalGuidance": {},
-      "loadingMessageSize": {}
-    };
-  }
   static get elementRef() { return "root"; }
 }

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"
             }
           }
         },

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

@@ -2,7 +2,7 @@ import { h, readTask } from '@stencil/core';
 import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '@utils/tracking/usage';
 const minAdvancedSpacerWidth = 24;
-export class GuxPaginationBeta {
+export class GuxPagination {
   constructor() {
     this.reinstateLayoutBreakpoint = 0;
     this.layout = 'advanced';
@@ -83,18 +83,18 @@ export class GuxPaginationBeta {
     }, 500);
   }
   render() {
-    return (h("div", { class: "gux-pagination-container" }, h("div", { class: "gux-pagination-info" }, h("gux-pagination-item-counts-beta", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page-beta", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { class: "gux-pagination-spacer" }), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons-beta", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+    return (h("div", { class: "gux-pagination-container" }, h("div", { class: "gux-pagination-info" }, h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { class: "gux-pagination-spacer" }), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
   }
-  static get is() { return "gux-pagination-beta"; }
+  static get is() { return "gux-pagination"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-beta.scss"]
+      "$": ["gux-pagination.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["gux-pagination-beta.css"]
+      "$": ["gux-pagination.css"]
     };
   }
   static get properties() {
@@ -103,12 +103,12 @@ export class GuxPaginationBeta {
         "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"
             }
           }
         },