npm - genesys-spark-components - Versions diffs - 4.86.0 → 4.88.0 - Mend

genesys-spark-components 4.86.0 → 4.88.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (517) hide show

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.css CHANGED Viewed

@@ -33,8 +33,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.css CHANGED Viewed

@@ -39,8 +39,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -137,7 +137,7 @@
 ::slotted(input[type=radio]:focus-visible) {
   border-radius: var(--gse-ui-radioButton-focus-borderRadius);
   outline: var(--gse-ui-radioButton-focus-border-width) var(--gse-ui-radioButton-focus-border-style) var(--gse-ui-radioButton-focus-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
+  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
 }
 ::slotted(input[type=radio]:not(:checked))::before {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.css CHANGED Viewed

@@ -33,8 +33,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -84,8 +84,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.css CHANGED Viewed

@@ -50,8 +50,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.css CHANGED Viewed

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -165,7 +165,7 @@
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
+  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
 }
 .gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.css CHANGED Viewed

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -160,7 +160,7 @@
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
+  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
 }
 .gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: var(--gse-ui-formControl-input-error-border-color);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.css CHANGED Viewed

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -160,7 +160,7 @@ slot[name=suffix] {
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
+  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
 }
 .gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.css CHANGED Viewed

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -137,7 +137,7 @@
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
+  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
 }
 .gux-input-and-error-container .gux-input:hover:not(.gux-disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-picker.css CHANGED Viewed

@@ -33,8 +33,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.css CHANGED Viewed

@@ -33,8 +33,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  min-width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  min-height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.css CHANGED Viewed

@@ -11,8 +11,8 @@ button:not(:disabled):focus-visible, button:not(:disabled):hover {
   cursor: pointer;
 }
 button gux-icon {
-  width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 button:focus {

package/dist/collection/components/stable/gux-icon/gux-icon.css CHANGED Viewed

@@ -5,18 +5,18 @@
 }
 :host([size=small]) {
-  width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
 }
 :host([size=medium]) {
-  width: var(--gse-ui-icon-size-md, --gse-ui-icon-medium-size);
-  height: var(--gse-ui-icon-size-md, --gse-ui-icon-medium-size);
+  width: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
+  height: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
 }
 :host([size=large]) {
-  width: var(--gse-ui-icon-size-lg, --gse-ui-icon-large-size);
-  height: var(--gse-ui-icon-size-lg, --gse-ui-icon-large-size);
+  width: var(--gse-ui-icon-size-lg, var(--gse-ui-icon-large-size));
+  height: var(--gse-ui-icon-size-lg, var(--gse-ui-icon-large-size));
 }
 .gux-icon-container {

package/dist/collection/components/stable/gux-inline-alert/gux-inline-alert.css CHANGED Viewed

@@ -17,8 +17,8 @@
 .gux-inline-alert gux-icon {
   flex-shrink: 0;
   align-self: flex-start;
-  width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+  width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   margin-top: 1px;
 }
 .gux-inline-alert gux-tooltip-title {

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

@@ -38,7 +38,7 @@ button {
   outline-offset: calc(var(--gse-ui-menu-option-focus-border-width) * -1);
 }
 button:focus-visible:not(:disabled) {
-  border-radius: var(--gse-semantic-focusRing-cornerRadius);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius));
   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);
 }
 button:hover:not(:disabled) {

package/dist/collection/components/stable/gux-listbox/gux-listbox.css CHANGED Viewed

@@ -12,8 +12,8 @@
 }
 :host(:focus-visible) {
-  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus, --gse-ui-color-focus);
-  outline-offset: var(--gse-semantic-focusRing-offset);
+  outline: var(--gse-semantic-focusRing-width, var(--gse-semantic-focusOutline-md-borderWidth)) solid var(--gse-semantic-color-focus, var(--gse-ui-color-focus));
+  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
 }
 .gux-message-container {

package/dist/collection/components/stable/gux-listbox/option-group/gux-option-group.css CHANGED Viewed

@@ -13,12 +13,12 @@
   display: block;
   padding: var(--gse-ui-menu-groupedMenu-title-padding);
   color: var(--gse-ui-menu-groupedMenu-title-foregroundColor);
-  font-family: var(--gse-core-typography-heading-overline-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;
-  font-size: var(--gse-core-typography-heading-overline-fontSize);
-  line-height: var(--gse-core-typography-heading-overline-lineHeight);
-  text-transform: var(--gse-core-typography-heading-overline-textCase);
-  letter-spacing: var(--gse-core-typography-heading-overline-letterSpacing);
-  font-weight: var(--gse-core-fontWeight-regular);
+  font-family: var(--gse-core-typography-heading-overline-fontFamily, var(--gse-semantic-heading-overline-fontFamily)), var(--gse-core-fontFamily-heading, var(--gse-semantic-theme-fontFamily-headings)), sans-serif;
+  font-size: var(--gse-core-typography-heading-overline-fontSize, var(--gse-semantic-heading-overline-fontSize));
+  line-height: var(--gse-core-typography-heading-overline-lineHeight, var(--gse-semantic-heading-overline-lineHeight));
+  text-transform: var(--gse-core-typography-heading-overline-textCase, var(--gse-semantic-heading-overline-textCase));
+  letter-spacing: var(--gse-core-typography-heading-overline-letterSpacing, var(--gse-semantic-heading-overline-letterSpacing));
+  font-weight: var(--gse-core-fontWeight-regular, var(--gse-semantic-heading-overline-fontWeight));
 }
 :host(.gux-filtered) {

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.css CHANGED Viewed

@@ -47,7 +47,7 @@
 }
 :host(.gux-active) {
-  border-radius: var(--gse-semantic-focusRing-cornerRadius);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius));
   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);
   outline-offset: -2px;
 }

