genesys-spark-components 4.117.1 → 4.119.0

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

@@ -33,8 +33,8 @@
 .gux-flyout-menu-content .gux-arrow-caret {
   inline-size: 0;
   block-size: 0;
-  filter: drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow));
   border-block-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);
   border-inline-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
   border-inline-end: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+  filter: drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow));
 }

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

@@ -46,10 +46,10 @@
   position: fixed;
   inset-block-start: 0;
   inset-inline-start: 0;
+  visibility: hidden;
   flex-direction: column;
   padding: var(--gse-ui-menu-padding);
   margin: 0;
-  visibility: hidden;
   background-color: var(--gse-ui-menu-backgroundColor);
   border: none;
   border-radius: var(--gse-ui-menu-borderRadius);

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

@@ -101,13 +101,13 @@
   inline-size: var(--gse-ui-checkbox-icon-width);
   block-size: var(--gse-ui-checkbox-icon-height);
   margin: 0;
-  text-align: center;
   vertical-align: middle;
+  text-align: center;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
-  border: 0;
   outline: none;
+  border: 0;
 }
 
 ::slotted(input[type=checkbox])::before {
@@ -117,9 +117,9 @@
 }
 
 ::slotted(input[type=checkbox]:focus-visible) {
-  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);
+  border-radius: var(--gse-ui-checkbox-focus-borderRadiusSmall);
 }
 
 ::slotted(input[type=checkbox]:not(:checked))::before {
@@ -169,6 +169,6 @@
   font-size: 12px;
   font-weight: var(--gse-ui-checkbox-label-text-fontWeight);
   line-height: var(--gse-ui-checkbox-label-text-lineHeight);
-  color: var(--gse-ui-checkbox-label-foregroundColor);
   vertical-align: middle;
+  color: var(--gse-ui-checkbox-label-foregroundColor);
 }

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

@@ -104,16 +104,16 @@
   block-size: var(--gse-ui-colorPicker-input-swatchSizing);
   padding: 0;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   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);
   text-align: end;
-  text-overflow: ellipsis;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -155,10 +155,10 @@
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container: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-input-and-error-container .gux-input .gux-input-container:hover {
   cursor: pointer;

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

@@ -102,16 +102,16 @@
   inline-size: 100%;
   padding-block-end: 0;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   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);
   text-align: end;
-  text-overflow: ellipsis;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -158,10 +158,10 @@
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container: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-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: var(--gse-ui-formControl-input-error-border-color);

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

@@ -117,14 +117,14 @@
   inline-size: var(--gse-ui-radioButton-icon-width);
   block-size: var(--gse-ui-radioButton-icon-height);
   margin: 0;
+  vertical-align: middle;
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   text-align: center;
-  vertical-align: middle;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
-  border: 0;
   outline: none;
+  border: 0;
 }
 
 ::slotted(input[type=radio])::before {
@@ -134,9 +134,9 @@
 }
 
 ::slotted(input[type=radio]:focus-visible) {
-  border-radius: var(--gse-ui-radioButton-focus-borderRadius);
   outline: var(--gse-ui-radioButton-focus-border-width) var(--gse-ui-radioButton-focus-border-style) var(--gse-ui-radioButton-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border-radius: var(--gse-ui-radioButton-focus-borderRadius);
 }
 
 ::slotted(input[type=radio]:not(:checked))::before {
@@ -174,6 +174,6 @@
   font-size: var(--gse-ui-formControl-label-text-fontSize);
   font-weight: var(--gse-ui-radioButton-label-text-fontWeight);
   line-height: var(--gse-ui-radioButton-label-text-lineHeight);
-  color: var(--gse-ui-radioButton-label-foregroundColor);
   vertical-align: middle;
+  color: var(--gse-ui-radioButton-label-foregroundColor);
 }

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

@@ -101,15 +101,15 @@
   order: 0;
   inline-size: 100%;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   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);
-  text-overflow: ellipsis;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -164,10 +164,10 @@
   color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
 }
 .gux-input-and-error-container .gux-input .gux-input-container: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-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);

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

