npm - genesys-spark-components - Versions diffs - 4.0.0-beta.50 → 4.0.0-beta.52 - Mend

genesys-spark-components 4.0.0-beta.50 → 4.0.0-beta.52

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 (408) hide show

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

@@ -10,9 +10,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
@@ -42,7 +41,7 @@
 }
 .gux-field.gux-input-field {
-  height: calc(var(--gse-ui-formControl-input-textfield-height) - var(--gse-ui-formControl-input-default-border-width) * 2);
+  height: var(--gse-ui-formControl-input-contentText-lineHeight);
 }
 .gux-field .gux-field-content {
   --gux-zindex-tooltip: 3;
@@ -50,11 +49,10 @@
   flex: 1 1 0;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   min-width: 0;
-  height: 60%;
+  height: var(--gse-ui-formControl-input-contentText-lineHeight);
 }
 .gux-field .gux-field-content .gux-filter,
 .gux-field .gux-field-content .gux-selected-option,
@@ -121,7 +119,7 @@
 }
 .gux-target-container-expanded .gux-field-button {
   width: auto;
-  height: calc(var(--gse-ui-formControl-input-textfield-height) - var(--gse-ui-formControl-input-default-border-width) * 2);
+  height: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
   background: inherit;
   border: none;

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

@@ -6,9 +6,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
-  justify-content: flex-start;
   height: var(--gse-ui-tag-height);
   padding: var(--gse-ui-tag-removable-padding);
   font-family: var(--gse-ui-tag-text-fontFamily);
@@ -30,9 +29,8 @@
 .gux-tag .gux-tag-remove-button {
   all: unset;
   display: flex;
-  align-content: center;
+  place-content: center center;
   align-items: center;
-  justify-content: center;
   margin-left: var(--gse-ui-tag-removable-gap);
 }
 .gux-tag .gux-tag-remove-button:not(:disabled):hover {

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

@@ -22,9 +22,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
@@ -46,7 +45,7 @@
 }
 .gux-field.gux-input-field {
-  height: calc(var(--gse-ui-formControl-input-textfield-height) - var(--gse-ui-formControl-input-default-border-width) * 2);
+  height: var(--gse-ui-formControl-input-contentText-lineHeight);
 }
 .gux-field .gux-field-content {
   position: relative;
@@ -54,11 +53,10 @@
   flex: 1 1 0;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   min-width: 0;
-  height: 60%;
+  height: var(--gse-ui-formControl-input-contentText-lineHeight);
 }
 .gux-field .gux-field-content .gux-filter,
 .gux-field .gux-field-content .gux-selected-option,
@@ -136,7 +134,7 @@
 }
 .gux-target-container-expanded .gux-field-button {
   width: auto;
-  height: calc(var(--gse-ui-formControl-input-textfield-height) - var(--gse-ui-formControl-input-default-border-width) * 2);
+  height: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
   background: inherit;
   border: none;

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.js CHANGED Viewed

@@ -329,9 +329,10 @@ export class GuxDropdownMulti {
       : this.i18n('textInputResults');
   }
   renderTag() {
-    const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
-    if (selectedListboxOptionElement === null || selectedListboxOptionElement === void 0 ? void 0 : selectedListboxOptionElement.length) {
-      return (h("gux-dropdown-multi-tag", { disabled: this.disabled, "number-selected": selectedListboxOptionElement.length }));
+    var _a;
+    const selectedValues = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+    if (selectedValues.length) {
+      return (h("gux-dropdown-multi-tag", { disabled: this.disabled, "number-selected": selectedValues.length }));
     }
   }
   renderFilterInputField() {

package/dist/collection/components/stable/gux-dropdown-multi/tests/gux-dropdown-multi.e2e.js CHANGED Viewed

@@ -199,18 +199,6 @@ describe('gux-dropdown-multi', () => {
       expect(listboxItems.length).toBe(5);
       expect(listboxItems[0].textContent).toEqual('Ant');
     });
-    describe('adding option to dropdown', () => {
-      it('renders tag when option is added to dropdown that value set', async () => {
-        const { page } = await setupPage(valueSetDropdown);
-        let tagElements = await page.findAll('pierce/.gux-tag');
-        expect(tagElements.length).toBe(0);
-        await addNewOption(page);
-        await page.waitForChanges();
-        tagElements = await page.findAll('pierce/.gux-tag');
-        expect(tagElements.length).toBe(1);
-        expect(tagElements[0].textContent).toEqual('1');
-      });
-    });
     describe('with the create option set', () => {
       it('provides the option to create items', async () => {
         const { page, dropdown } = await setupPage(creatableDropdown);
@@ -266,16 +254,6 @@ async function inputFilter(page, dropdown, text) {
 async function getCreateAction(dropdown) {
   return await dropdown.find('gux-create-option');
 }
-async function addNewOption(page) {
-  await page.evaluate(() => {
-    const listboxElement = document.querySelector('gux-listbox-multi');
-    const element = document.createElement('gux-option-multi');
-    element.setAttribute('value', 'newoption');
-    element.innerText = 'newoption';
-    listboxElement.appendChild(element);
-  });
-  await page.waitForChanges();
-}
 async function addNewCustomOption(page) {
   await page.evaluate(() => {
     const listboxElement = document.querySelector('gux-listbox-multi');
@@ -297,13 +275,3 @@ const creatableDropdown = `
   </gux-listbox-multi>
 </gux-dropdown-multi>
 `;
-const valueSetDropdown = `
-<gux-dropdown-multi lang="en" value="newoption">
-  <gux-listbox-multi aria-label="Animals">
-    <gux-create-option slot="create"></gux-create-option>
-    <gux-option-multi value="ant">Ant</gux-option-multi>
-    <gux-option-multi value="bear">Bear</gux-option-multi>
-    <gux-option-multi value="cat">Cat</gux-option-multi>
-  </gux-listbox-multi>
-</gux-dropdown-multi>
-`;

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.css CHANGED Viewed

@@ -8,9 +8,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
-  justify-content: flex-start;
   width: var(--gse-ui-flyoutMenu-width);
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);

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

@@ -23,9 +23,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -54,9 +53,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -139,7 +137,7 @@
 }
 ::slotted(input[type=checkbox]:focus-visible) {
-  border-radius: 2px;
+  border-radius: var(--gse-ui-checkbox-focus-borderRadiusSmall);
   outline: var(--gse-ui-checkbox-focus-border-width) var(--gse-ui-checkbox-focus-border-style) var(--gse-ui-checkbox-focus-border-color);
   outline-offset: var(--gse-ui-checkbox-focus-offset);
 }

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -131,10 +129,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
   align-self: auto;
-  justify-content: center;
   order: 0;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);

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

@@ -13,9 +13,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -68,9 +67,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -130,10 +128,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
   align-self: auto;
-  justify-content: center;
   order: 0;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);

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

@@ -12,9 +12,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -24,9 +24,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -55,9 +54,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -35,9 +35,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -89,9 +88,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -138,9 +136,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-slider-gap);
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
-  justify-content: flex-start;
   height: 32px;
   font-size: var(--gse-ui-slider-label-text-fontSize);
 }

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -129,10 +127,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
   align-self: auto;
-  justify-content: center;
   order: 0;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -124,9 +122,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -131,9 +129,8 @@ slot[name=suffix] {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   padding: var(--gse-ui-formControl-input-padding);

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -13,9 +13,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -68,9 +67,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -13,9 +13,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -68,9 +67,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
 }

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

@@ -4,8 +4,7 @@
   max-height: 20rem;
   padding: var(--gse-ui-menu-padding);
   margin: 0;
-  overflow-x: visible;
-  overflow-y: auto;
+  overflow: visible auto;
   background: var(--gse-ui-menu-backgroundColor);
   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);
@@ -22,9 +21,8 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   text-align: center;
 }
 .gux-message-container .gux-no-matches {

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

@@ -4,9 +4,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-menu-option-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
   font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);

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

@@ -4,9 +4,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-menu-option-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
   font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);

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

@@ -16,9 +16,8 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;

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

@@ -3,9 +3,8 @@ gux-pagination-buttons .gux-pagination-buttons-container {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch flex-end;
   align-items: center;
-  justify-content: flex-end;
   margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 gux-pagination-buttons .gux-pagination-buttons-container > div {
@@ -25,9 +24,8 @@ gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons
   flex-shrink: 0;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch center;
   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 {

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

@@ -3,9 +3,8 @@ gux-pagination-items-per-page .gux-pagination-items-per-page-container {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
 }
 gux-pagination-items-per-page .gux-pagination-items-per-page-container > div {
   flex: 0 1 auto;