package/dist/collection/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.css CHANGED Viewed

@@ -47,7 +47,7 @@
 }
 :host(.gux-active) {
-  border-radius: var(--gse-semantic-focusRing-cornerRadius);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius));
   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);
   outline-offset: -2px;
 }

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.css CHANGED Viewed

@@ -21,7 +21,7 @@
   opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
 :host:host(.gux-active) {
-  border-radius: var(--gse-semantic-focusRing-cornerRadius);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius));
   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);
   outline-offset: -2px;
 }

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.css CHANGED Viewed

@@ -9,7 +9,7 @@
   border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
   border-radius: var(--gse-ui-menu-borderRadius);
   outline: none;
-  box-shadow: var(--gse-ui-menu-boxShadow-x, --gse-ui-menu-boxShadow-offsetX) var(--gse-ui-menu-boxShadow-y, --gse-ui-menu-boxShadow-offsetY) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
+  box-shadow: var(--gse-ui-menu-boxShadow-x, var(--gse-ui-menu-boxShadow-offsetX)) var(--gse-ui-menu-boxShadow-y, var(--gse-ui-menu-boxShadow-offsetY)) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }
 .gux-message-container {

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.css CHANGED Viewed

@@ -52,7 +52,7 @@
   fill: var(--gse-ui-menu-option-checkbox-checked-default-foregroundColor);
 }
 :host:host(.gux-active) {
-  border-radius: var(--gse-semantic-focusRing-cornerRadius);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius));
   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);
   outline-offset: -2px;
 }

package/dist/collection/components/stable/gux-modal/gux-modal.css CHANGED Viewed

@@ -5,7 +5,7 @@
 /* Body Copy */
 /* Anchor */
 ::slotted(button:active:enabled) {
-  color: var(--gse-ui-link-active-foregroundColor, --gse-ui-links-active-foregroundColor);
+  color: var(--gse-ui-link-active-foregroundColor, var(--gse-ui-links-active-foregroundColor));
   text-decoration: underline;
   background: none;
 }