@@ -106,10 +106,10 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
   border-radius: var(--gse-ui-formControl-input-borderRadius);
-  outline: none;
 }
 ::slotted(select)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -156,10 +156,10 @@
   pointer-events: none;
 }
 .gux-input-and-error-container .gux-input .gux-input-container: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-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: var(--gse-ui-formControl-input-error-border-color);

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

@@ -101,15 +101,15 @@
   order: 0;
   inline-size: 100%;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   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);
-  text-overflow: ellipsis;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -123,8 +123,8 @@ slot[name=suffix] {
   line-height: var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);
   color: var(--gse-ui-formControl-input-prefixSufix-defaultColor);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 
 .gux-input-and-error-container {
@@ -160,10 +160,10 @@ slot[name=suffix] {
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container: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-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);

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

@@ -106,11 +106,11 @@
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
   resize: vertical;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: none;
   border-radius: var(--gse-ui-formControl-input-borderRadius);
-  outline: none;
   padding: var(--gse-ui-formControl-textarea-padding);
   margin: 0;
 }
@@ -128,15 +128,15 @@
 .gux-input-and-error-container .gux-input {
   position: relative;
   display: flex;
+  outline: none;
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
-  outline: none;
 }
 .gux-input-and-error-container .gux-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);
+  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-input-and-error-container .gux-input:hover:not(.gux-disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);
@@ -159,6 +159,8 @@
   overflow-wrap: anywhere;
 }
 .gux-input-and-error-container .gux-input.gux-resize-auto::after {
+  /* Hidden from view, clicks, and screen readers */
+  visibility: hidden;
   /* Place on top of each other */
   grid-row-start: 1;
   grid-row-end: 2;
@@ -166,8 +168,6 @@
   grid-column-end: 2;
   /* This is how textarea text behaves */
   white-space: pre-wrap;
-  /* Hidden from view, clicks, and screen readers */
-  visibility: hidden;
   /* Note the weird space! Needed to preventy jumpy behavior */
   content: attr(data-replicated-value) " ";
   padding: var(--gse-ui-formControl-textarea-padding);

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

@@ -19,7 +19,7 @@ button:focus {
   outline: none;
 }
 button:focus-visible:enabled gux-icon {
+  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);
   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);
 }

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

