genesys-spark-components 4.0.0-beta.60 → 4.0.0-beta.62

package/dist/collection/components/stable/gux-inline-alert/gux-inline-alert.css

@@ -1,36 +1,3 @@
-/**
-  * @prop --gse-ui-alert-padding
-  * @prop --gse-ui-alert-gap
-  * @prop --gse-ui-alert-info-backgroundColor
-  * @prop --gse-ui-alert-info-foregroundColor
-  * @prop --gse-ui-alert-info-iconColor
-  * @prop --gse-ui-alert-info-border-color
-  * @prop --gse-ui-alert-info-border-width
-  * @prop --gse-ui-alert-info-border-style
-  * @prop --gse-ui-alert-success-backgroundColor
-  * @prop --gse-ui-alert-success-foregroundColor
-  * @prop --gse-ui-alert-success-iconColor
-  * @prop --gse-ui-alert-success-border-color
-  * @prop --gse-ui-alert-success-border-width
-  * @prop --gse-ui-alert-success-border-style
-  * @prop --gse-ui-alert-warning-backgroundColor
-  * @prop --gse-ui-alert-warning-foregroundColor
-  * @prop --gse-ui-alert-warning-iconColor
-  * @prop --gse-ui-alert-warning-border-color
-  * @prop --gse-ui-alert-warning-border-width
-  * @prop --gse-ui-alert-warning-border-style
-  * @prop --gse-ui-alert-error-backgroundColor
-  * @prop --gse-ui-alert-error-foregroundColor
-  * @prop --gse-ui-alert-error-iconColor
-  * @prop --gse-ui-alert-error-border-color
-  * @prop --gse-ui-alert-error-border-width
-  * @prop --gse-ui-alert-error-border-style
-  * @prop --gse-ui-alert-text-fontFamily
-  * @prop --gse-ui-alert-text-lineHeight
-  * @prop --gse-ui-alert-text-fontSize
-  * @prop --gse-ui-alert-borderRadius
-  * @prop --gse-ui-alert-text-fontWeight
-  */
 :host {
   display: block;
 }

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.css

@@ -2,12 +2,11 @@
   position: relative;
   display: flex;
   width: 100%;
-  height: 1px;
+  height: var(--gse-ui-menu-divider-height);
   padding: 0;
-  margin: 16px 0;
-  line-height: 32px;
+  margin: var(--gse-ui-menu-divider-margin);
   pointer-events: none;
   cursor: pointer;
   cursor: default;
-  background-color: #c8cfda;
+  background-color: var(--gse-ui-menu-divider-backgroundColor);
 }

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

@@ -1,7 +1,7 @@
 :host {
   box-sizing: border-box;
   display: block;
-  max-height: 20rem;
+  max-height: var(--gse-ui-menu-maxHeight);
   padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow: visible auto;
@@ -12,7 +12,7 @@
   box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }
 
