genesys-spark-components 4.0.0-beta.40 → 4.0.0-beta.41

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

@@ -38,12 +38,12 @@ export class GuxFlyoutMenu {
     event.stopPropagation();
     switch (event.key) {
       case ' ':
-        if (this.menuContentElement.contains(document.activeElement)) {
-          this.root.focus();
+        if (this.root === event.target) {
+          this.focusOnMenu();
         }
         else {
           this.hideDelayTimeout = afterNextRenderTimeout(() => {
-            this.focusOnMenu();
+            this.root.focus();
           });
         }
         return;

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

@@ -1,9 +1,9 @@
-gux-menu-option {
+:host {
   display: block;
   flex: 1 1 auto;
   align-self: auto;
 }
-gux-menu-option .gux-menu-option-button {
+:host .gux-menu-option-button {
   all: unset;
   width: var(--gse-ui-flyoutMenu-width);
   height: var(--gse-ui-menu-option-height);
@@ -12,13 +12,13 @@ gux-menu-option .gux-menu-option-button {
   color: var(--gse-ui-menu-option-label-foregroundColor);
   background-color: var(--gse-ui-menu-option-default-backgroundColor);
 }
-gux-menu-option .gux-menu-option-button:focus-within, gux-menu-option .gux-menu-option-button:hover {
+:host .gux-menu-option-button:focus-within, :host .gux-menu-option-button:hover {
   background-color: var(--gse-ui-menu-option-hover-backgroundColor);
 }
-gux-menu-option .gux-menu-option-button:enabled {
+:host .gux-menu-option-button:enabled {
   cursor: pointer;
 }
-gux-menu-option .gux-menu-option-button .gux-menu-option-button-text {
+:host .gux-menu-option-button .gux-menu-option-button-text {
   display: block;
   overflow-x: hidden;
   text-overflow: ellipsis;

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.js

@@ -20,10 +20,18 @@ export class GuxMenuOption {
         break;
     }
   }
+  onKeyup(event) {
+    switch (event.key) {
+      case ' ':
+        event.stopPropagation();
+        break;
+    }
+  }
   render() {
     return (h("button", { type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { class: "gux-menu-option-button-text" }, h("slot", null))));
   }
   static get is() { return "gux-menu-option"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["gux-menu-option.scss"]
@@ -63,6 +71,12 @@ export class GuxMenuOption {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "keyup",
+        "method": "onKeyup",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -1,4 +1,4 @@
-gux-menu {
+:host {
   flex-direction: column;
   width: fit-content;
   padding: var(--gse-ui-flyoutMenu-padding);

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

@@ -7,6 +7,7 @@ export class GuxMenu {
     return (h(Host, { role: "menu" }, h("slot", null)));
   }
   static get is() { return "gux-menu"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["gux-menu.scss"]

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

@@ -1,9 +1,9 @@
-gux-submenu {
+:host {
   display: block;
   flex: 1 1 auto;
   align-self: auto;
 }
-gux-submenu .gux-submenu-button {
+:host .gux-submenu-button {
   all: unset;
   display: flex;
   flex-direction: row;
@@ -18,15 +18,15 @@ gux-submenu .gux-submenu-button {
   color: var(--gse-ui-menu-option-label-foregroundColor);
   background-color: var(--gse-ui-menu-option-default-backgroundColor);
 }
-gux-submenu .gux-submenu-button:focus-within, gux-submenu .gux-submenu-button:hover {
+:host .gux-submenu-button:focus-within, :host .gux-submenu-button:hover {
   background-color: var(--gse-ui-menu-option-hover-backgroundColor);
 }
-gux-submenu .gux-submenu-button.gux-submenu-button-active {
+:host .gux-submenu-button.gux-submenu-button-active {
   font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
   color: var(--gse-ui-menu-option-shortcut-selected-foregroundColor);
   background-color: var(--gse-ui-menu-option-selected-backgroundColor);
 }
-gux-submenu .gux-submenu-button .gux-submenu-button-text {
+:host .gux-submenu-button .gux-submenu-button-text {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
@@ -35,14 +35,14 @@ gux-submenu .gux-submenu-button .gux-submenu-button-text {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-gux-submenu .gux-submenu-button .gux-submenu-open-icon {
+:host .gux-submenu-button .gux-submenu-open-icon {
   flex: 0 0 auto;
   align-self: auto;
   order: 0;
   width: var(--gse-ui-menu-option-startIcon-width);
   height: var(--gse-ui-menu-option-startIcon-height);
 }
-gux-submenu .gux-submenu-wrapper {
+:host .gux-submenu-wrapper {
   position: fixed;
   top: 0;
   left: 0;
@@ -55,6 +55,6 @@ gux-submenu .gux-submenu-wrapper {
   border-radius: var(--gse-ui-menu-borderRadius);
   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);
 }
-gux-submenu .gux-submenu-wrapper.gux-shown {
+:host .gux-submenu-wrapper.gux-shown {
   visibility: visible;
 }

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

@@ -36,7 +36,7 @@ export class GuxSubmenu {
         break;
       case 'ArrowLeft':
       case 'Escape':
-        if (this.submenuContentElement.contains(event.target)) {
+        if (!(this.root === event.target)) {
           event.stopPropagation();
         }
         void this.guxFocus();
@@ -48,15 +48,10 @@ export class GuxSubmenu {
   onKeyup(event) {
     switch (event.key) {
       case ' ':
-        event.stopPropagation();
-        if (this.submenuContentElement.contains(document.activeElement)) {
-          this.root.focus();
-        }
-        else {
-          this.hideDelayTimeout = afterNextRenderTimeout(() => {
-            this.focusOnSubmenu();
-          });
-        }
+        this.hideDelayTimeout = afterNextRenderTimeout(() => {
+          this.focusOnSubmenu();
+        });
+        void this.guxFocus();
         break;
     }
   }
@@ -67,7 +62,7 @@ export class GuxSubmenu {
     this.hide();
   }
   onClick(event) {
-    if (this.submenuContentElement.contains(event.target)) {
+    if (event.target.nodeName === 'GUX-MENU-OPTION') {
       this.hide();
       return;
     }
@@ -122,7 +117,7 @@ export class GuxSubmenu {
     if (this.submenuContentElement.contains(document.activeElement)) {
       return;
     }
-    const menuItems = Array.from(this.submenuContentElement.children);
+    const menuItems = Array.from(this.root.children);
     const nextFocusableElement = menuItems[0];
     void nextFocusableElement.guxFocus();
   }
@@ -154,6 +149,7 @@ export class GuxSubmenu {
       } }, h("div", { role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", null)))));
   }
   static get is() { return "gux-submenu"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["gux-submenu.scss"]

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

@@ -1,20 +1,11 @@
 /**
-  * @prop --gse-ui-progressAndLoading-largeBorder : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-largeBorder-0 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-largeBorder-1 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-largeBorder-2 : //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-smallBorder-0 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-smallBorder-1 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-smallBorder-2 : //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-thinBorder-0 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-thinBorder-1 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-thinBorder-2 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
+  * @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
+  * @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% {

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

@@ -1,8 +1,5 @@
 /**
-  * @prop --gse-ui-progressAndLoading-largeBorder : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-largeBorder-0 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-largeBorder-1 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
-  * @prop --gse-ui-progressAndLoading-largeBorder-2 : //TODO https://inindca.atlassian.net/browse/COMUI-2226
+  * @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

package/dist/collection/components/stable/gux-table/gux-table-select-menu/gux-table-select-menu.js

@@ -66,7 +66,7 @@ export class GuxTableSelectMenu {
     if (this.hasSelectMenuOptions) {
       return [
         h("button", { id: this.dropdownOptionsButtonId, "aria-haspopup": "listbox", "aria-expanded": (!this.popoverHidden).toString(), type: "button", class: "gux-select-menu-button", ref: el => (this.tableSelectMenuButtonElement = el), onClick: () => this.toggleOptions(), disabled: this.dropdownDisabled }, h("gux-icon", { "icon-name": "chevron-small-down", "screenreader-text": this.i18n('tableOptions') })),
-        h("gux-table-select-popover", { for: this.dropdownOptionsButtonId, hidden: this.popoverHidden, closeOnClickOutside: true, onGuxdismiss: () => (this.popoverHidden = true) }, h("div", null, h("slot", { name: "select-menu-options" })))
+        h("gux-popover-list", { for: this.dropdownOptionsButtonId, isOpen: !this.popoverHidden, closeOnClickOutside: true, onGuxdismiss: () => (this.popoverHidden = true) }, h("div", null, h("slot", { name: "select-menu-options" })))
       ];
     }
   }

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

@@ -468,7 +468,7 @@ describe('gux-table', () => {
     await page.waitForChanges();
     expect(inputElement.getProperty('checked')).toBeTruthy();
   });
-  it('should open and close the table select menu', async () => {
+  it('should display the table-select-menu in a closed state and then open when select menu button is clicked', async () => {
     const html = `
       <gux-table>
         <table slot="data">
@@ -531,10 +531,13 @@ describe('gux-table', () => {
     const page = await newE2EPage({ html });
     const tableSelectMenuElement = await page.find('gux-table-select-menu');
     const tableSelectMenuButton = await tableSelectMenuElement.find('.gux-select-menu-button');
-    const tableSelectPopover = await tableSelectMenuElement.find('gux-table-select-popover');
-    expect(tableSelectPopover.getAttribute('hidden')).toBe('');
+    const popoverComponent = await tableSelectMenuElement.find('gux-popover-list');
+    const popoverList = popoverComponent.shadowRoot.querySelector('div.gux-popover-wrapper');
+    await page.waitForChanges();
+    expect(popoverList).toHaveClass('gux-hidden');
     await tableSelectMenuButton.click();
     await page.waitForChanges();
-    expect(tableSelectPopover.getAttribute('hidden')).toBe(null);
+    const updatedPopoverList = popoverComponent.shadowRoot.querySelector('div.gux-popover-wrapper');
+    expect(updatedPopoverList).not.toHaveClass('gux-hidden');
   });
 });

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

@@ -1,28 +1,27 @@
 gux-tabs[orientation=vertical] > gux-tab-list .gux-tab {
   display: flex;
   justify-content: flex-end;
-  padding: 12px 16px;
+  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);
 }
 gux-tabs[orientation=vertical] > gux-tab-list .gux-tab.gux-active {
-  padding-right: 14px;
-  border-right: 2px solid #2a60c8;
+  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:hover:not(.gux-active):not(.gux-disabled) {
-  padding-right: 14px;
-  border-right: 2px solid #8a97ad;
+  border-right: var(--gse-ui-tabs-item-indicator-vertical-width) solid var(--gse-ui-tabs-item-indicator-hoverColor);
 }
 
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab {
   box-sizing: border-box;
-  padding-bottom: 2px;
+  height: 40px;
+  padding: var(--gse-ui-tabs-item-horizontal-padding);
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab.gux-active {
-  padding-bottom: 0;
-  border-bottom: 2px solid #2a60c8;
+  border-bottom: var(--gse-ui-tabs-item-indicator-horizontal-height) solid var(--gse-ui-tabs-item-indicator-activeColor);
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled) {
-  padding-bottom: 0;
-  border-bottom: 2px solid #8a97ad;
+  border-bottom: var(--gse-ui-tabs-item-indicator-horizontal-height) solid var(--gse-ui-tabs-item-indicator-hoverColor);
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab gux-tooltip-title {
   margin: auto;
@@ -46,31 +45,33 @@ gux-tabs[alignment=full-width] > gux-tab-list gux-tab .gux-tab {
 
 gux-tab {
   display: flex;
+  width: var(--gse-ui-tabs-item-fixedWidth);
   max-width: 160px;
 }
 gux-tab .gux-tab {
   display: flex;
   align-items: center;
-  width: 100%;
+  width: var(--gse-ui-tabs-item-fixedWidth);
   max-width: 160px;
-  height: 40px;
-  padding: 0 16px;
-  font-size: 14px;
-  color: #2e394c;
+  height: var(--gse-ui-tabs-item-height);
+  font-family: var(--gse-ui-tabs-item-itemText-fontFamily);
+  font-size: var(--gse-ui-tabs-item-itemText-fontSize);
+  font-weight: var(--gse-ui-tabs-item-itemText-fontWeight);
+  line-height: var(--gse-ui-tabs-item-itemText-lineHeight);
+  color: var(--gse-ui-tabs-item-itemTextColor);
   cursor: pointer;
-  background-color: #fff;
+  background-color: transparent;
   border: none;
 }
 gux-tab .gux-tab.gux-disabled {
   cursor: default;
 }
 gux-tab .gux-tab.gux-disabled gux-tooltip-title {
-  color: rgba(46, 57, 76, 0.5);
+  opacity: var(--gse-ui-tabs-item-disableOpacity);
 }
 gux-tab .gux-tab:focus-visible {
-  padding: 0 13px 3px;
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
+  border: var(--gse-semantic-focusRing-default-border-width) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-color);
+  border-radius: 4px;
   outline: none;
 }
 gux-tab .gux-tab gux-tooltip-title {

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

@@ -4,11 +4,11 @@ gux-tabs[orientation=vertical] {
 gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container {
   display: flex;
   flex-direction: column;
-  width: 160px;
+  width: 98px;
   max-width: 160px;
   height: 100%;
   margin-right: 16px;
-  border-right: 1px solid #d7dce5;
+  border-right: var(--gse-ui-tabs-item-divider-horizontal-height) solid var(--gse-ui-tabs-item-divider-dividerColor);
 }
 gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container .gux-scroll-button-container {
   width: 100%;
@@ -32,7 +32,7 @@ gux-tabs[orientation=vertical] > gux-tab-list .gux-tab-container .gux-scrollable
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-tab-container {
   height: 40px;
   margin-bottom: 16px;
-  border-bottom: 1px solid #d7dce5;
+  border-bottom: var(--gse-ui-tabs-item-divider-horizontal-height) solid var(--gse-ui-tabs-item-divider-dividerColor);
 }
 gux-tabs:not([orientation=vertical]) > gux-tab-list .gux-scrollable-section {
   overflow-x: auto;
@@ -43,7 +43,7 @@ gux-tabs .gux-tab-container {
   width: 100%;
   overflow-x: hidden;
   overflow-y: hidden;
-  background-color: #fff;
+  background-color: transparent;
 }
 gux-tabs .gux-scrollable-section {
   display: flex;

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

@@ -1,5 +1,5 @@
 :host {
-  height: calc(100% - 57px);
+  height: calc(100% - 40pxvar(--gse-ui-tabs-set-divider-horizontal-height)16px);
 }
 
 :host(:not([hidden])) {

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

@@ -59,13 +59,13 @@ describe('gux-tabs', () => {
     }
   ].forEach(({ description, html }) => {
     describe(`#render ${description}`, () => {
+      const restrictedWidthHtml = `<div style="width: 200px">${html}</div>`;
       it('renders', async () => {
         const page = await newNonrandomE2EPage({ html });
         const element = await page.find('gux-tabs');
         expect(element.outerHTML).toMatchSnapshot();
       });
       it('renders i18n strings', async () => {
-        const restrictedWidthHtml = `<div style="width: 500px">${html}</div>`;
         const page = await newNonrandomE2EPage({ html: restrictedWidthHtml }, 'ja');
         const element = await page.find('gux-tabs');
         expect(element.outerHTML).toMatchSnapshot();
@@ -77,7 +77,6 @@ describe('gux-tabs', () => {
         expect(scrollButtons.length).toBe(0);
       });
       it('renders scroll buttons when tabs overflow container', async () => {
-        const restrictedWidthHtml = `<div style="width: 500px">${html}</div>`;
         const page = await newNonrandomE2EPage({ html: restrictedWidthHtml });
         const scrollButtons = await page.findAll('.gux-scroll-button');
         await a11yCheck(page);

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

@@ -1,4 +1,7 @@
-mark {
+span {
+  color: var(--gse-ui-formControl-input-populatedColor);
+}
+span mark {
   background-color: var(--gse-ui-search-match-firstLevel-backgroundColor);
 }
 

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

@@ -1,3 +1,38 @@
+/**
+ * @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;
@@ -10,53 +45,80 @@ gux-toggle-slider .gux-toggle-slider {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  width: 30px;
-  height: 16px;
-  border-radius: 8px;
+  width: var(--gse-ui-toggle-track-width);
+  height: var(--gse-ui-toggle-track-height);
+  border-radius: var(--gse-ui-toggle-track-borderRadius);
+}
+gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider {
+  background-color: var(--gse-ui-toggle-track-error-off-backgroundColor);
+}
+gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider .gux-switch {
+  border: var(--gse-ui-toggle-handle-error-border-width) var(--gse-ui-toggle-handle-error-border-style) var(--gse-ui-toggle-handle-error-border-color);
+}
+gux-toggle-slider .gux-toggle-slider.gux-error.gux-checked .gux-slider {
+  background-color: var(--gse-ui-toggle-track-error-on-backgroundColor);
 }
 gux-toggle-slider .gux-toggle-slider.gux-disabled {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
+  background-color: var(--gse-ui-toggle-track-disabled-off-backgroundColor);
+  opacity: var(--gse-ui-toggle-disabled-opacity);
 }
 gux-toggle-slider .gux-toggle-slider:focus-visible {
-  outline: none;
-  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);
+  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);
 }
 gux-toggle-slider .gux-toggle-slider .gux-slider {
   position: absolute;
   inset: 0;
-  background-color: #6b7585;
-  border-radius: 8px;
+  background-color: var(--gse-ui-toggle-track-enabled-off-backgroundColor);
+  border-radius: calc(var(--gse-ui-toggle-track-height) / 2);
   transition: background-color 0.5s ease;
 }
+gux-toggle-slider .gux-toggle-slider .gux-slider:hover {
+  background-color: var(--gse-ui-toggle-track-hover-off-backgroundColor);
+}
 gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch {
   position: absolute;
-  bottom: 1px;
-  left: 1px;
-  width: 14px;
-  height: 14px;
+  bottom: calc((var(--gse-ui-toggle-track-height) - var(--gse-ui-toggle-handle-width)) / 2);
+  left: calc((var(--gse-ui-toggle-track-height) - var(--gse-ui-toggle-handle-width)) / 2);
+  width: calc(var(--gse-ui-toggle-handle-width) - 4px);
+  height: calc(var(--gse-ui-toggle-handle-height) - 4px);
+  color: var(--gse-ui-toggle-handle-foregroundColor);
   content: "";
-  background-color: #fdfdfd;
-  border-radius: 50%;
+  background-color: var(--gse-ui-toggle-handle-backgroundColor);
+  border: var(--gse-ui-toggle-handle-enabled-border-width) var(--gse-ui-toggle-handle-enabled-border-style) var(--gse-ui-toggle-handle-enabled-border-color);
+  border-radius: var(--gse-ui-toggle-handle-borderRadius);
   transition: 0.5s;
 }
 gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon {
   position: absolute;
   inset: 0;
-  width: 12px;
-  height: 12px;
+  width: calc(var(--gse-ui-toggle-handle-width) - 2);
+  height: calc(var(--gse-ui-toggle-handle-width) - 2);
   padding: 1px;
   color: #fdfdfd;
   opacity: 0;
   transition: color 0.5s linear;
 }
 gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider {
-  background-color: #2a60c8;
+  background-color: var(--gse-ui-toggle-track-enabled-on-backgroundColor);
+}
+gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider.gux-disabled {
+  background-color: var(--gse-ui-toggle-track-disabled-on-backgroundColor);
+}
+gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider.gux-disabled .gux-switch {
+  border: var(--gse-ui-toggle-handle-hover-disabled-border-width) var(--gse-ui-toggle-handle-hover-disabled-border-style) var(--gse-ui-toggle-handle-hover-disabled-border-color);
+}
+gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider:hover {
+  background-color: var(--gse-ui-toggle-track-hover-on-backgroundColor);
+}
+gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider:hover .gux-switch {
+  border: var(--gse-ui-toggle-handle-hover-border-width) var(--gse-ui-toggle-handle-hover-border-style) var(--gse-ui-toggle-handle-hover-border-color);
 }
 gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch {
-  transform: translateX(14px);
+  transform: translateX(calc(var(--gse-ui-toggle-track-width) - var(--gse-ui-toggle-track-height)));
 }
 gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon {
   color: #2a60c8;

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

@@ -20,11 +20,13 @@ export class GuxToggleSlider {
     }
   }
   render() {
+    const isError = this.errorId.length > 0;
     return (h("div", { class: {
         'gux-toggle-slider': true,
         'gux-checked': this.checked,
-        'gux-disabled': this.disabled
-      }, role: "checkbox", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), tabindex: this.disabled ? '' : '0', ref: el => (this.checkboxElement = el) }, h("div", { class: "gux-slider" }, h("div", { class: "gux-switch" }, h("gux-icon", { "icon-name": "checkmark", decorative: true })))));
+        'gux-disabled': this.disabled,
+        'gux-error': isError
+      }, role: "checkbox", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), tabindex: this.disabled ? '' : '0', ref: el => (this.checkboxElement = el) }, h("div", { class: "gux-slider" }, h("div", { class: "gux-switch" }, !isError && h("gux-icon", { "icon-name": "checkmark", decorative: true })))));
   }
   static get is() { return "gux-toggle-slider"; }
   static get originalStyleUrls() {