genesys-spark-components 4.118.0 → 4.119.0

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/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-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);

package/dist/collection/components/stable/gux-toggle/gux-toggle-slider/gux-toggle-slider.css

@@ -31,9 +31,9 @@ gux-toggle-slider .gux-toggle-slider.gux-disabled {
   opacity: var(--gse-ui-toggle-disabled-opacity);
 }
 gux-toggle-slider .gux-toggle-slider:focus-visible {
-  border-radius: var(--gse-ui-toggle-focus-borderRadius);
   outline: var(--gse-ui-toggle-focus-border-width) var(--gse-ui-toggle-focus-border-style) var(--gse-ui-toggle-focus-border-color);
   outline-offset: var(--gse-ui-toggle-focus-offset);
+  border-radius: var(--gse-ui-toggle-focus-borderRadius);
 }
 gux-toggle-slider .gux-toggle-slider .gux-slider {
   position: absolute;

package/dist/collection/components/stable/gux-tooltip/gux-tooltip.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/stable/gux-tooltip/gux-tooltip.js

@@ -31,6 +31,12 @@ export class GuxTooltip {
             this.hide();
         }
     }
+    handlePointerenter() {
+        this.show();
+    }
+    handlePointerleave() {
+        this.hide();
+    }
     /*
      * Show tooltip
      */
@@ -77,16 +83,19 @@ export class GuxTooltip {
         });
     }
     show() {
+        clearTimeout(this.hideDelayTimeout);
         this.isShown = true;
         afterNextRender(() => {
             this.runUpdatePosition();
         });
     }
     hide() {
-        if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-        this.isShown = false;
+        this.hideDelayTimeout = setTimeout(() => {
+            if (this.cleanupUpdatePosition) {
+                this.cleanupUpdatePosition();
+            }
+            this.isShown = false;
+        }, 350);
     }
     getForElement() {
         if (this.for) {
@@ -134,10 +143,10 @@ export class GuxTooltip {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: 'a6d593335a5ddfc1b5178c55f5eddc9228a8f454', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { key: 'ce10e4e636802917d435986bb09d027eaa8296d8', class: {
+        return (h(Host, { key: '0f1558f451e6d3002d6397de1490250763bbd126', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { key: '864048cf64d5a9b3c9eaf9262fb4116833f46066', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '738f0c1e43eb62eaa0df2105fad5588ff3bd6ac4', name: "content" }, h("slot", { key: '58e0e5fcf7fbc21026a8a0ee61fd6cd0e39e8a93' })))));
+            }, "data-placement": this.placement }, h("slot", { key: 'a15e551bf9b9486f3bdc22f1d7968ee532eb8e52', name: "content" }, h("slot", { key: '723a77c5059c2e5777ffd7434eb03d43c8457b0b' })))));
     }
     static get is() { return "gux-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -277,6 +286,18 @@ export class GuxTooltip {
                 "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
             }];
     }
 }