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

package/dist/cjs/gux-icon.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 const logError = require('./log-error-d46c02b7.js');
 
 const svgHTMLCache = new Map();

package/dist/cjs/gux-inline-alert.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 require('./get-closest-element-ab4b2eee.js');
 
 const info = "Information alert with message";

package/dist/cjs/gux-list-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const getClosestElement = require('./get-closest-element-ab4b2eee.js');
 
-const guxListItemCss = ":host{width:100%;outline:none}:host([disabled]){pointer-events:none}:host([disabled='false']){pointer-events:auto}::slotted(gux-icon){width:16px;height:16px;margin-right:8px;vertical-align:middle}button{all:unset;box-sizing:border-box;width:100%;min-height:32px;padding:8px 16px;color:#2e394c;word-wrap:break-word;cursor:pointer;border:none;outline:none}button:focus-visible:not(:disabled){color:#fdfdfd;background:#2a60c8}button:hover:not(:disabled){color:#fdfdfd;background:#2754ac}button:active:not(:disabled){color:#fdfdfd;background:#23478f}button:disabled{color:rgba(46, 57, 76, 0.5);cursor:default}";
+const guxListItemCss = ":host{width:100%;outline:none}:host([disabled]){pointer-events:none}:host([disabled=false]){pointer-events:auto}::slotted(gux-icon){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: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){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){background:var(--gse-ui-menu-option-hover-backgroundColor)}button:active:not(:disabled){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{opacity:var(--gse-ui-menu-option-disabled-opacity);cursor:default}";
 
 const GuxListItem = class {
   constructor(hostRef) {

package/dist/cjs/gux-list.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const guxList_service = require('./gux-list.service-763539a2.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 
 const guxListCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}";
 

package/dist/cjs/gux-listbox-multi.cjs.entry.js

@@ -7,7 +7,7 @@ const guxListbox_service = require('./gux-listbox.service-93102b5b.js');
 const index$1 = require('./index-9bbde1aa.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-loading-message.cjs.entry.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0fdb85.js');
+const afterNextRender = require('./after-next-render-a09f528a.js');
+const usage = require('./usage-8d342ca0.js');
+
+/**
+ * Below are the max-widths for the loading component.
+ */
+const SMALL_LOADING_MESSAGE = 160;
+const MEDIUM_LOADING_MESSAGE = 300;
+
+const guxLoadingMessageCss = ".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-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(\"./fonts/roboto-v20-latin-300.eot\");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\");}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(\"./fonts/roboto-v20-latin-regular.eot\");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\");}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url(\"./fonts/roboto-v20-latin-italic.eot\");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\");}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(\"./fonts/roboto-v20-latin-700.eot\");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\");}body{font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}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}.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}:host{display:flex;flex-direction:column;align-items:center;justify-content:center}.gux-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.gux-container slot[name=primary-message]{color:#364154;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}";
+
+const GuxLoadingMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hasAdditionalGuidance = undefined;
+    this.loadingMessageSize = undefined;
+  }
+  updateLoadingMessageSize() {
+    index.readTask(() => {
+      const containerWidth = this.root.clientWidth;
+      if (containerWidth <= SMALL_LOADING_MESSAGE) {
+        this.loadingMessageSize = 'small';
+      }
+      else if (containerWidth <= MEDIUM_LOADING_MESSAGE) {
+        this.loadingMessageSize = 'medium';
+      }
+      else {
+        this.loadingMessageSize = 'large';
+      }
+    });
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+  }
+  componentDidLoad() {
+    if (!this.resizeObserver && window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateLoadingMessageSize();
+      });
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.observe(this.root);
+    }
+    afterNextRender.afterNextRenderTimeout(() => {
+      this.updateLoadingMessageSize();
+    }, 500);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.root);
+    }
+  }
+  render() {
+    return (index.h("div", { class: {
+        'gux-container': true,
+        [`gux-${this.loadingMessageSize}`]: true
+      }, role: "alert", "aria-live": "assertive" }, index.h("slot", { name: "progress" }), index.h("slot", { name: "primary-message" }), index.h("slot", { name: "additional-guidance" })));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxLoadingMessage.style = guxLoadingMessageCss;
+
+exports.gux_loading_message = GuxLoadingMessage;

package/dist/cjs/gux-modal.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 
 const guxModalCss = ":host .gux-modal{position:fixed;inset:0;z-index:var(--gux-zindex-modal, 1);display:flex;align-items:center;justify-content:center;color:#2e394c;background:rgba(32, 41, 55, 0.8)}:host .gux-modal .gux-modal-container{position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:40px;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 8px 24px rgba(32, 41, 55, 0.4)}:host .gux-modal .gux-modal-container.gux-small{width:416px;max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:672px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:940px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 2 * 24px);max-height:calc(100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{padding-bottom:24px;margin:0;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;margin:0 8px 24px;overflow-y:auto}:host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host .gux-modal .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}:host .gux-modal .gux-modal-container .gux-button-footer .gux-left-align-buttons gux-button{padding-right:5px}:host .gux-modal .gux-modal-container .gux-button-footer .gux-right-align-buttons gux-button{padding-left:5px}@media (max-width: 416px){:host .gux-modal .gux-modal-container.gux-small,:host .gux-modal .gux-modal-container.gux-medium,:host .gux-modal .gux-modal-container.gux-large{width:100%;height:100%}}";
 

package/dist/cjs/gux-month-picker-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const index$1 = require('./index-9bbde1aa.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');

package/dist/cjs/gux-notification-toast-legacy.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 
 const guxNotificationToastCss = ".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-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(\"./fonts/roboto-v20-latin-300.eot\");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\");}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(\"./fonts/roboto-v20-latin-regular.eot\");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\");}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url(\"./fonts/roboto-v20-latin-italic.eot\");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\");}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(\"./fonts/roboto-v20-latin-700.eot\");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\");}body{font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}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}.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}:host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;width:294px;padding:16px 8px 16px 16px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-color:#b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;margin:4px}.gux-icon ::slotted(gux-icon){width:24px !important;height:24px !important}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;align-self:auto;justify-content:flex-start;order:0;margin:0 12px 0 8px;color:#2e394c}.gux-content .gux-title,.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0}.gux-content .gux-title{font-family:Roboto, sans-serif;font-weight:400;font-size:14px;line-height:20px}";
 

package/dist/cjs/gux-option-icon.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
 
-const guxOptionIconCss = "gux-option-icon{box-sizing:border-box;display:flex;height:32px;padding:6px 8px;color:#2e394c;word-wrap:break-word;cursor:pointer;align-items:flex-start}gux-option-icon.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-icon.gux-selected{background:#deeaff}gux-option-icon.gux-active,gux-option-icon.gux-hovered:not(:disabled){color:#fdfdfd;background:#2a60c8}gux-option-icon.gux-filtered{display:none}gux-option-icon .gux-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}gux-option-icon gux-icon{flex-shrink:0;width:16px;height:16px;margin-block-start:calc((20px - 16px) / 2);margin-inline-end:8px}";
+const guxOptionIconCss = ":host{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;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;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);gap:var(--gse-ui-menu-option-gap)}:host .gux-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.gux-disabled){pointer-events:none;cursor:default;opacity:var(--gse-ui-menu-option-disabled-opacity)}:host(.gux-selected){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);background:var(--gse-ui-menu-option-selected-backgroundColor)}:host(.gux-active){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)}:host(.gux-hovered:not(:disabled)){background:var(--gse-ui-menu-option-hover-backgroundColor)}:host(.gux-filtered){display:none}:host gux-icon{flex-shrink:0;width:var(--gse-ui-menu-option-startIcon-width);height:var(--gse-ui-menu-option-startIcon-height)}";
 
 const GuxOptionIcon = class {
   constructor(hostRef) {

package/dist/cjs/gux-page-loading-spinner.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 
 const guxPageLoadingSpinnerCss = ":host{display:flex}.gux-spinner{margin:auto}";
 

package/dist/cjs/gux-pagination-buttons-legacy_3.cjs.entry.js

@@ -115,7 +115,7 @@ class GuxPaginationButtonsService {
   }
 }
 
-const guxPaginationButtonsCss = "gux-pagination-buttons{color:#2e394c}gux-pagination-buttons .gux-pagination-buttons-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:flex-end}gux-pagination-buttons .gux-pagination-buttons-container.gux-expanded{justify-content:center}gux-pagination-buttons .gux-pagination-buttons-container>div{flex:0 1 auto;align-self:auto;order:0}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-group{white-space:nowrap}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-group gux-button-slot:not(:first-of-type){margin-left:4px}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;margin:0 16px}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-input-container>div{flex:0 1 auto;align-self:auto;order:0;white-space:nowrap}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input{width:60px;margin:0 8px}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input input{width:inherit;text-align:center}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;margin:0 16px}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button{height:32px;padding:0 4px;margin:0 4px;background:inherit;border:none;border-radius:2px}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current{font-weight:600}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target{color:#2a60c8;cursor:pointer}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-spacer{width:12px}";
+const guxPaginationButtonsLegacyCss = "gux-pagination-buttons-legacy .gux-pagination-buttons-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-items:center;justify-content:flex-end;margin-left:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-buttons-legacy .gux-pagination-buttons-container.gux-expanded{justify-content:center}gux-pagination-buttons-legacy .gux-pagination-buttons-container>div{flex:0 1 auto;align-self:auto;order:0}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-group{white-space:nowrap}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container>div{flex:0 1 auto;align-self:auto;order:0;white-space:nowrap}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input{width:60px}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input input{width:inherit;text-align:center}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);justify-content:center}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button{height:32px;padding-left:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);padding-right:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);margin-left:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);margin-right:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);background:inherit;border:none}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible{outline:var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);outline-offset:var(--gse-semantic-focusRing-offset);border-radius:calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset))}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current{background-color:var(--gse-ui-button-ghost-active-backgroundColor);border-radius:var(--gse-ui-button-borderRadius);padding-left:var(--gse-ui-dataTableItems-tablePagination-padding);padding-right:var(--gse-ui-dataTableItems-tablePagination-padding);font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-button-ghost-default-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target{padding-left:var(--gse-ui-dataTableItems-tablePagination-padding);padding-right:var(--gse-ui-dataTableItems-tablePagination-padding);font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-button-ghost-default-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);cursor:pointer}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target:hover{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor);border-radius:var(--gse-ui-button-borderRadius)}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-spacer{width:var(--gse-ui-dataTableItems-tablePagination-padding)}";
 
 const GuxPaginationButtonsLegacy = class {
   constructor(hostRef) {
@@ -188,11 +188,11 @@ const GuxPaginationButtonsLegacy = class {
     this.i18n = await index$1.buildI18nForComponent(this.root, paginationResources$2);
   }
   render() {
-    return (index.h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot", { accent: "secondary" }, index.h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), index.h("gux-button-slot", { accent: "secondary" }, index.h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot", { accent: "secondary" }, index.h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), index.h("gux-button-slot", { accent: "secondary" }, index.h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
+    return (index.h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
   }
   get root() { return index.getElement(this); }
 };
-GuxPaginationButtonsLegacy.style = guxPaginationButtonsCss;
+GuxPaginationButtonsLegacy.style = guxPaginationButtonsLegacyCss;
 
 const itemCountDisplay = "{firstItem, number} - {lastItem, number}";
 const totalItems = " of {totalItems, number}";
@@ -201,7 +201,7 @@ const paginationResources$1 = {
 	totalItems: totalItems
 };
 
-const guxPaginationItemCountsCss = "gux-pagination-item-counts{color:#2e394c}gux-pagination-item-counts .gux-pagination-item-counts-container{white-space:nowrap}gux-pagination-item-counts .gux-pagination-item-counts-container .gux-pagination-item-counts-range{font-weight:bold}";
+const guxPaginationItemCountsLegacyCss = "gux-pagination-item-counts-legacy .gux-pagination-item-counts-container{display:flex;flex-direction:row;white-space:nowrap;gap:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}";
 
 const GuxPaginationItemCountsLegacy = class {
   constructor(hostRef) {
@@ -233,7 +233,7 @@ const GuxPaginationItemCountsLegacy = class {
   }
   get root() { return index.getElement(this); }
 };
-GuxPaginationItemCountsLegacy.style = guxPaginationItemCountsCss;
+GuxPaginationItemCountsLegacy.style = guxPaginationItemCountsLegacyCss;
 
 const perPage = "per page";
 const itemsPerPage = "Items per page";
@@ -244,7 +244,7 @@ const paginationResources = {
 	rangeSelected: rangeSelected
 };
 
-const guxPaginationItemsPerPageCss = "gux-pagination-items-per-page{color:#2e394c}gux-pagination-items-per-page .gux-pagination-items-per-page-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}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 .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker{margin:0 8px 0 16px}gux-pagination-items-per-page .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown{display:inline-block;width:64px}";
+const guxPaginationItemsPerPageLegacyCss = "gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container>div{flex:0 1 auto;align-self:auto;order:0;white-space:nowrap}gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown{display:inline-block;width:64px}gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container .gux-pagination-per-page{font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}";
 
 const GuxPaginationItemsPerPageLegacy = class {
   constructor(hostRef) {
@@ -266,11 +266,11 @@ const GuxPaginationItemsPerPageLegacy = class {
       }) }, index.h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, index.h("gux-option", { value: "25" }, "25"), index.h("gux-option", { value: "50" }, "50"), index.h("gux-option", { value: "75" }, "75"), index.h("gux-option", { value: "100" }, "100"))));
   }
   render() {
-    return (index.h("div", { class: "gux-pagination-items-per-page-container" }, index.h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), index.h("div", null, this.i18n('perPage'))));
+    return (index.h("div", { class: "gux-pagination-items-per-page-container" }, index.h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), index.h("div", { class: "gux-pagination-per-page" }, this.i18n('perPage'))));
   }
   get root() { return index.getElement(this); }
 };
