genesys-spark-components 4.117.1 → 4.119.0

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-style-list-item/gux-rich-style-list-item.css

@@ -32,14 +32,14 @@ button {
   color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
-  background-color: var(--gse-ui-menu-option-default-backgroundColor);
-  border: none;
   outline: none;
   outline-offset: calc(var(--gse-ui-menu-option-focus-border-width) * -1);
+  background-color: var(--gse-ui-menu-option-default-backgroundColor);
+  border: none;
 }
 button:focus-visible:not(:disabled) {
-  border-radius: 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);
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
 }
 button:hover:not(:disabled) {
   background: var(--gse-ui-menu-option-hover-backgroundColor);

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.css

@@ -7,7 +7,7 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.css

@@ -50,9 +50,9 @@ button {
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 .gux-container .gux-segmented-control-item:hover {
   color: var(--gse-ui-segmentedControl-button-hover-foregroundColor);
@@ -72,10 +72,10 @@ button {
 .gux-container .gux-segmented-control-item:focus-visible {
   position: relative;
   z-index: var(--gse-semantic-zIndex-showFocus);
+  outline-offset: var(--gse-ui-segmentedControl-focus-offset);
   border-radius: var(--gse-ui-segmentedControl-borderRadius);
   outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
   outline-offset: var(--gse-semantic-focusOutline-offset);
-  outline-offset: var(--gse-ui-segmentedControl-focus-offset);
 }
 .gux-container .gux-segmented-control-item .gux-icon slot[name=icon]::slotted(gux-icon) {
   inline-size: var(--gse-ui-icon-small-size);

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.css

@@ -31,9 +31,9 @@
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   -webkit-appearance: none;
   appearance: none;
+  outline: none;
   border: var(--gse-ui-selectorCard-unselected-border-width) var(--gse-ui-selectorCard-unselected-border-style) var(--gse-ui-selectorCard-unselected-border-color);
   border-radius: var(--gse-ui-selectorCard-simple-borderRadius);
-  outline: none;
 }
 ::slotted(input[type=radio])::before,
 ::slotted(input[type=checkbox])::before {
@@ -44,9 +44,9 @@
   grid-area: 1/1;
   inline-size: var(--gse-ui-radioButton-icon-width);
   block-size: var(--gse-ui-radioButton-icon-height);
+  vertical-align: middle;
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   text-align: center;
-  vertical-align: middle;
   content: "";
 }
 

package/dist/collection/components/beta/gux-tooltip-base/gux-tooltip-base.css

@@ -4,7 +4,6 @@
   display: none;
   inline-size: max-content;
   max-inline-size: 250px;
-  pointer-events: none;
   border-radius: var(--gse-ui-tooltip-borderRadius);
   box-shadow: var(--gse-ui-tooltip-boxShadow);
   opacity: 0;
@@ -14,7 +13,6 @@
   display: block;
   animation-name: fade-in;
   animation-duration: 250ms;
-  animation-delay: 350ms;
   animation-fill-mode: forwards;
 }
 
@@ -30,6 +28,7 @@
   font-weight: var(--gse-ui-tooltip-text-fontWeight);
   line-height: var(--gse-ui-tooltip-text-lineHeight);
   color: var(--gse-ui-tooltip-light-foregroundColor);
+  pointer-events: none;
   background-color: var(--gse-ui-tooltip-light-backgroundColor);
   border: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
   border-radius: var(--gse-ui-tooltip-borderRadius);

package/dist/collection/components/beta/gux-tooltip-base/gux-tooltip-base.js

@@ -34,6 +34,12 @@ export class GuxTooltipBase {
             this.hide();
         }
     }
+    handlePointerenter() {
+        this.show();
+    }
+    handlePointerleave() {
+        this.hide();
+    }
     /*
      * Show tooltip
      */
@@ -80,16 +86,19 @@ export class GuxTooltipBase {
         });
     }
     show() {
+        clearTimeout(this.hideDelayTimeout);
         this.isShown = true;
         afterNextRender(() => {
             this.runUpdatePosition();
         });
     }
     hide() {
-        if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-        this.isShown = false;
+        this.hideDelayTimeout = setTimeout(() => {
+            this.isShown = false;
+            if (this.cleanupUpdatePosition) {
+                this.cleanupUpdatePosition();
+            }
+        }, 350);
     }
     setForElement() {
         if (this.forElement) {
@@ -123,10 +132,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '268001423213ce578dffcff3311505f6fb3de012', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: '574b792c9ff1668b32fad2fdf9314eb64e1e57ba', class: {
+        return (h(Host, { key: 'bd1de270635ad0b5a20313f821d28c86020ec7ca', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: '925d6d504101a29991630ac8f02b9c179c258079', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: 'c3d4cf2c5879e2ab1b845327b31fc274414219f6', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: '14ce53ff67fe39be22f8a0d042657ee864d5be76', name: "content" }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -346,6 +355,18 @@ export class GuxTooltipBase {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "pointerenter",
+                "method": "handlePointerenter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointerleave",
+                "method": "handlePointerleave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }];
     }
 }

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

@@ -16,10 +16,10 @@ gux-popup .gux-select-field a.gux-select-input {
   inset: 0;
   padding: 6px 24px 6px 12px;
   overflow: hidden;
-  color: #2e394c;
-  text-decoration: none;
   text-overflow: ellipsis;
+  color: #2e394c;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
   background-color: #f6f7f9;
   background-image: none;

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons-legacy.css

@@ -58,9 +58,9 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-
   border: none;
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible {
-  border-radius: calc(var(--gse-semantic-focusOutline-sm-borderRadius) - var(--gse-semantic-focusOutline-offset));
   outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-ui-color-focus);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border-radius: calc(var(--gse-semantic-focusOutline-sm-borderRadius) - var(--gse-semantic-focusOutline-offset));
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current {
   padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.css

@@ -12,9 +12,9 @@ gux-switch-item > .gux-switch-item {
   font: unset;
   color: #2e394c;
   text-align: center;
+  outline: none;
   background: none;
   border: none;
-  outline: none;
 }
 gux-switch-item > .gux-switch-item > gux-icon svg {
   fill: #99a4b8;

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.css

@@ -76,8 +76,8 @@ section.gux-disabled > * {
   margin-inline-start: var(--gse-ui-accordion-header-gap);
   line-height: 0;
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-closed);
-  transition: transform 0.5s ease;
   transform-origin: center;
+  transition: transform 0.5s ease;
 }
 .gux-header .gux-header-icon.gux-arrow-position-start {
   order: -1;
@@ -88,9 +88,9 @@ section.gux-disabled > * {
   transform: rotate(-180deg);
 }
 .gux-header:focus-visible {
-  border-radius: var(--gse-ui-accordion-menuItem-focus-borderRadius);
   outline: var(--gse-ui-accordion-focusBorder-width) var(--gse-ui-accordion-focusBorder-style) var(--gse-ui-accordion-focusBorder-color);
   outline-offset: var(--gse-ui-accordion-focus-offset-gap);
+  border-radius: var(--gse-ui-accordion-menuItem-focus-borderRadius);
 }
 .gux-header:hover .gux-header-icon {
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-hover);

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

@@ -26,9 +26,9 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 .gux-badge.gux-info {
   color: var(--gse-ui-badge-info-regular-foregroundColor);

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

@@ -41,8 +41,8 @@ button {
   block-size: var(--gse-ui-button-default-height);
   padding: var(--gse-ui-button-default-padding);
   overflow: hidden;
-  color: var(--gse-ui-button-secondary-default-foregroundColor);
   text-overflow: ellipsis;
+  color: var(--gse-ui-button-secondary-default-foregroundColor);
   white-space: nowrap;
   pointer-events: auto;
   cursor: pointer;

package/dist/collection/components/stable/gux-button-slot/gux-button-slot.css

@@ -15,8 +15,8 @@
   block-size: var(--gse-ui-button-default-height);
   padding: var(--gse-ui-button-default-padding);
   overflow: hidden;
-  color: var(--gse-ui-button-secondary-default-foregroundColor);
   text-overflow: ellipsis;
+  color: var(--gse-ui-button-secondary-default-foregroundColor);
   white-space: nowrap;
   pointer-events: auto;
   cursor: pointer;

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

@@ -24,9 +24,9 @@
   position: absolute;
   color: var(--gse-ui-calendarMenu-header-foregroundColor);
   cursor: pointer;
+  outline: none;
   background: none;
   border: none;
-  outline: none;
 }
 .gux-calendar .gux-header button:focus-visible {
   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);
@@ -64,10 +64,10 @@
 .gux-calendar .gux-content table {
   inline-size: var(--gse-ui-calendarMenu-day-input-width);
   text-align: start;
-  table-layout: fixed;
-  border-spacing: 0;
   -ms-user-select: none;
   user-select: none;
+  table-layout: fixed;
+  border-spacing: 0;
 }
 .gux-calendar .gux-content table:not(:last-child) {
   padding-inline-end: 24px;

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.css

@@ -70,7 +70,7 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager.css

@@ -23,7 +23,7 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }

package/dist/collection/components/stable/gux-content-search/gux-content-search.css

@@ -14,25 +14,25 @@
   flex-basis: 100%;
   inline-size: 100%;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-search-counter-text-fontFamily);
   font-size: var(--gse-ui-search-counter-text-fontSize);
   font-weight: var(--gse-ui-search-counter-text-fontWeight);
   line-height: var(--gse-ui-search-counter-text-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
-  text-overflow: ellipsis;
   white-space: nowrap;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: 0;
   border-radius: 0;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-populatedColor);
 }
 ::slotted(input).gux-focused, ::slotted(input):focus, ::slotted(input):focus-visible {
-  border: 0;
   outline: none;
+  border: 0;
   box-shadow: none;
 }
 
@@ -60,10 +60,10 @@
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-content-search:focus-visible, .gux-content-search:focus-within {
-  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-focusOutline-offset);
+  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);
 }
 .gux-content-search:not(:disabled):not(.gux-disabled):hover {
   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);
@@ -99,10 +99,10 @@
   overflow: hidden;
   color: var(--gse-ui-search-counter-default-foregroundColor);
   cursor: pointer;
+  outline: none;
   background: none;
   border: none;
   border-radius: var(--gse-ui-button-borderRadius);
-  outline: none;
 }
 .gux-content-search .gux-content-control-panel button:disabled {
   pointer-events: none;

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.css

@@ -31,9 +31,9 @@ button {
   visibility: visible;
 }
 .gux-copy-to-clipboard-wrapper .gux-copy-content gux-icon[icon-name="fa/copy-regular"] {
+  visibility: hidden;
   flex-shrink: 0;
   padding: var(--gse-ui-copyToClipboard-iconContainer-padding);
-  visibility: hidden;
   background-color: var(--gse-ui-copyToClipboard-label-active-backgroundColor);
   border-radius: var(--gse-ui-copyToClipboard-label-borderRadius);
 }

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

@@ -67,16 +67,16 @@
   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);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input:focus-within {
-  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-focusOutline-offset);
-}
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input.gux-active {
   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);
+}
+.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input.gux-active {
   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-focusOutline-offset);
+  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);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input {
   box-sizing: border-box;
@@ -97,9 +97,9 @@
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
+  outline: none;
   background-color: transparent;
   border: none;
-  outline: none;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -118,19 +118,19 @@
   order: 0;
   padding: 0;
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
+  outline: none;
   background: transparent;
   border: none;
   border-radius: var(--gse-ui-actionButton-borderRadius);
-  outline: none;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:focus-within {
-  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-focusOutline-offset);
+  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-offset: var(--gse-ui-datePicker-focusCalendar-gap);
   border: none;
   border-radius: var(--gse-ui-calendarMenu-month-calendarButton-focusBorderRadius);
-  outline-offset: var(--gse-ui-datePicker-focusCalendar-gap);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible, .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover {
   color: var(--gse-ui-datePicker-iconHover);

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.css

@@ -18,6 +18,7 @@ gux-button-slot.gux-dismiss-small {
 }
 gux-button-slot.gux-dismiss-small button {
   inline-size: var(--gse-ui-button-dismiss-small-width);
+  min-inline-size: var(--gse-ui-button-dismiss-small-width);
   block-size: var(--gse-ui-button-dismiss-small-height);
   padding: 0;
 }

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

@@ -117,16 +117,16 @@
   border: none;
 }
 .gux-target-container-expanded .gux-filter-input:focus {
-  border: none;
   outline: none;
+  border: none;
 }
 .gux-target-container-expanded .gux-field-button {
   inline-size: auto;
   block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
+  outline: none;
   background: inherit;
   border: none;
-  outline: none;
   box-shadow: none;
 }
 .gux-target-container-expanded .gux-field-button:focus {

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

@@ -18,7 +18,7 @@ import { afterNextRender } from "../../../utils/dom/after-next-render";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { OnMutation } from "../../../utils/decorator/on-mutation";
 import translationResources from "./i18n/en.json";
-import { getSearchOption, getListOptions, setInitialActiveOption } from "../gux-listbox/gux-listbox.service";
+import { getSearchOption, getListOptions, setInitialActiveOption, getOptionDefaultSlot } from "../gux-listbox/gux-listbox.service";
 import { hasSlot } from "../../../utils/dom/has-slot";
 /**
  * Our Dropdown component. In the most basic case, it's used with `gux-option` to give users
@@ -263,12 +263,14 @@ export class GuxDropdown {
         this.collapseListbox('focusFieldButton');
     }
     getTypeaheadText(filter) {
+        var _a;
         const filterLength = filter.length;
         if (filterLength > 0 && !this.loading) {
             const option = getSearchOption(this.listboxElement, filter);
             if (option && this.filterType !== 'custom') {
                 //The text content needs to be trimmed as white space can occur around the textContent if options are populated asynchronously.
-                return option.textContent.trim().substring(filterLength);
+                const optionSlotTextContent = (_a = getOptionDefaultSlot(option)) === null || _a === void 0 ? void 0 : _a.textContent.trim();
+                return optionSlotTextContent === null || optionSlotTextContent === void 0 ? void 0 : optionSlotTextContent.substring(filterLength);
             }
         }
         return '';
@@ -349,7 +351,7 @@ export class GuxDropdown {
         }
     }
     render() {
-        return (h("gux-popup", { key: 'e65a43af8097df089756d19fa6d09f54d265b71b', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '25d3e1076b69e6729046d6ae3c6818d3cfb27702', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,9 +23,9 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 .gux-tag .gux-tag-remove-button {
   all: unset;

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

@@ -76,9 +76,9 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 .gux-field .gux-field-content .gux-filter {
   position: relative;
@@ -91,6 +91,9 @@
   color: transparent;
   caret-color: var(--gse-ui-formControl-input-populatedColor);
 }
+.gux-field .gux-field-content .gux-filter .gux-filter-input:placeholder-shown {
+  text-overflow: ellipsis;
+}
 .gux-field .gux-field-content .gux-filter .gux-filter-display {
   white-space: pre;
 }
@@ -132,16 +135,16 @@
   border: none;
 }
 .gux-target-container-expanded .gux-filter-input:focus {
-  border: none;
   outline: none;
+  border: none;
 }
 .gux-target-container-expanded .gux-field-button {
   inline-size: auto;
   block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
+  outline: none;
   background: inherit;
   border: none;
-  outline: none;
   box-shadow: none;
 }
 .gux-target-container-expanded .gux-field-button:focus {

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

@@ -16,7 +16,7 @@ import { afterNextRender } from "../../../utils/dom/after-next-render";
 import { onInputDisabledStateChange } from "../../../utils/dom/on-input-disabled-state-change";
 import { trackComponent } from "../../../utils/tracking/usage";
 import translationResources from "./i18n/en.json";
-import { getSearchOption, setInitialActiveOption } from "../gux-listbox/gux-listbox.service";
+import { getSearchOption, setInitialActiveOption, getOptionDefaultSlot } from "../gux-listbox/gux-listbox.service";
 import { OnMutation } from "../../../utils/decorator/on-mutation";
 /**
  * @slot - for a gux-listbox-multi containing gux-option-multi children
@@ -131,14 +131,16 @@ export class GuxDropdownMulti {
      */
     onInternallistboxoptionsupdated(event) {
         event.stopPropagation();
-        forceUpdate(this.root);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => forceUpdate(this.root));
+        });
     }
     /**
      * clear selected options when gux-dropdown-multi-tag emits event
      */
     onClearselected(event) {
         event.stopPropagation();
-        this.updateValue('');
+        this.updateValue(undefined);
         if (this.listboxElement) {
             this.listboxElement.value = undefined;
         }
@@ -230,11 +232,8 @@ export class GuxDropdownMulti {
     }
     getOptionElementByValue(value) {
         const listboxOptionElements = Array.from(this.root.querySelectorAll('gux-option-multi'));
-        const values = value ? value.split(',') : undefined;
-        if (values) {
-            return listboxOptionElements.filter(element => values.includes(element.value));
-        }
-        return;
+        const values = value ? value.split(',') : [];
+        return listboxOptionElements.filter(element => values.includes(element.value));
     }
     fieldButtonClick() {
         this.expanded = !this.expanded;
@@ -314,18 +313,37 @@ export class GuxDropdownMulti {
         if (textInputLength > 0 && !this.loading) {
             const option = getSearchOption(this.listboxElement, textInput);
             if (option && this.filterType !== 'custom') {
-                const optionSlotTextContent = (_a = option.querySelector('[gux-slot-container]')) === null || _a === void 0 ? void 0 : _a.textContent;
+                const optionSlotTextContent = (_a = getOptionDefaultSlot(option)) === null || _a === void 0 ? void 0 : _a.textContent.trim();
                 return optionSlotTextContent === null || optionSlotTextContent === void 0 ? void 0 : optionSlotTextContent.substring(textInputLength);
             }
             return '';
         }
     }
     renderTargetDisplay() {
-        return (h("div", { class: "gux-placeholder" }, this.placeholder || this.i18n('noSelection'), this.getSrSelectedText()));
+        return (h("div", { class: "gux-placeholder" }, this.getSrSelectedText(), this.getSelectedOptionText() ||
+            this.placeholder ||
+            this.i18n('noSelection')));
+    }
+    getSelectedOptionText() {
+        const selectedElementString = this.getSelectedOptionValueString();
+        return selectedElementString
+            ? [
+                selectedElementString,
+                h("div", { class: "gux-sr-only" }, this.placeholder)
+            ]
+            : false;
+    }
+    getSelectedOptionValueString() {
+        return this.getOptionElementByValue(this.value)
+            .map(option => {
+            var _a;
+            return (_a = getOptionDefaultSlot(option)) === null || _a === void 0 ? void 0 : _a.textContent.trim();
+        })
+            .join(', ');
     }
     getSrSelectedText() {
         const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
-        if (selectedListboxOptionElement === null || selectedListboxOptionElement === void 0 ? void 0 : selectedListboxOptionElement.length) {
+        if (selectedListboxOptionElement.length) {
             return (h("span", { class: "gux-sr-only" }, this.i18n('numberSelected', {
                 numberSelected: selectedListboxOptionElement.length.toString()
             })));
@@ -345,7 +363,9 @@ export class GuxDropdownMulti {
     }
     renderFilterInputField() {
         if (this.expanded && this.hasTextInput()) {
-            return (h("div", { class: "gux-field gux-input-field" }, h("div", { class: "gux-field-content" }, h("div", { class: "gux-filter" }, h("div", { class: "gux-filter-display" }, h("span", { class: "gux-filter-text" }, this.textInput), h("span", { class: "gux-filter-suggestion" }, this.getTypeaheadText(this.textInput))), h("div", { class: "input-and-dropdown-button" }, h("input", { onClick: this.fieldButtonInputClick.bind(this), placeholder: this.placeholder || this.i18n('noSelection'), class: "gux-filter-input", type: "text", "aria-label": this.getInputAriaLabel(), ref: el => (this.textInputElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this), disabled: this.disabled }))))));
+            return (h("div", { class: "gux-field gux-input-field" }, h("div", { class: "gux-field-content" }, h("div", { class: "gux-filter" }, h("div", { class: "gux-filter-display" }, h("span", { class: "gux-filter-text" }, this.textInput), h("span", { class: "gux-filter-suggestion" }, this.getTypeaheadText(this.textInput))), h("div", { class: "input-and-dropdown-button" }, h("input", { onClick: this.fieldButtonInputClick.bind(this), placeholder: this.getSelectedOptionValueString() ||
+                    this.placeholder ||
+                    this.i18n('noSelection'), class: "gux-filter-input", type: "text", "aria-label": this.getInputAriaLabel(), ref: el => (this.textInputElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this), disabled: this.disabled }))))));
         }
     }
     renderPopup() {
@@ -374,7 +394,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: '4c12f474e5aa49348caa1cd9046632f989f1e329', class: "gux-dropdown-container" }, h("gux-popup", { key: '4325f25fc057fd5b7488de52c11660ac4e14138b', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: '494db95a0b33b5bd6abe55ecb308011dc230dd34', class: "gux-dropdown-container" }, h("gux-popup", { key: '9a7fd26e9e4ceb0150c1cf97ea61e9669b059ea5', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get is() { return "gux-dropdown-multi"; }