@@ -25,7 +25,7 @@ slot[name=start-align-buttons]::slotted(:not(button, gux-button-slot)) {
   overflow: hidden;
   border: none;
   border-radius: var(--gse-ui-modal-borderRadius);
-  box-shadow: var(--gse-ui-modal-boxShadow-x, --gse-ui-modal-boxShadow-offsetX) var(--gse-ui-modal-boxShadow-y, --gse-ui-modal-boxShadow-offsetY) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color);
+  box-shadow: var(--gse-ui-modal-boxShadow-x, var(--gse-ui-modal-boxShadow-offsetX)) var(--gse-ui-modal-boxShadow-y, var(--gse-ui-modal-boxShadow-offsetY)) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color);
 }
 :host dialog::backdrop {
   background: rgba(77, 97, 130, 0.8);

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.css CHANGED Viewed

@@ -27,37 +27,8 @@ gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons
   place-content: stretch center;
   align-items: center;
 }
-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-right: var(--gse-ui-dataTableItems-tablePagination-padding);
-  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
-  margin: 0;
-  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
-  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
-  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
-  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
-  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
-  background: inherit;
-  border: none;
-}
-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 {
-  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
-  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus, --gse-ui-color-focus);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current {
+  color: var(--gse-ui-button-ghost-active-foregroundColor);
   background-color: var(--gse-ui-button-ghost-active-backgroundColor);
   border-radius: var(--gse-ui-button-borderRadius);
-}
-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 .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/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.js CHANGED Viewed