-GuxPaginationItemsPerPageLegacy.style = guxPaginationItemsPerPageCss;
+GuxPaginationItemsPerPageLegacy.style = guxPaginationItemsPerPageLegacyCss;
 
 exports.gux_pagination_buttons_legacy = GuxPaginationButtonsLegacy;
 exports.gux_pagination_item_counts_legacy = GuxPaginationItemCountsLegacy;

package/dist/cjs/{gux-pagination-buttons-beta_2.cjs.entry.js → gux-pagination-buttons_3.cjs.entry.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
-const en = require('./en-b3076cac.js');
+const en = require('./en-2a12d7c4.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 require('./get-closest-element-ab4b2eee.js');
 
@@ -143,9 +143,9 @@ function getSimpleList(currentPage, totalPages) {
   }
 }
 
-const guxPaginationButtonsBetaCss = "gux-pagination-buttons-beta .gux-pagination-buttons-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);justify-content:flex-end;margin-left:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-buttons-beta .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{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{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:nowrap;align-content:stretch;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);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{min-width:28px;min-height:24px;padding-left:var(--gse-ui-dataTableItems-tablePagination-padding);padding-right:var(--gse-ui-dataTableItems-tablePagination-padding);margin:0;background:inherit;border:none;font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}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{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{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{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{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor);border-radius:var(--gse-ui-button-borderRadius)}";
+const guxPaginationButtonsCss = "gux-pagination-buttons .gux-pagination-buttons-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);justify-content:flex-end;margin-left:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-buttons .gux-pagination-buttons-container>div{flex:0 1 auto;align-self:auto;order:0}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 .gux-pagination-buttons-container .gux-pagination-buttons-list-container{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:nowrap;align-content:stretch;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-items:center;justify-content: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-left:var(--gse-ui-dataTableItems-tablePagination-padding);padding-right:var(--gse-ui-dataTableItems-tablePagination-padding);margin:0;background:inherit;border:none;font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}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 .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 .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)}";
 
-const GuxPaginationButtonsBeta = class {
+const GuxPaginationButtons = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.internalcurrentpagechange = index.createEvent(this, "internalcurrentpagechange", 3);
@@ -203,18 +203,18 @@ const GuxPaginationButtonsBeta = class {
   }
   get root() { return index.getElement(this); }
 };
-GuxPaginationButtonsBeta.style = guxPaginationButtonsBetaCss;
+GuxPaginationButtons.style = guxPaginationButtonsCss;
 
 const itemCountDisplay = "{firstItem, number} - {lastItem, number}";
 const totalItems = " of {totalItems, number}";
-const paginationResources = {
+const paginationResources$1 = {
 	itemCountDisplay: itemCountDisplay,
 	totalItems: totalItems
 };
 
-const guxPaginationItemCountsBetaCss = "gux-pagination-item-counts-beta .gux-pagination-item-counts-container{display:flex;flex-direction:row;gap:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);white-space:nowrap;font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}gux-pagination-item-counts-beta .gux-pagination-item-counts-container .gux-pagination-item-counts-range{font-weight:bold}";
+const guxPaginationItemCountsCss = "gux-pagination-item-counts .gux-pagination-item-counts-container{display:flex;flex-direction:row;gap:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);white-space:nowrap;font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}";
 
-const GuxPaginationItemCountsBeta = class {
+const GuxPaginationItemCounts = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.totalItems = 0;
@@ -234,7 +234,7 @@ const GuxPaginationItemCountsBeta = class {
     return Math.min(this.currentPage * this.itemsPerPage, this.totalItems);
   }
   async componentWillLoad() {
-    this.i18n = await index$1.buildI18nForComponent(this.root, paginationResources);
+    this.i18n = await index$1.buildI18nForComponent(this.root, paginationResources$1);
   }
   getPaginationItemCountsRange() {
     if (this.totalItems) {
@@ -249,7 +249,45 @@ const GuxPaginationItemCountsBeta = class {
   }
   get root() { return index.getElement(this); }
 };
-GuxPaginationItemCountsBeta.style = guxPaginationItemCountsBetaCss;
+GuxPaginationItemCounts.style = guxPaginationItemCountsCss;
+
+const perPage = "per page";
+const itemsPerPage = "Items per page";
+const rangeSelected = "Items per page dropdown, {range} selected";
+const paginationResources = {
+	perPage: perPage,
+	itemsPerPage: itemsPerPage,
+	rangeSelected: rangeSelected
+};
+
+const guxPaginationItemsPerPageCss = "gux-pagination-items-per-page .gux-pagination-items-per-page-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-items:center;justify-content:center}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 .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown{display:inline-block;width:64px}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 .gux-pagination-items-per-page-container .gux-pagination-per-page{font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}";
+
+const GuxPaginationItemsPerPage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.internalitemsperpagechange = index.createEvent(this, "internalitemsperpagechange", 3);
+    this.itemsPerPage = 25;
+  }
+  handleChange(event) {
+    event.stopPropagation();
+    const newItemsPerPageValue = parseInt(this.dropdownElement.value, 10);
+    this.internalitemsperpagechange.emit(newItemsPerPageValue);
+  }
+  async componentWillLoad() {
+    this.i18n = await index$1.buildI18nForComponent(this.root, paginationResources);
+  }
+  getDropdown() {
+    return (index.h("gux-dropdown", { ref: el => (this.dropdownElement = el), value: `${this.itemsPerPage}`, "aria-label": this.i18n('rangeSelected', {
+        range: this.itemsPerPage
+      }) }, index.h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, index.h("gux-option", { value: "25" }, "25"), index.h("gux-option", { value: "50" }, "50"), index.h("gux-option", { value: "75" }, "75"), index.h("gux-option", { value: "100" }, "100"))));
+  }
+  render() {
+    return (index.h("div", { class: "gux-pagination-items-per-page-container" }, index.h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), index.h("div", { class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxPaginationItemsPerPage.style = guxPaginationItemsPerPageCss;
 
-exports.gux_pagination_buttons_beta = GuxPaginationButtonsBeta;
-exports.gux_pagination_item_counts_beta = GuxPaginationItemCountsBeta;
+exports.gux_pagination_buttons = GuxPaginationButtons;
+exports.gux_pagination_item_counts = GuxPaginationItemCounts;
+exports.gux_pagination_items_per_page = GuxPaginationItemsPerPage;

package/dist/cjs/gux-pagination-cursor.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 const index$1 = require('./index-9bbde1aa.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-pagination-legacy.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 
-const guxPaginationCss = ":host{display:block;border-top:1px solid #e2e6ee}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:32px;margin-top:12px}.gux-pagination-container .gux-pagination-info{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0;margin-left:16px}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
+const guxPaginationLegacyCss = ":host{display:block;border-top:var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color)}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:var(--gse-ui-dataTableItems-cell-tablePagination-height);padding:var(--gse-ui-dataTableItems-tablePagination-padding);background-color:var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor)}.gux-pagination-container .gux-pagination-info{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
 
 const GuxPaginationLegacy = class {
   constructor(hostRef) {
@@ -71,6 +71,6 @@ const GuxPaginationLegacy = class {
   }
   get root() { return index.getElement(this); }
 };
-GuxPaginationLegacy.style = guxPaginationCss;
+GuxPaginationLegacy.style = guxPaginationLegacyCss;
 
 exports.gux_pagination_legacy = GuxPaginationLegacy;

package/dist/cjs/{gux-pagination-beta.cjs.entry.js → gux-pagination.cjs.entry.js}

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 
-const guxPaginationBetaCss = ":host{display:block;border-top:var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color)}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:var(--gse-ui-dataTableItems-cell-tablePagination-height);padding:var(--gse-ui-dataTableItems-tablePagination-padding);background-color:var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor)}.gux-pagination-container .gux-pagination-info{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-spacer{flex:1 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
+const guxPaginationCss = ":host{display:block;border-top:var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color)}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:var(--gse-ui-dataTableItems-cell-tablePagination-height);padding:var(--gse-ui-dataTableItems-tablePagination-padding);background-color:var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor)}.gux-pagination-container .gux-pagination-info{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-spacer{flex:1 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
 
 const minAdvancedSpacerWidth = 24;
-const GuxPaginationBeta = class {
+const GuxPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.guxpaginationchange = index.createEvent(this, "guxpaginationchange", 7);
@@ -92,10 +92,10 @@ const GuxPaginationBeta = class {
     }, 500);
   }
   render() {
-    return (index.h("div", { class: "gux-pagination-container" }, index.h("div", { class: "gux-pagination-info" }, index.h("gux-pagination-item-counts-beta", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (index.h("gux-pagination-items-per-page-beta", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), index.h("div", { class: "gux-pagination-spacer" }), index.h("div", { class: "gux-pagination-change" }, index.h("gux-pagination-buttons-beta", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+    return (index.h("div", { class: "gux-pagination-container" }, index.h("div", { class: "gux-pagination-info" }, index.h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (index.h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), index.h("div", { class: "gux-pagination-spacer" }), index.h("div", { class: "gux-pagination-change" }, index.h("gux-pagination-buttons", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
   }
   get root() { return index.getElement(this); }
 };
-GuxPaginationBeta.style = guxPaginationBetaCss;
+GuxPagination.style = guxPaginationCss;
 
-exports.gux_pagination_beta = GuxPaginationBeta;
+exports.gux_pagination = GuxPagination;

package/dist/cjs/gux-phone-input-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 const index$1 = require('./index-9bbde1aa.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');

package/dist/cjs/gux-popover-list.cjs.entry.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-2ed3685b.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 const findElementById = require('./find-element-by-id-ecf0efa3.js');
 
-const guxPopoverListCss = ".gux-popover-wrapper{position:absolute;top:0;left:0;z-index:var(--gux-zindex-popover, 2);display:inline-block;padding:8px 0;color:#2e394c;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;width:10px;height:10px;background:inherit}.gux-popover-wrapper[data-placement='bottom'] .gux-arrow,.gux-popover-wrapper[data-placement='bottom-start'] .gux-arrow,.gux-popover-wrapper[data-placement='bottom-end'] .gux-arrow{border-top:1px solid #b4bccb;border-left:1px solid #b4bccb}.gux-popover-wrapper[data-placement='top'] .gux-arrow,.gux-popover-wrapper[data-placement='top-start'] .gux-arrow,.gux-popover-wrapper[data-placement='top-end'] .gux-arrow{border-right:1px solid #b4bccb;border-bottom:1px solid #b4bccb}.gux-popover-wrapper[data-placement='left'] .gux-arrow,.gux-popover-wrapper[data-placement='left-start'] .gux-arrow,.gux-popover-wrapper[data-placement='left-end'] .gux-arrow{border-top:1px solid #b4bccb;border-right:1px solid #b4bccb}.gux-popover-wrapper[data-placement='right'] .gux-arrow,.gux-popover-wrapper[data-placement='right-start'] .gux-arrow,.gux-popover-wrapper[data-placement='right-end'] .gux-arrow{border-bottom:1px solid #b4bccb;border-left:1px solid #b4bccb}";
+const guxPopoverListCss = ".gux-popover-wrapper{position:absolute;top:0;left:0;z-index:var(--gux-zindex-popover, 2);display:inline-block;padding:8px 0px;background-color:var(--gse-ui-popover-backgroundColor);border-radius:var(--gse-ui-popover-borderRadius);box-shadow:var(--gse-ui-popover-boxShadow-x) var(--gse-ui-popover-boxShadow-y) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color)}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;width:var(--gse-ui-popover-anchor-width);height:var(--gse-ui-popover-anchor-width);background:var(--gse-ui-popover-backgroundColor)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/gux-popup.cjs.entry.js

@@ -10,7 +10,7 @@ function hasParentElement(selector, baseElement = this) {
   return Boolean(getClosestElement.getClosestElement(selector, baseElement));
 }
 
-const guxPopupCss = ".gux-target-container.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-popup-container{position:fixed;background-color:white;width:max-content;visibility:hidden}.gux-popup-container.gux-expanded{visibility:visible}.gux-sr-only-clip:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+const guxPopupCss = ".gux-target-container.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-popup-container{position:fixed;background-color:white;z-index:var(--gux-zindex-popup, 1);width:max-content;visibility:hidden}.gux-popup-container.gux-expanded{visibility:visible}.gux-sr-only-clip:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
 
 const GuxPopup = class {
   constructor(hostRef) {

package/dist/cjs/gux-radial-loading.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 require('./get-closest-element-ab4b2eee.js');
 
 const loading = "Loading";

package/dist/cjs/gux-radial-progress.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 const logError = require('./log-error-d46c02b7.js');
 
 const OVERALL_SIZE = 48; // Linked to --gse-ui-progressAndLoading-spinner-large

package/dist/cjs/gux-rating.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 const clamp = require('./clamp-1bb96117.js');
-const usage = require('./usage-a9283e9a.js');
+const usage = require('./usage-8d342ca0.js');
 const logError = require('./log-error-d46c02b7.js');
 
 const guxRatingCss = ":host{display:inline-flex;user-select:none}:host(:host:focus-visible){outline:var(--gse-ui-focus-width) var(--gse-ui-focus-style) var(--gse-ui-focus-color);outline-offset:1px;box-shadow:0 0 0 1px var(--gse-ui-focus-style)}.gux-rating-star-container{color:var(--gse-ui-ui--rating-default-color)}.gux-rating-star-container.gux-disabled{pointer-events:none;color:var(--gse-ui-rating-disabled-color);opacity:var(--gse-ui-rating-disabled-opacity)}.gux-rating-star-container gux-icon{width:var(--gse-ui-rating-size);height:var(--gse-ui-rating-size);color:var(--gse-ui-rating-default-color)}.gux-rating-star-container gux-icon:hover:not(.gux-disabled){color:var(--gse-ui-rating-hover-color)}";