-:host(:focus-visible:not(:host-context(gux-dropdown))) {
+:host(:focus-visible) {
   outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }

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

@@ -1,7 +1,7 @@
 :host {
   box-sizing: border-box;
   display: block;
-  max-height: 20rem;
+  max-height: var(--gse-ui-menu-maxHeight);
   padding: var(--gse-ui-menu-padding);
   overflow-y: auto;
   background: var(--gse-ui-menu-backgroundColor);

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.css

@@ -1,40 +1,3 @@
-/**
-  * @prop --gse-progressAndLoading-loadingState-large-header-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-large-header-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-large-header-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-large-header-fontSize
-  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-large-subheader-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontSize
-  * @prop --gse-progressAndLoading-loadingState-large-width : TODO https://inindca.atlassian.net/browse/COMUI-2264
-  * @prop --gse-progressAndLoading-loadingState-medium-header-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-medium-header-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-medium-header-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-medium-header-fontSize
-  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-medium-subheader-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontSize
-  * @prop --gse-progressAndLoading-loadingState-medium-width
-  * @prop --gse-progressAndLoading-loadingState-small-header-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-small-header-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-small-header-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-small-header-fontSize
-  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontFamily
-  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontWeight
-  * @prop --gse-progressAndLoading-loadingState-small-subheader-lineHeight
-  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontSize
-  * @prop --gse-progressAndLoading-loadingState-small-width
-  * @prop --gse-progressAndLoading-large-gap
-  * @prop --gse-progressAndLoading-large-gapText
-  * @prop --gse-progressAndLoading-pageLoading-gap
-  * @prop --gse-progressAndLoading-medium-gap
-  * @prop --gse-progressAndLoading-medium-gapText
-  * @prop --gse-progressAndLoading-small-gap
-  * @prop --gse-progressAndLoading-small-gapText
-  * @prop --gse-ui-progressAndLoading-textColor
-  */
 :host {
   display: flex;
   flex-direction: column;

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

@@ -8,6 +8,7 @@ export class GuxPopup {
   constructor() {
     this.expanded = false;
     this.disabled = false;
+    this.offset = 2;
     this.exceedTargetWidth = false;
   }
   runUpdatePosition() {
@@ -25,7 +26,7 @@ export class GuxPopup {
         strategy: 'fixed',
         placement: 'bottom-start',
         middleware: [
-          offset(2),
+          offset(this.offset),
           flip(),
           size({
             apply({ rects, elements }) {
@@ -145,6 +146,24 @@ export class GuxPopup {
         "reflect": false,
         "defaultValue": "false"
       },
+      "offset": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number of pixels the popup is offset from the target."
+        },
+        "attribute": "offset",
+        "reflect": false,
+        "defaultValue": "2"
+      },
       "exceedTargetWidth": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.css

@@ -1,12 +1,3 @@
-/**
-  * @prop --gse-ui-progressAndLoading-largeBorder //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-smallBorder //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-thinBorder //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-spinner-base
-  * @prop --gse-ui-progressAndLoading-spinner-foreground
-  * @prop --gse-ui-progressAndLoading-spinner-large //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-spinner-small //TODO https://inindca.atlassian.net/browse/COMUI-2226
-*/
 @keyframes largeSpin {
   0% {
     stroke-dasharray: 1 68.115038379;

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.css

@@ -1,14 +1,3 @@
-/**
-  * @prop --gse-ui-progressAndLoading-largeBorder
-  * @prop --gse-ui-progressAndLoading-spinner-base
-  * @prop --gse-ui-progressAndLoading-spinner-foreground
-  * @prop --gse-ui-progressAndLoading-spinner-large : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-spinner-text-fontFamily
-  * @prop --gse-ui-progressAndLoading-spinner-text-fontSize
-  * @prop --gse-ui-progressAndLoading-spinner-text-fontWeight
-  * @prop --gse-ui-progressAndLoading-spinner-text-lineHeight
-  * @prop --gse-ui-progressAndLoading-textColor
-*/
 :host {
   display: inline-block;
 }

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

@@ -1,11 +1,3 @@
-/**
- * @prop --gse-ui-rating-default-color
- * @prop --gse-ui-rating-active-color
- * @prop --gse-ui-rating-hover-color
- * @prop --gse-ui-rating-disabled-color
- * @prop --gse-ui-rating-disabled-opacity
- * @prop --gse-ui-rating-size
-*/
 :host {
   display: inline-flex;
   user-select: none;

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

@@ -1,27 +1,32 @@
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab {
+gux-tabs[orientation=vertical] > gux-tab-list gux-tab {
+  box-sizing: border-box;
+  border-right: var(--gse-ui-tabs-item-divider-vertical-width) solid var(--gse-ui-tabs-item-divider-dividerColor);
+}
+gux-tabs[orientation=vertical] > gux-tab-list gux-tab .gux-tab {
   display: flex;
   justify-content: flex-end;
   height: var(--gse-ui-tabs-item-vertical-fixedHeight);
   padding: var(--gse-ui-tabs-item-vertical-padding);
-  border-right: var(--gse-ui-tabs-item-divider-vertical-width) solid var(--gse-ui-tabs-item-divider-dividerColor);
+  border-right: var(--gse-ui-tabs-item-indicator-vertical-width) solid transparent;
 }
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab.gux-active {
-  border-right: var(--gse-ui-tabs-item-indicator-vertical-width) solid var(--gse-ui-tabs-item-indicator-activeColor);
+gux-tabs[orientation=vertical] > gux-tab-list gux-tab .gux-tab.gux-active {
+  border-right-color: var(--gse-ui-tabs-item-indicator-activeColor);
 }
-gux-tabs[orientation=vertical] > gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled) {
-  border-right: var(--gse-ui-tabs-item-indicator-vertical-width) solid var(--gse-ui-tabs-item-indicator-hoverColor);
+gux-tabs[orientation=vertical] > gux-tab-list gux-tab .gux-tab:hover:not(.gux-active):not(.gux-disabled) {
+  border-right-color: var(--gse-ui-tabs-item-indicator-hoverColor);
 }
 
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab {
   box-sizing: border-box;
   height: var(--gse-ui-tabs-item-horizontal-fixedHeight);
   padding: var(--gse-ui-tabs-item-horizontal-padding);
+  border-bottom: var(--gse-ui-tabs-item-indicator-horizontal-height) solid transparent;
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab.gux-active {
-  border-bottom: var(--gse-ui-tabs-item-indicator-horizontal-height) solid var(--gse-ui-tabs-item-indicator-activeColor);
+  border-bottom-color: var(--gse-ui-tabs-item-indicator-activeColor);
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled) {
-  border-bottom: var(--gse-ui-tabs-item-indicator-horizontal-height) solid var(--gse-ui-tabs-item-indicator-hoverColor);
+  border-bottom-color: var(--gse-ui-tabs-item-indicator-hoverColor);
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab gux-tooltip-title {
   margin: auto;

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

@@ -1,37 +1,3 @@
-/**
-  * @prop --gse-ui-tag-default-backgroundColor
-  * @prop --gse-ui-tag-default-foregroundColor
-  * @prop --gse-ui-tag-accent1-backgroundColor
-  * @prop --gse-ui-tag-accent1-foregroundColor
-  * @prop --gse-ui-tag-accent2-backgroundColor
-  * @prop --gse-ui-tag-accent2-foregroundColor
-  * @prop --gse-ui-tag-accent3-backgroundColor
-  * @prop --gse-ui-tag-accent3-foregroundColor
-  * @prop --gse-ui-tag-accent4-backgroundColor
-  * @prop --gse-ui-tag-accent4-foregroundColor
-  * @prop --gse-ui-tag-accent5-backgroundColor
-  * @prop --gse-ui-tag-accent5-foregroundColor
-  * @prop --gse-ui-tag-accent6-backgroundColor
-  * @prop --gse-ui-tag-accent6-foregroundColor
-  * @prop --gse-ui-tag-accent7-backgroundColor
-  * @prop --gse-ui-tag-accent7-foregroundColor
-  * @prop --gse-ui-tag-accent8-backgroundColor
-  * @prop --gse-ui-tag-accent8-foregroundColor
-  * @prop --gse-ui-tag-accent9-backgroundColor
-  * @prop --gse-ui-tag-accent9-foregroundColor
-  * @prop --gse-ui-tag-accent10-backgroundColor
-  * @prop --gse-ui-tag-accent10-foregroundColor
-  * @prop --gse-ui-tag-borderRadius
-  * @prop --gse-ui-tag-button-size
-  * @prop --gse-ui-tag-height
-  * @prop --gse-ui-tag-padding
-  * @prop --gse-ui-tag-removable-gap
-  * @prop --gse-ui-tag-removable-padding
-  * @prop --gse-ui-tag-text-fontFamily
-  * @prop --gse-ui-tag-text-fontSize
-  * @prop --gse-ui-tag-text-fontWeight // missing
-  * @prop --gse-ui-tag-text-lineHeight
-  */
 :host {
   display: inline-block;
   border-radius: var(--gse-ui-tag-borderRadius);

package/dist/collection/components/stable/gux-text-highlight/gux-text-highlight.css

@@ -1,6 +1,3 @@
-span {
-  color: var(--gse-ui-search-match-firstLevel-foregroundColour);
-}
 span mark {
   background-color: var(--gse-ui-search-match-firstLevel-backgroundColor);
 }

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

@@ -27,8 +27,8 @@
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-time-picker .gux-input-time:focus-within {
-  border: var(--gse-ui-timePicker-focusTime-border-width) var(--gse-ui-timePicker-focusTime-border-style) var(--gse-ui-timePicker-focusTime-border-color);
-  border-radius: var(--gse-ui-timePicker-focusTime-borderRadius);
+  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-time-picker .gux-input-time:hover:not(: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);
@@ -66,7 +66,7 @@
   outline: none;
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible {
-  border: var(--gse-ui-timePicker-focusAmpm-border-width) var(--gse-ui-timePicker-focusAmpm-border-style) var(--gse-ui-timePicker-focusAmpm-border-color);
+  outline: var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width);
   border-radius: var(--gse-ui-timePicker-focusAmpm-borderRadius);
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem {
@@ -88,16 +88,14 @@
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
   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);
   cursor: pointer;
 }
-.gux-time-picker .gux-input-time .gux-clock-button:focus {
-  outline: none;
-}
 .gux-time-picker .gux-input-time .gux-clock-button:focus-visible {
-  border: var(--gse-ui-timePicker-focusClock-border-width) var(--gse-ui-timePicker-focusClock-border-style) var(--gse-ui-timePicker-focusClock-border-color);
+  outline: var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width);
   border-radius: var(--gse-ui-timePicker-focusClock-borderRadius);
 }
 .gux-time-picker .gux-input-time .gux-clock-button gux-icon {

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

@@ -1,38 +1,3 @@
-/**
- * @prop --gse-ui-toggle-track-width
- * @prop --gse-ui-toggle-track-height
- * @prop --gse-ui-toggle-track-enabled-off-backgroundColor
- * @prop --gse-ui-toggle-track-enabled-on-backgroundColor
- * @prop --gse-ui-toggle-track-disabled-off-backgroundColor
- * @prop --gse-ui-toggle-track-disabled-on-backgroundColor
- * @prop --gse-ui-toggle-track-error-off-backgroundColor
- * @prop --gse-ui-toggle-track-error-on-backgroundColor
- * @prop --gse-ui-toggle-track-hover-off-backgroundColor
- * @prop --gse-ui-toggle-track-hover-on-backgroundColor
- * @prop --gse-ui-toggle-track-borderRadius
- * @prop --gse-ui-toggle-handle-width
- * @prop --gse-ui-toggle-handle-height
- * @prop --gse-ui-toggle-handle-hover-border-width
- * @prop --gse-ui-toggle-handle-hover-border-style
- * @prop --gse-ui-toggle-handle-hover-border-color
- * @prop --gse-ui-toggle-handle-enabled-border-width
- * @prop --gse-ui-toggle-handle-enabled-border-color
- * @prop --gse-ui-toggle-handle-enabled-border-style
- * @prop --gse-ui-toggle-handle-disabled-border-width
- * @prop --gse-ui-toggle-handle-disabled-border-color
- * @prop --gse-ui-toggle-handle-disabled-border-style
- * @prop --gse-ui-toggle-handle-error-border-color
- * @prop --gse-ui-toggle-handle-error-border-width
- * @prop --gse-ui-toggle-handle-error-border-style
- * @prop --gse-ui-toggle-handle-backgroundColor
- * @prop --gse-ui-toggle-handle-foregroundColor
- * @prop --gse-ui-toggle-handle-borderRadius
- * @prop --gse-ui-toggle-focus-border-color;
- * @prop --gse-ui-toggle-focus-border-width
- * @prop --gse-ui-toggle-focus-border-style
- * @prop --gse-ui-toggle-focus-borderRadius
- * @prop --gse-ui-toggle-focus-offset
- */
 gux-toggle-slider {
   display: flex;
   align-items: center;
@@ -47,6 +12,7 @@ gux-toggle-slider .gux-toggle-slider {
   order: 0;
   width: var(--gse-ui-toggle-track-width);
   height: var(--gse-ui-toggle-track-height);
+  cursor: pointer;
   border-radius: var(--gse-ui-toggle-track-borderRadius);
 }
 gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider {

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

@@ -1,10 +1,3 @@
-/**
- * @prop --gse-ui-toggle-label-fontFamily
- * @prop --gse-ui-toggle-label-fontWeight
- * @prop --gse-ui-toggle-label-lineHeight
- * @prop --gse-ui-toggle-label-fontSize
- * @prop --gse-ui-toggle-gap
- */
 :host {
   display: block;
   margin: 2px;
@@ -16,9 +9,6 @@
   display: inline-block;
 }
 
-.gux-toggle-container {
-  cursor: pointer;
-}
 .gux-toggle-container.gux-disabled {
   pointer-events: none;
   cursor: default;
@@ -47,19 +37,21 @@
   position: relative;
   display: inline-block;
   padding: 0 4px;
-  font-family: var(--gse-ui-toggle-label-fontFamily);
-  font-size: var(--gse-ui-toggle-label-fontSize);
-  font-weight: var(--gse-ui-toggle-label-fontWeight);
+  cursor: default;
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text {
   display: grid;
   grid-template-areas: "inner-div";
   place-items: start;
-  font-family: var(--gse-ui-toggle-label-fontWeight);
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner {
   position: relative;
   grid-area: inner-div;
+  font-family: var(--gse-ui-toggle-label-fontFamily);
+  font-size: var(--gse-ui-toggle-label-fontSize);
+  font-weight: var(--gse-ui-toggle-label-fontWeight);
+  color: var(--gse-ui-formControl-label-labelColor);
+  word-wrap: break-word;
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner.gux-hidden {
   visibility: hidden;

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

@@ -24,12 +24,8 @@ export class GuxToggle {
       void this.announceElement.guxAnnounce(this.i18n('toggleIsFinishedLoading'));
     }
   }
-  onClick() {
-    this.toggle();
-  }
   onKeydown(event) {
     switch (event.key) {
-      case 'Enter':
       case ' ':
         event.preventDefault();
         this.toggle();
@@ -74,7 +70,7 @@ export class GuxToggle {
         'gux-toggle-container': true,
         'gux-toggle-label-left': this.labelPosition === 'left',
         'gux-disabled': this.disabled || this.loading
-      } }, h("div", { class: "gux-toggle-input" }, h("gux-toggle-slider", { checked: this.checked, disabled: this.disabled || this.loading, guxAriaLabel: this.getAriaLabel(), labelId: this.checkedLabel && this.uncheckedLabel ? this.labelId : '', errorId: this.errorMessage ? this.errorId : '' }), this.renderLabel()), this.renderError()), h("gux-announce-beta", { ref: el => (this.announceElement = el) })));
+      } }, h("div", { class: "gux-toggle-input" }, h("gux-toggle-slider", { checked: this.checked, disabled: this.disabled || this.loading, guxAriaLabel: this.getAriaLabel(), onClick: this.toggle.bind(this), onKeyDown: this.onKeydown.bind(this), labelId: this.checkedLabel && this.uncheckedLabel ? this.labelId : '', errorId: this.errorMessage ? this.errorId : '' }), this.renderLabel()), this.renderError()), h("gux-announce-beta", { ref: el => (this.announceElement = el) })));
   }
   static get is() { return "gux-toggle"; }
   static get encapsulation() { return "shadow"; }
@@ -265,19 +261,4 @@ export class GuxToggle {
         "methodName": "handleLoading"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "onKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/dist/collection/components/stable/gux-toggle/tests/gux-toggle.e2e.js

@@ -78,7 +78,8 @@ describe('gux-toggle', () => {
           const page = await newNonrandomE2EPage({ html });
           const element = await page.find('gux-toggle');
           const checkSpy = await element.spyOnEvent('check');
-          await userInteraction(element);
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          await userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(checkSpy).toHaveLength(0);
         });
@@ -87,7 +88,8 @@ describe('gux-toggle', () => {
           const page = await newNonrandomE2EPage({ html });
           const element = await page.find('gux-toggle');
           const checkSpy = await element.spyOnEvent('check');
-          await userInteraction(element);
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
+          await userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(checkSpy).toHaveLength(1);
         });
@@ -95,8 +97,9 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newSparkE2EPage({ html });
           const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
           expect(await element.getProperty('checked')).toBe(false);
-          await userInteraction(element);
+          await userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(await element.getProperty('checked')).toBe(true);
         });
@@ -104,8 +107,9 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle lang="en" checked checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newNonrandomE2EPage({ html });
           const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
           expect(await element.getProperty('checked')).toBe(true);
-          await userInteraction(element);
+          await userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(await element.getProperty('checked')).toBe(false);
         });
@@ -113,8 +117,9 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle lang="en" disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newNonrandomE2EPage({ html });
           const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
           expect(await element.getProperty('checked')).toBe(false);
-          await userInteraction(element);
+          await userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(await element.getProperty('checked')).toBe(false);
         });
@@ -122,8 +127,9 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle lang="en" checked disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newNonrandomE2EPage({ html });
           const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
           expect(await element.getProperty('checked')).toBe(true);
-          await userInteraction(element);
+          await userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(await element.getProperty('checked')).toBe(true);
         });
@@ -131,13 +137,14 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newNonrandomE2EPage({ html });
           const element = await page.find('gux-toggle');
+          const toggleSlider = await page.find('gux-toggle >>> gux-toggle-slider');
           await page.evaluate(() => {
             document.addEventListener('check', event => {
               event.preventDefault();
             });
           });
           expect(await element.getProperty('checked')).toBe(false);
-          await userInteraction(element);
+          await userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(await element.getProperty('checked')).toBe(false);
         });

package/dist/collection/components/stable/gux-toggle/tests/gux-toggle.spec.js

@@ -54,10 +54,6 @@ describe('gux-toggle', () => {
         name: 'clicked',
         userInteraction: (element) => element.click()
       },
-      {
-        name: 'Enter is pressed',
-        userInteraction: (element) => element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
-      },
       {
         name: 'Space is pressed',
         userInteraction: (element) => element.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }))
@@ -68,9 +64,10 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newSpecPage({ components, html, language });
           const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
           const checkSpy = jest.fn();
           element.addEventListener('check', checkSpy);
-          userInteraction(element);
+          userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(checkSpy).not.toHaveBeenCalled();
         });
@@ -78,9 +75,10 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newSpecPage({ components, html, language });
           const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
           const checkSpy = jest.fn();
           element.addEventListener('check', checkSpy);
-          userInteraction(element);
+          userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(checkSpy).toHaveBeenCalled();
         });
@@ -88,8 +86,9 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newSpecPage({ components, html, language });
           const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
           expect(element.checked).toBe(false);
-          userInteraction(element);
+          userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(element.checked).toBe(true);
         });
@@ -97,8 +96,9 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle checked checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newSpecPage({ components, html, language });
           const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
           expect(element.checked).toBe(true);
-          userInteraction(element);
+          userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(element.checked).toBe(false);
         });
@@ -106,8 +106,9 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newSpecPage({ components, html, language });
           const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
           expect(element.checked).toBe(false);
-          userInteraction(element);
+          userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(element.checked).toBe(false);
         });
@@ -115,8 +116,9 @@ describe('gux-toggle', () => {
           const html = '<gux-toggle checked disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
           const page = await newSpecPage({ components, html, language });
           const element = page.root;
+          const toggleSlider = element.shadowRoot.querySelector('gux-toggle-slider');
           expect(element.checked).toBe(true);
-          userInteraction(element);
+          userInteraction(toggleSlider);
           await page.waitForChanges();
           expect(element.checked).toBe(true);
         });