@@ -48,6 +48,7 @@ export class GuxIcon {
     getSvgWithAriaAttributes(svgText) {
         const svgElement = new DOMParser().parseFromString(svgText, 'image/svg+xml')
             .firstChild;
+        svgElement.setAttribute('role', 'img');
         if (this.decorative) {
             svgElement.setAttribute('aria-hidden', String(this.decorative));
         }
@@ -63,7 +64,7 @@ export class GuxIcon {
         return svgElement.outerHTML;
     }
     render() {
-        return (this.svgHtml && (h("div", { key: '2c00ecc661b085e1b7e78c540e7b8a583d68f8ce', class: "gux-icon-container", innerHTML: this.svgHtml })));
+        return (this.svgHtml && (h("div", { key: 'ddcebf44959ac6a003de64b06cfcca08ae4d2318', class: "gux-icon-container", innerHTML: this.svgHtml })));
     }
     static get is() { return "gux-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-list/gux-list-item/gux-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/stable/gux-listbox/gux-listbox.css

@@ -5,10 +5,10 @@
   padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow: visible auto;
+  outline: none;
   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);
-  outline: none;
 }
 
 :host(:focus-visible) {

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

@@ -121,7 +121,7 @@ export class GuxListbox {
     componentWillRender() {
         this.listboxOptions.forEach(listboxOption => {
             listboxOption.selected = listboxOption.value === this.value;
-            if (this.filterType !== 'custom') {
+            if (this.filterType !== 'custom' && this.filterType !== 'none') {
                 listboxOption.filtered = !matchOption(listboxOption, this.filter);
             }
         });

package/dist/collection/components/stable/gux-listbox/gux-listbox.service.js

@@ -125,9 +125,9 @@ export function onClickedOption(option, handler) {
 }
 let timer;
 let searchStringState = '';
-// While there is less than 1s between keypresses that will be considered one search operation.
+// While there is less than 1s between key presses that will be considered one search operation.
 // After 1s the next keypress will be considered the start of a new search.
-// This is a mimic/approximation of the native select elements functionality.
+// This is a mimic/approximation of the native select element`s functionality.
 const continueSearchMaxInterval = 1000;
 export function goToOption(list, letter) {
     clearTimeout(timer);
@@ -138,9 +138,11 @@ export function goToOption(list, letter) {
     }, continueSearchMaxInterval);
 }
 export function matchOption(option, matchString) {
+    var _a;
     //The text content needs to be trimmed as white space can occur around the textContent if options are populated asynchronously.
-    return option.textContent
-        .trim()
-        .toLowerCase()
-        .startsWith(matchString.toLowerCase());
+    return (_a = getOptionDefaultSlot(option)) === null || _a === void 0 ? void 0 : _a.textContent.trim().toLowerCase().startsWith(matchString.toLowerCase());
+}
+export function getOptionDefaultSlot(option) {
+    var _a;
+    return (_a = option.shadowRoot.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes()[0];
 }

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

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

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

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

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

@@ -21,9 +21,9 @@
   opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
 :host:host(.gux-active) {
-  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);
   outline-offset: -2px;
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
 }
 :host:host(.gux-hovered:not([disabled])) {
   background: var(--gse-ui-menu-option-hover-backgroundColor);

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

@@ -4,11 +4,11 @@
   max-block-size: var(--gse-ui-menu-maxHeight);
   padding: var(--gse-ui-menu-padding);
   overflow: hidden auto;
+  outline: none;
   scrollbar-color: var(--gse-ui-menu-scrollbar-foregroundColor);
   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);
-  outline: none;
   box-shadow: var(--gse-ui-menu-boxShadow);
 }
 

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, hasActiveOption } from "../gux-listbox/gux-listbox.service";
+import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, hasActiveOption, getOptionDefaultSlot } from "../gux-listbox/gux-listbox.service";
 import { buildI18nForComponent } from "../../../i18n";
 import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
 import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
@@ -160,12 +160,10 @@ export class GuxListboxMulti {
     }
     updateListboxOptions() {
         this.listboxOptions.forEach(listboxOption => {
+            var _a;
             listboxOption.selected = this.getSelectedValues().includes(listboxOption.value);
-            if (this.filterType !== 'custom') {
-                listboxOption.filtered = !listboxOption.textContent
-                    .trim()
-                    .toLowerCase()
-                    .startsWith(this.textInput.toLowerCase());
+            if (this.filterType !== 'custom' && this.filterType !== 'none') {
+                listboxOption.filtered = !((_a = getOptionDefaultSlot(listboxOption)) === null || _a === void 0 ? void 0 : _a.textContent.trim().toLowerCase().startsWith(this.textInput.toLowerCase()));
             }
         });
     }
@@ -175,9 +173,8 @@ export class GuxListboxMulti {
             this.value = newArray.join(',');
         }
         else {
-            this.value = this.getSelectedValues()
-                .filter(e => e !== newValue)
-                .join(',');
+            const newArray = this.getSelectedValues().filter(e => e !== newValue);
+            this.value = newArray.length ? newArray.join(',') : undefined;
         }
         simulateNativeEvent(this.root, 'input');
         simulateNativeEvent(this.root, 'change');

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

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

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

@@ -24,10 +24,10 @@
 .gux-popover-wrapper .gux-arrow-caret {
   inline-size: 0;
   block-size: 0;
-  filter: drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow));
   border-block-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);
   border-inline-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
   border-inline-end: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+  filter: drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow));
 }
 .gux-popover-wrapper .gux-popover-header {
   display: flex;

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

@@ -7,8 +7,8 @@
 .gux-popup-container {
   position: fixed;
   z-index: var(--gse-semantic-zIndex-popup);
-  inline-size: max-content;
   visibility: hidden;
+  inline-size: max-content;
   background-color: var(--gse-ui-menu-backgroundColor);
 }
 .gux-popup-container.gux-expanded {
@@ -20,7 +20,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-table/gux-table-select-menu/gux-table-select-menu.css

@@ -9,9 +9,9 @@ gux-table-select-menu .gux-select-menu-button {
   padding: 0;
   margin-inline-start: var(--gse-ui-dataTableItems-header-gap);
   color: var(--gse-ui-dataTableItems-cell-chevron-foregroundColor);
+  outline: none;
   background-color: inherit;
   border: none;
-  outline: none;
 }
 gux-table-select-menu .gux-select-menu-button:focus-visible {
   outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);

package/dist/collection/components/stable/gux-table-toolbar/gux-table-toolbar-custom-action/gux-table-toolbar-custom-action.css

@@ -12,9 +12,9 @@ button[disabled] {
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 
 .gux-action-title {

package/dist/collection/components/stable/gux-tabs/gux-tab/gux-tab.css

@@ -73,9 +73,9 @@ gux-tab .gux-tab.gux-disabled gux-tooltip-title {
   opacity: var(--gse-ui-tabs-item-disableOpacity);
 }
 gux-tab .gux-tab:focus-visible {
+  outline: none;
   border: var(--gse-ui-tabs-focusRing-border-width) var(--gse-ui-tabs-focusRing-border-style) var(--gse-ui-tabs-focusRing-border-color);
   border-radius: var(--gse-ui-tabs-focusRing-borderRadius);
-  outline: none;
 }
 gux-tab .gux-tab gux-tooltip-title {
   white-space: nowrap;

package/dist/collection/components/stable/gux-tabs-advanced/gux-tab-advanced/gux-tab-advanced.css

@@ -24,8 +24,8 @@ gux-tab-advanced .gux-tab .gux-buttons .gux-tab-button {
 gux-tab-advanced .gux-tab .gux-buttons .gux-tab-button:focus-visible {
   outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
   outline-offset: var(--gse-semantic-focusOutline-offset);
-  border-radius: var(--gse-ui-advancedTabs-item-focus-borderRadius);
   outline-offset: calc(-1 * var(--gse-semantic-focusOutline-md-borderWidth));
+  border-radius: var(--gse-ui-advancedTabs-item-focus-borderRadius);
 }
 gux-tab-advanced .gux-tab .gux-buttons .gux-tab-button .gux-tab-button-text {
   font-family: var(--gse-ui-advancedTabs-item-itemText-fontFamily);

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

@@ -44,9 +44,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;
@@ -63,8 +63,8 @@
   margin-inline-end: -4px;
 }
 .gux-tag .gux-tag-remove-button:focus-within .gux-tag-remove-icon {
-  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
   outline: var(--gse-semantic-focusOutline-sm-borderWidth) solid var(--gse-ui-color-focus);
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
 }
 .gux-tag.gux-accent-default {
   color: var(--gse-ui-tag-default-bold-foregroundColor);

package/dist/collection/components/stable/gux-time-picker/gux-time-picker.css

@@ -41,9 +41,9 @@
   padding: 0;
   font-size: var(--gse-ui-formControl-label-text-fontSize);
   color: var(--gse-ui-formControl-input-populatedColor);
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 .gux-time-picker .gux-input-time input.gux-input-time-hours {
   text-align: end;
@@ -62,9 +62,9 @@
   font-weight: var(--gse-ui-formControl-input-prefixSufix-text-fontWeight);
   line-height: var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
+  outline: none;
   background: transparent;
   border: none;
-  outline: none;
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible {
   outline: var(--gse-semantic-focusOutline-sm-borderWidth) solid var(--gse-semantic-border-focus);
@@ -87,9 +87,9 @@
   order: 0;
   padding: 0;
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
+  outline: none;
   background: transparent;
   border: none;
-  outline: none;
 }
 .gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled) {
   color: var(--gse-ui-timePicker-clockStates-activeColor);