@@ -8,6 +8,7 @@ export class GuxPaginationButtons {
         this.currentPage = undefined;
         this.totalPages = undefined;
         this.layout = 'advanced';
+        this.disabled = false;
     }
     goToPageHandler(event) {
         this.currentPage = event.detail;
@@ -40,16 +41,16 @@ export class GuxPaginationButtons {
     getPageListEnteries(currentPage, totalPages, layout) {
         return GuxPaginationButtonsService.displayAllPageButtons(currentPage, totalPages, layout).reduce((acc, cv) => {
             if (cv.current) {
-                return acc.concat((h("button", { ref: el => (this.currentElement = el), class: "gux-pagination-buttons-list-current", "aria-label": this.i18n('pageSelected', {
+                return acc.concat((h("gux-button-slot", { accent: "ghost" }, h("button", { disabled: this.disabled, ref: el => (this.currentElement = el), class: "gux-pagination-buttons-list-current", "aria-label": this.i18n('pageSelected', {
                         pageSelected: cv.pageNumber
-                    }) }, cv.display)));
+                    }) }, cv.display))));
             }
             if (cv.display == '...') {
-                return acc.concat((h("gux-pagination-ellipsis-button", { totalPages: this.totalPages })));
+                return acc.concat((h("gux-pagination-ellipsis-button", { disabled: this.disabled, totalPages: this.totalPages })));
             }
-            return acc.concat((h("button", { class: "gux-pagination-buttons-list-target", onClick: () => this.handlePageChange(cv.pageNumber), "aria-label": this.i18n('pageNumber', {
+            return acc.concat((h("gux-button-slot", { accent: "ghost" }, h("button", { disabled: this.disabled, onClick: () => this.handlePageChange(cv.pageNumber), "aria-label": this.i18n('pageNumber', {
                     pageNumber: cv.pageNumber
-                }) }, cv.display)));
+                }) }, cv.display))));
         }, []);
     }
     getPageNavigation() {
@@ -59,7 +60,7 @@ export class GuxPaginationButtons {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: '30ab0439083726cb3615c1a18ff0ab97efe798b6', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: 'fbc5a8b8d13116a7767d1085a208c15b7bb1a5da', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'b9cfd4b0a994657d168d1aa0614e2176efb9f380', accent: "ghost" }, h("button", { key: '0ecd32936b67dc25c6b303af460831f0f877e3e4', title: this.i18n('firstPage'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '3de8cc8df38797524373af310e3e542afcdddc81', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '75f193385cbbdbe7a56272f1fde64019068b4592', accent: "ghost" }, h("button", { key: '8318f0b70e9361263261b4fc5bc53a1f2a877bd8', title: this.i18n('previousPage'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '0267d317badb9079f6bba6cafd838655fc057f93', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPageNavigation(), h("div", { key: '0b526166b2f78226369144ce59649e99ec078fe6', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '830556222e1c9bdfa307acc84c9ea5b73aa64715', accent: "ghost" }, h("button", { key: 'dcb89968a1cc1e6a7d7ba4e45764d609c7da1d57', title: this.i18n('nextPage'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'e68bb86ec3e2f310a8c7866fc0f2d073061992c6', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '6570459811668de2a760b6fc91edba3860bd6939', accent: "ghost" }, h("button", { key: 'd1a17d0c343b0fb8cd293280a2c41e6f2cffc726', title: this.i18n('lastPage'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'f0a7f421dffeab5366a1d8c26ba08b5aa66e64ff', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '8fa54ea4b43269f8168f911fb73c99b557e51126', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '1aeeb7265b2209bac0a0637d2b16214abad8b3f7', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'bc9a4af3ee4a95d3c779dd011f6fb6851f4fab5d', accent: "ghost", "icon-only": true }, h("button", { key: '155a3124f030675afbfb306e749bc00c536240ed', title: this.i18n('firstPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'b201fa10d509ec29cb81a8be1b68212ad1db023c', size: "small", decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: 'b7889c36d2087525776469ad75817bdea98e4ebf', accent: "ghost", "icon-only": true }, h("button", { key: 'e61002ec486248b57a924d9b0b6afd2e5189038a', title: this.i18n('previousPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: 'fdb835dbfba0b54f27c6696077d151f38210ae14', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPageNavigation(), h("div", { key: '2d87573a8eb3e02b6718e22b634d4010c4d8dcb2', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '1b32981e75bc249a1ae88ee697d9c1b7be797c35', accent: "ghost", "icon-only": true }, h("button", { key: '2a529494b631c272fa6387ab38ee702401fad808', title: this.i18n('nextPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '73a269ebd1fa74cf865eccb4db8cbef11ec46f3b', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'c49b0820a5127b7fae8e55336dcefbddff6964e9', accent: "ghost", "icon-only": true }, h("button", { key: 'ed36a338828f8ffd1d52c080652a5d633f5fc221', title: this.i18n('lastPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'c24d2bc7564240d214cb5bfbec4ce8239de24be9', size: "small", decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
     }
     static get is() { return "gux-pagination-buttons"; }
     static get originalStyleUrls() {
@@ -131,6 +132,24 @@ export class GuxPaginationButtons {
                 "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "'advanced'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.css CHANGED Viewed

@@ -1,20 +1,6 @@
-button {
-  color: var(--gse-ui-button-ghost-default-foregroundColor);
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-button:hover {
-  color: var(--gse-ui-button-ghost-hover-foregroundColor);
-}
-button:focus-visible {
-  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
-  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus, --gse-ui-color-focus);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-button gux-icon {
-  width: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
-  height: var(--gse-ui-icon-size-sm, --gse-ui-icon-small-size);
+gux-button gux-icon {
+  width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+  height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
   padding-top: 4px;
 }

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.js CHANGED Viewed

@@ -8,7 +8,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { trackComponent } from "../../../../../utils/tracking/usage";
 import translationResources from "../i18n/en.json";
 import { buildI18nForComponent } from "../../../../../i18n/index";
@@ -18,6 +18,7 @@ export class GuxPaginationEllipsisButton {
     constructor() {
         this.isOpen = false;
         this.totalPages = undefined;
+        this.disabled = false;
     }
     handleKeyDown(event) {
         const composedPath = event.composedPath();
@@ -52,6 +53,11 @@ export class GuxPaginationEllipsisButton {
             }
         }
     }
+    watchIsDisabled(newValue) {
+        if (newValue) {
+            this.isOpen = false;
+        }
+    }
     toggle() {
         this.isOpen = !this.isOpen;
         if (this.isOpen) {
@@ -90,8 +96,12 @@ export class GuxPaginationEllipsisButton {
         this.applyInputListener();
     }
     render() {
-        return (h(Host, { key: 'd67656590fd27501ecb370e04ac52c664f1dd3ce' }, h("button", { key: '31d3e0d7ab9cd9dd62dc2042317570d28844e61f', id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: 'f7d035afd8a59b8cefc9135d7f61d10822fa92cd', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })), h("gux-tooltip", { key: '2260d37618cef3d5f6067d25ad7d73a6371f5049', for: "popover-target" }, h("div", { key: '4798e5a26335091f2672b63a2f5b4457091ab139', slot: "content" }, this.i18n('goToPage'))), h("gux-popover", { key: 'cf9998908d7b833a05f7adf123f38da37a6b7a4c', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: '4e80deda4ccfe376eafbae647f3fbe47cc86d2e9', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: '567095f938f1573e1d72e04d4450a9107ce69af6' }, h("input", { key: 'e069dec55bae481a4d72b584aca7a90c116b9333', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
-                evt.preventDefault() }), h("label", { key: 'd9ddc391f609511b1dbca8d6897132eed61e5cb5', slot: "label" })))));
+        return [
+            h("gux-button", { key: 'df023788cc78f500b3aeb47701932e2c90d5fd9c', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: 'b8f1ac86df71c23b5ca0d0840f76deefa9caa9a2', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })),
+            h("gux-tooltip", { key: 'cb58bb6e78285e02863ef8e70efcbd1322ac8d9a', for: "popover-target" }, h("div", { key: '45f457bbb83439f1805e0dd5cf813029cfa73316', slot: "content" }, this.i18n('goToPage'))),
+            h("gux-popover", { key: 'd45de16e5c50329a833770f1e8548ac0ae18cdf4', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: 'ca43611d040dcb8bcdde1730983c9fcb56a52158', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'bac030f99fe693739ddbf1b08920eba178044675' }, h("input", { key: 'd1e3364420ffcf1ec6d89bc574aee67f664244ce', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
+                    evt.preventDefault() }), h("label", { key: '7c092f5e16f10659f6023aab810e4de3f0c44453', slot: "label" })))
+        ];
     }
     static get is() { return "gux-pagination-ellipsis-button"; }
     static get encapsulation() { return "shadow"; }
@@ -123,6 +133,24 @@ export class GuxPaginationEllipsisButton {
                 },
                 "attribute": "total-pages",
                 "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -150,6 +178,12 @@ export class GuxPaginationEllipsisButton {
             }];
     }
     static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchIsDisabled"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",

package/dist/collection/components/stable/gux-pagination/gux-pagination-item-counts/gux-pagination-item-counts.css CHANGED Viewed

@@ -8,4 +8,12 @@ gux-pagination-item-counts .gux-pagination-item-counts-container {
   line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
   white-space: nowrap;
+}
+gux-pagination-item-counts .gux-pagination-item-counts-total {
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontWeight);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  white-space: nowrap;
 }

package/dist/collection/components/stable/gux-pagination/gux-pagination-item-counts/gux-pagination-item-counts.js CHANGED Viewed

@@ -28,10 +28,10 @@ export class GuxPaginationItemCounts {
         }
     }
     render() {
-        return (h("div", { key: '993e166ead4f89df64c6c5be303215dce3bd70ae', class: "gux-pagination-item-counts-container" }, h("span", { key: '0a1088435f50e30ba9e34b27b16270252a861fef', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: '857a63dfc776758edfb75604ca39c11d3b081f27', class: "gux-pagination-item-counts-container" }, h("span", { key: 'b8f255a7a341685d1eef8fec9644270d8542bab9', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), this.getPaginationItemCountsRange()));
+        })), h("span", { key: '78142978920bccef504da82d326108cd3d0de41e', class: "gux-pagination-item-counts-total" }, this.getPaginationItemCountsRange())));
     }
     static get is() { return "gux-pagination-item-counts"; }
     static get originalStyleUrls() {

package/dist/collection/components/stable/gux-pagination/gux-pagination-items-per-page/gux-pagination-items-per-page.css CHANGED Viewed

@@ -24,7 +24,7 @@ gux-pagination-items-per-page .gux-pagination-items-per-page-container gux-dropd
 gux-pagination-items-per-page .gux-pagination-items-per-page-container .gux-pagination-per-page {
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
-  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontWeight);
   line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
 }