genesys-spark-components 4.0.0-beta.55 → 4.0.0-beta.57

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

@@ -1,117 +1,62 @@
-.gux-tab-sorting :focus-within {
-  margin-bottom: 4px;
-}
-
-gux-tab-advanced:not(:last-child) .gux-tab:not(.gux-dropdown-options) .gux-tab-button {
-  border-right: 1px solid #d7dce5;
-}
-gux-tab-advanced:not(:last-child) .gux-dropdown-options .gux-tab-options-button {
-  border-right: 1px solid #d7dce5;
-}
 gux-tab-advanced .gux-tab {
   display: flex;
   align-items: center;
-  width: 126px;
-  height: 50px;
-  padding-bottom: 2px;
-  overflow: hidden;
-  border-radius: 4px 4px 0 0;
-  transition: width 0.4s ease-out;
+  border-color: transparent;
+  border-top-width: var(--gse-ui-advancedTabs-item-indicator-height);
+  border-bottom-style: solid;
+  border-bottom-width: var(--gse-ui-advancedTabs-item-indicator-height);
 }
-gux-tab-advanced .gux-tab .gux-tab-button {
+gux-tab-advanced .gux-tab .gux-buttons {
   display: flex;
+  flex: 1 1 0;
+  gap: var(--gse-ui-advancedTabs-item-gap);
   align-items: center;
-  width: 100%;
-  width: 125px;
-  height: 50px;
-  padding-right: 0;
-  padding-left: 16px;
-  color: #000;
-  background-color: #f6f7f9;
-  border: none;
-}
-gux-tab-advanced .gux-tab .gux-tab-button:focus-visible {
-  height: 90%;
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
-  outline: none;
-}
-gux-tab-advanced .gux-tab.gux-show {
-  width: 160px;
-}
-gux-tab-advanced .gux-tab.gux-show.gux-disabled .gux-tab-button {
-  color: rgba(0, 0, 0, 0.5);
-}
-gux-tab-advanced .gux-tab.gux-show.gux-disabled .gux-tab-options-button {
-  color: rgba(46, 57, 76, 0.5);
-  pointer-events: none;
-  cursor: default;
-}
-gux-tab-advanced .gux-tab .gux-tab-options-button {
-  z-index: 1;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 30px;
-  padding: 0;
-  cursor: pointer;
-  background-color: #f6f7f9;
-  border: none;
-}
-gux-tab-advanced .gux-tab .gux-tab-options-button:focus-visible {
-  outline: none;
-}
-gux-tab-advanced .gux-tab .gux-tab-options-button:focus-visible gux-icon {
-  padding-right: 0;
-  padding-left: 0;
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
+  width: var(--gse-ui-advancedTabs-item-width);
+  min-width: 0;
+}
+gux-tab-advanced .gux-tab .gux-buttons .gux-tab-button {
+  all: unset;
+  flex: 1 1 0;
+  width: 100px;
+  min-width: 0;
+  padding: var(--gse-ui-advancedTabs-item-padding);
+}
+gux-tab-advanced .gux-tab .gux-buttons .gux-tab-button:focus-visible {
+  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-advancedTabs-item-focus-borderRadius);
+  outline-offset: calc(-1 * var(--gse-semantic-focusRing-default-border-width));
+}
+gux-tab-advanced .gux-tab .gux-buttons .gux-tab-button .gux-tab-button-text {
+  font-family: var(--gse-ui-advancedTabs-item-itemText-fontFamily);
+  font-size: var(--gse-ui-advancedTabs-item-itemText-fontSize);
+  font-weight: var(--gse-ui-advancedTabs-item-itemText-fontWeight);
+  line-height: var(--gse-ui-advancedTabs-item-itemText-lineHeight);
+  color: var(--gse-ui-advancedTabs-item-text-color);
+  white-space: nowrap;
 }
-gux-tab-advanced .gux-tab .gux-tab-options-button gux-icon {
-  width: 16px;
-  height: 16px;
-  padding-right: 16px;
-  padding-left: 8px;
-  transition: color 0.25s;
+gux-tab-advanced .gux-tab .gux-tab-options .gux-tab-options-trigger gux-icon {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
 }
-gux-tab-advanced .gux-tab:not(.gux-dropdown-options) .gux-tab-button {
-  width: 160px;
-  height: 30px;
-  padding-right: 16px;
+gux-tab-advanced .gux-tab .gux-tab-options .gux-tab-options-container {
+  --no-op: none;
 }
-gux-tab-advanced .gux-tab:not(.gux-dropdown-options) .gux-tab-button:focus-visible {
-  height: 90%;
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
-  outline: none;
+gux-tab-advanced .gux-tab .gux-divider {
+  width: var(--gse-ui-advancedTabs-item-divider-right-width);
+  height: var(--gse-ui-advancedTabs-item-divider-right-height);
+  background-color: var(--gse-ui-advancedTabs-divider-dividerColor);
 }
-gux-tab-advanced .gux-tab .tab-icon-container {
-  display: flex;
-  flex: 0 0 16px;
-  align-items: center;
-  justify-content: center;
-  height: 14px;
-  margin-right: 8px;
-}
-gux-tab-advanced .gux-tab .tab-icon-container gux-icon {
-  width: 100%;
+gux-tab-advanced .gux-tab:hover:not(.gux-disabled), gux-tab-advanced .gux-tab:focus-within {
+  border-bottom-color: var(--gse-ui-advancedTabs-item-indicator-activeColor);
 }
 gux-tab-advanced .gux-tab.gux-selected {
-  padding-bottom: 0;
-  background-color: #fdfdfd;
-  border-bottom: 2px solid #2a60c8;
-}
-gux-tab-advanced .gux-tab.gux-selected .gux-tab-button {
-  background-color: #fdfdfd;
+  background-color: var(--gse-ui-advancedTabs-item-backgroundColor);
+  border-bottom-color: var(--gse-ui-advancedTabs-item-indicator-activeColor);
 }
-gux-tab-advanced .gux-tab.gux-selected .gux-tab-options-button {
-  background-color: #fdfdfd;
+gux-tab-advanced .gux-tab.gux-selected.gux-disabled {
+  border-bottom-color: color-mix(in srgb, var(--gse-ui-advancedTabs-item-indicator-activeColor) 50%, white);
 }
-gux-tab-advanced .gux-tab:hover:not(.gux-selected):not(.gux-disabled) {
-  padding-bottom: 0;
-  border-bottom: 2px solid #8a97ad;
-}
-gux-tab-advanced .gux-tab gux-tooltip-title {
-  font-size: 14px;
-  white-space: nowrap;
+gux-tab-advanced .gux-tab.gux-disabled .gux-buttons .gux-tab-button .gux-tab-button-text {
+  color: color-mix(in srgb, var(--gse-ui-advancedTabs-item-text-color) 50%, white);
 }

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

@@ -1,4 +1,4 @@
-import { h, writeTask } from "@stencil/core";
+import { h } from "@stencil/core";
 import { eventIsFrom } from "../../../../utils/dom/event-is-from";
 import { randomHTMLId } from "../../../../utils/dom/random-html-";
 import { afterNextRenderTimeout } from "../../../../utils/dom/after-next-render";
@@ -17,7 +17,6 @@ export class GuxTabAdvanced {
     this.active = false;
     this.guxDisabled = false;
     this.popoverHidden = true;
-    this.hasAnimated = false;
   }
   onFocusin(event) {
     if (!this.focusinFromClick &&
@@ -37,8 +36,20 @@ export class GuxTabAdvanced {
   onKeydown(event) {
     switch (event.key) {
       case 'ArrowDown':
+        if (eventIsFrom('.gux-tab-options-trigger', event)) {
+          event.stopPropagation();
+          event.preventDefault();
+          this.popoverHidden = false;
+          this.focusFirstItemInPopupList();
+        }
+        if (eventIsFrom('gux-list[slot="dropdown-options"]', event)) {
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+        }
+        break;
       case 'Enter':
-        if (eventIsFrom('.gux-tab-options-button', event)) {
+        if (eventIsFrom('.gux-tab-options-trigger', event)) {
+          event.stopPropagation();
           event.preventDefault();
           this.popoverHidden = false;
           this.focusFirstItemInPopupList();
@@ -54,18 +65,29 @@ export class GuxTabAdvanced {
           });
         }
         break;
+      case 'ArrowRight':
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'Tab':
+      case 'Home':
+      case 'End':
+        if (eventIsFrom('gux-list[slot="dropdown-options"]', event)) {
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+        }
+        break;
     }
   }
   onKeyup(event) {
     switch (event.key) {
       case ' ':
-        if (eventIsFrom('.gux-tab-options-button', event)) {
+        if (eventIsFrom('.gux-tab-options-trigger', event)) {
           this.focusFirstItemInPopupList();
         }
     }
   }
   onClick(event) {
-    if (eventIsFrom('.gux-tab-options-button', event)) {
+    if (eventIsFrom('.gux-tab-options-trigger', event)) {
       return;
     }
     if (!this.active && !this.guxDisabled) {
@@ -113,27 +135,21 @@ export class GuxTabAdvanced {
     this.tabTitle = this.root
       .querySelector('gux-tooltip-title')
       .textContent.trim();
-    if (!this.hasAnimated) {
-      writeTask(() => {
-        this.root.querySelector('.gux-tab').classList.add('gux-show');
-        this.hasAnimated = true;
-      });
-    }
   }
   popoverOnClick(e) {
     e.stopPropagation();
   }
-  getDropdownOptions() {
+  renderTabOptions() {
     if (this.hasDropdownOptions) {
-      return [
-        h("button", { id: this.dropdownOptionsButtonId, "aria-expanded": (!this.popoverHidden).toString(), type: "button", class: "gux-tab-options-button", ref: el => (this.tabOptionsButtonElement = el), onClick: () => this.toggleOptions(), tabIndex: this.active ? 0 : -1, disabled: this.guxDisabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.i18n('options', {
-            tabTitle: this.tabTitle
-          }) })),
-        h("gux-popover-list", { position: "top-end", for: this.dropdownOptionsButtonId, displayDismissButton: false, hidden: this.popoverHidden, closeOnClickOutside: true, onGuxdismiss: () => (this.popoverHidden = true), onClick: (e) => this.popoverOnClick(e), onFocusout: e => e.stopImmediatePropagation() }, h("div", { class: "gux-dropdown-option-container", onClick: (e) => this.onSelectDropdownOption(e) }, h("slot", { name: "dropdown-options" })))
-      ];
+      return (h("div", { class: "gux-tab-options" }, h("gux-button-slot", { accent: "ghost" }, h("button", { id: this.dropdownOptionsButtonId, "aria-expanded": (!this.popoverHidden).toString(), type: "button", class: "gux-tab-options-trigger", ref: el => (this.tabOptionsButtonElement = el), onClick: () => this.toggleOptions(), tabIndex: this.active ? 0 : -1, disabled: this.guxDisabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.i18n('options', {
+          tabTitle: this.tabTitle
+        }) }))), h("gux-popover-list", { position: "top-end", for: this.dropdownOptionsButtonId, displayDismissButton: false, "is-open": !this.popoverHidden, closeOnClickOutside: true, onGuxdismiss: () => (this.popoverHidden = true), onClick: (e) => this.popoverOnClick(e), onFocusout: e => e.stopImmediatePropagation() }, h("div", { class: "gux-dropdown-options-container", onClick: (e) => this.onSelectDropdownOption(e) }, h("slot", { name: "dropdown-options" })))));
     }
     return null;
   }
+  renderTabButton() {
+    return (h("button", { class: "gux-tab-button", type: "button", role: "tab", disabled: this.guxDisabled, "aria-selected": this.active.toString(), "aria-disabled": this.guxDisabled.toString(), "aria-controls": `gux-${this.tabId}-panel`, ref: el => (this.buttonElement = el), tabIndex: this.active ? 0 : -1, id: `gux-${this.tabId}-tab` }, h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, h("span", { class: "gux-tab-button-text" }, h("slot", null)))));
+  }
   render() {
     return [
       h("div", { class: {
@@ -141,7 +157,7 @@ export class GuxTabAdvanced {
           'gux-selected': this.active,
           'gux-dropdown-options': this.hasDropdownOptions,
           'gux-disabled': this.guxDisabled
-        } }, h("button", { class: "gux-tab-button", type: "button", role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.guxDisabled.toString(), "aria-controls": `gux-${this.tabId}-panel`, ref: el => (this.buttonElement = el), tabIndex: this.active ? 0 : -1, id: `gux-${this.tabId}-tab` }, h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, h("span", null, h("slot", null)))), this.getDropdownOptions())
+        } }, h("div", { class: "gux-buttons" }, this.renderTabButton(), this.renderTabOptions()), h("div", { class: "gux-divider" }))
     ];
   }
   static get is() { return "gux-tab-advanced"; }
@@ -197,8 +213,7 @@ export class GuxTabAdvanced {
   static get states() {
     return {
       "active": {},
-      "popoverHidden": {},
-      "hasAnimated": {}
+      "popoverHidden": {}
     };
   }
   static get events() {

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

@@ -4,119 +4,40 @@
 /* Headings */
 /* Body Copy */
 /* Anchor */
-gux-tab-advanced-list .gux-tab-container {
+.gux-tab-container {
   display: flex;
-  align-items: flex-end;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start;
   width: 100%;
-  height: 50px;
   margin-bottom: 16px;
-  overflow: auto hidden;
-  background-color: #f6f7f9;
-  border-bottom: 1px solid #d7dce5;
-  border-radius: 4px 4px 0 0;
+  background-color: var(--gse-ui-advancedTabs-set-backgroundColor);
 }
-gux-tab-advanced-list .gux-tab-container .action-button-container {
+.gux-tab-container .gux-scrollable-section {
   display: flex;
-  border-radius: 4px;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button {
-  min-width: 35px;
-  height: 50px;
-  padding: 0;
-  margin-left: 2px;
-  color: #2e394c;
-  background-color: #e2e6ee;
-  border: none;
-  border-radius: 4px;
-  transition: color 0.25s;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button [slot=add-tab] {
-  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   align-items: center;
-  padding: 0 12px;
-  white-space: nowrap;
-  font-family: var(--gse-core-typography-body-sm-fontFamily), var(--gse-core-fontFamily-body), sans-serif;
-  font-size: var(--gse-core-typography-body-sm-fontSize);
-  line-height: var(--gse-core-typography-body-sm-lineHeight);
-  font-weight: var(--gse-core-fontWeight-bold);
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button [slot=add-tab] gux-icon {
-  padding-right: 8px;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:disabled {
-  opacity: 0.5;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:hover {
-  background-color: #d7dce5;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:active {
-  background-color: #c8cfda;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 3px #aac9ff;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:focus-visible {
-  border-radius: 5px;
-  outline: none;
-  box-shadow: inset 0 0 0 3px #aac9ff;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button gux-icon {
-  width: 16px;
-  height: 16px;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container {
-  display: flex;
-  border-radius: 4px;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 50px;
-  padding: 0;
-  color: #2e394c;
-  background-color: #e2e6ee;
-  border: none;
-  border-radius: 4px;
-  transition: color 0.25s;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
-  outline: none;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button gux-icon {
-  width: 16px;
-  height: 16px;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
-  border: 3px solid #aac9ff;
-  outline: none;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:hover {
-  background-color: #d7dce5;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:active {
-  background-color: #c8cfda;
-}
-gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
-  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-tab-advanced-list .gux-tab-container .gux-scrollable-section {
-  display: flex;
-  align-items: flex-end;
-  height: 50px;
+  justify-content: flex-start;
+  width: 100%;
   overflow-x: auto;
+  border-bottom: 1px solid var(--gse-ui-advancedTabs-divider-dividerColor);
   scroll-behavior: smooth;
   scrollbar-width: none;
 }
-gux-tab-advanced-list .gux-tab-container .gux-scrollable-section::-webkit-scrollbar {
+.gux-tab-container .gux-scrollable-section::-webkit-scrollbar {
   height: 0;
 }
-gux-tab-advanced-list .gux-sr-only {
+.gux-tab-container .gux-scrollable-section .gux-tablist {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.gux-sr-only {
   position: absolute;
   top: auto;
   left: -10000px;

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

@@ -31,14 +31,14 @@ export class GuxTabAdvancedList {
   }
   onFocusin(event) {
     if (this.allowSort &&
-      eventIsFrom('.gux-scrollable-section', event) &&
+      eventIsFrom('.gux-tablist', event) &&
       !this.keyboardSort) {
       this.ariaLiveAlert = 'toggleSort';
     }
   }
   onFocusout(event) {
     if (!this.root
-      .querySelector('.gux-scrollable-section')
+      .querySelector('.gux-tablist')
       .contains(event.relatedTarget)) {
       this.tabTriggers.forEach((tabTrigger, index) => {
         void tabTrigger.guxGetActive().then(activeElement => {
@@ -78,7 +78,7 @@ export class GuxTabAdvancedList {
         if (this.keyboardSort &&
           !eventIsFrom('.gux-tab-options-button', event)) {
           this.ariaLiveAlert = '';
-          const parentNode = this.root.querySelector('.gux-scrollable-section');
+          const parentNode = this.root.querySelector('.gux-tablist');
           const allNodes = parentNode.querySelectorAll('gux-tab-advanced');
           const targetNodeIndex = Array.prototype.indexOf.call(allNodes, this.sortTarget);
           let insertBeforeTab;
@@ -111,7 +111,7 @@ export class GuxTabAdvancedList {
         if (this.keyboardSort &&
           !eventIsFrom('.gux-tab-options-button', event)) {
           this.ariaLiveAlert = '';
-          const parentNode = this.root.querySelector('.gux-scrollable-section');
+          const parentNode = this.root.querySelector('.gux-tablist');
           const allNodes = parentNode.querySelectorAll('gux-tab-advanced');
           const targetNodeIndex = Array.prototype.indexOf.call(allNodes, this.sortTarget);
           const insertBeforeTab = allNodes[targetNodeIndex - 1] || null;
@@ -137,7 +137,7 @@ export class GuxTabAdvancedList {
         if (this.keyboardSort && this.allowSort) {
           this.keyboardSort = false;
           this.ariaLiveAlert = 'sortCancelled';
-          const parentNode = this.root.querySelector('.gux-scrollable-section');
+          const parentNode = this.root.querySelector('.gux-tablist');
           const allNodes = this.tabTriggers;
           const targetNodeIndex = this.initialSortIndex;
           const insertBeforeTab = allNodes[targetNodeIndex] || null;
@@ -215,7 +215,7 @@ export class GuxTabAdvancedList {
           }
           else {
             this.keyboardSort = true;
-            this.sortTarget = event.target.parentNode.parentNode;
+            this.sortTarget = event.target.closest('gux-tab-advanced');
             this.tabTriggers.forEach((tabTrigger, index) => {
               var _a;
               const active = tabTrigger.tabId ===
@@ -277,7 +277,7 @@ export class GuxTabAdvancedList {
     }
   }
   createSortable() {
-    this.sortableInstance = new Sortable(this.root.querySelector('.gux-scrollable-section'), {
+    this.sortableInstance = new Sortable(this.root.querySelector('.gux-tablist'), {
       animation: 250,
       draggable: 'gux-tab-advanced',
       filter: '.ignore-sort',
@@ -413,20 +413,25 @@ export class GuxTabAdvancedList {
     this.disableAddTabButton = tabs.length >= this.tabLimit;
   }
   render() {
-    const AddNewTabButton = (props) => {
-      return (h("button", { title: this.disableAddTabButton
-          ? this.i18n('disableNewTab')
-          : this.root.querySelector('[slot="add-tab"]')
-            ? this.root.querySelector('[slot="add-tab"]').textContent.trim()
-            : this.i18n('createNewTab'), class: "add-tab-button", onClick: () => props.onClick(), disabled: this.disableAddTabButton }, h("slot", { name: "add-tab" }, h("gux-icon", { "icon-name": "add", decorative: true }))));
-    };
     return [
-      h("span", { class: "gux-sr-only gux-aria-live-region", "aria-live": "polite" }, this.ariaLiveAlert ? this.i18n(this.ariaLiveAlert) : ''),
-      h("div", { class: "gux-tab-container" }, h("div", { class: "action-button-container" }, this.renderScrollButton('scrollLeft')), h("div", { role: "tablist", class: `gux-scrollable-section ${this.keyboardSort ? 'gux-tab-sorting' : ''}`, "aria-owns": this.triggerIds }, h("slot", null)), h("div", { class: "action-button-container" }, this.renderScrollButton('scrollRight'), this.showNewTabButton ? (h(AddNewTabButton, { onClick: () => this.newTab.emit() })) : null))
+      this.renderAlert(),
+      h("div", { class: "gux-tab-container" }, this.renderScrollButton('scrollLeft'), h("div", { class: "gux-scrollable-section" }, h("div", { class: "gux-tablist", role: "tablist", "data-gux-tab-sorting": this.keyboardSort, "aria-owns": this.triggerIds }, h("slot", null)), this.renderAddButton()), this.renderScrollButton('scrollRight'))
     ];
   }
+  renderAlert() {
+    return (h("div", { class: "gux-sr-only gux-aria-live-region", "aria-live": "polite" }, this.ariaLiveAlert ? this.i18n(this.ariaLiveAlert) : ''));
+  }
+  renderAddButton() {
+    return (h("div", null, this.showNewTabButton ? (h("gux-button-slot", { class: "gux-add-button", accent: "ghost" }, h("button", { onClick: () => this.newTab.emit(), disabled: this.disableAddTabButton }, h("slot", { name: "add-tab" }, h("gux-icon", { "icon-name": "add", "screenreader-text": this.disableAddTabButton
+        ? this.i18n('disableNewTab')
+        : this.root.querySelector('[slot="add-tab"]')
+          ? this.root
+            .querySelector('[slot="add-tab"]')
+            .textContent.trim()
+          : this.i18n('createNewTab') }))))) : null));
+  }
   renderScrollButton(direction) {
-    return (h("div", { class: "gux-scroll-button-container" }, this.hasScrollbar ? (h("button", { tabindex: "-1", title: this.i18n(direction), "aria-label": this.i18n(direction), class: "gux-scroll-button", onDragOver: () => this.getScrollDirection(direction), onClick: () => this.getScrollDirection(direction) }, h("gux-icon", { "icon-name": this.getChevronIconName(direction), decorative: true }))) : null));
+    return (h("div", null, this.hasScrollbar ? (h("gux-button-slot", { class: "gux-scroll-button", accent: "ghost" }, h("button", { tabindex: "-1", onDragOver: () => this.getScrollDirection(direction), onClick: () => this.getScrollDirection(direction) }, h("gux-icon", { "icon-name": this.getChevronIconName(direction), "screenreader-text": this.i18n(direction) })))) : null));
   }
   getScrollDirection(direction) {
     switch (direction) {

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

@@ -1,7 +1,7 @@
-gux-tab-advanced-panel div[role=tabpanel]:focus {
+gux-tab-advanced-panel .gux-tabpanel:focus {
   outline: none;
 }
-gux-tab-advanced-panel div[role=tabpanel]:focus-visible {
+gux-tab-advanced-panel .gux-tabpanel:focus-visible {
   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);
 }

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

@@ -17,7 +17,7 @@ export class GuxTabAdvancedPanel {
     }
   }
   render() {
-    return (h("div", { id: `gux-${this.tabId}-panel`, role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active, "aria-live": "assertive" }, h("slot", null)));
+    return (h("div", { id: `gux-${this.tabId}-panel`, class: "gux-tabpanel", role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active, "aria-live": "assertive" }, h("slot", null)));
   }
   static get is() { return "gux-tab-advanced-panel"; }
   static get originalStyleUrls() {

package/dist/collection/components/stable/gux-tabs-advanced/gux-tabs-advanced.js

@@ -46,20 +46,10 @@ export class GuxTabsAdvanced {
     trackComponent(this.root);
   }
   render() {
-    return (h(Host, null, h("div", { class: "gux-tabs" }, h("slot", { name: "tab-list" }), h("div", null, h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
+    return (h(Host, null, h("slot", { name: "tab-list" }), h("slot", { onSlotchange: this.onSlotchange.bind(this) })));
   }
   static get is() { return "gux-tabs-advanced"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gux-tabs-advanced.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gux-tabs-advanced.css"]
-    };
-  }
   static get properties() {
     return {
       "activeTab": {

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

@@ -11,7 +11,7 @@ const axeExclusions = [
   },
   {
     issueId: 'aria-required-children',
-    target: '.gux-scrollable-section',
+    target: '.gux-tablist',
     exclusionReason: 'To be addressed in COMUI-2392. New violation picked up after upgrading from axe-core v4.4.2 to v4.8.2'
   }
 ];
@@ -206,17 +206,17 @@ describe('gux-tabs-advanced', () => {
     });
     it('should open and close options popup on click', async () => {
       const page = await newNonrandomE2EPage({ html: htmlExample1 });
-      const optionPopoverTarget = await page.find('gux-tab-advanced[tab-id="1-1"] .gux-tab-options-button');
+      const optionPopoverTarget = await page.find('gux-tab-advanced[tab-id="1-1"] .gux-tab-options-trigger');
       await optionPopoverTarget.click();
       await page.waitForChanges();
       await a11yCheck(page, axeExclusions, 'options popover expanded');
       const optionPopover = await page.find('gux-tab-advanced[tab-id="1-1"] gux-popover-list');
-      let optionPopoverHidden = optionPopover.getAttribute('hidden');
-      expect(optionPopoverHidden).toBe(null);
+      let optionPopoverOpen = optionPopover.getAttribute('is-open');
+      expect(optionPopoverOpen).toBe('');
       await optionPopoverTarget.click();
       await page.waitForChanges();
-      optionPopoverHidden = optionPopover.getAttribute('hidden');
-      expect(optionPopoverHidden).toBe('');
+      optionPopoverOpen = optionPopover.getAttribute('is-open');
+      expect(optionPopoverOpen).toBe(null);
     });
   });
 });

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

@@ -61,29 +61,6 @@
   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);
 }
-.gux-container[data-placement=bottom] .gux-arrow, .gux-container[data-placement=bottom-start] .gux-arrow, .gux-container[data-placement=bottom-end] .gux-arrow {
-  border-top: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-  border-left: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-}
-.gux-container[data-placement=top] .gux-arrow, .gux-container[data-placement=top-start] .gux-arrow, .gux-container[data-placement=top-end] .gux-arrow {
-  border-right: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-  border-bottom: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-}
-.gux-container[data-placement=left] .gux-arrow, .gux-container[data-placement=left-start] .gux-arrow, .gux-container[data-placement=left-end] .gux-arrow {
-  border-top: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-  border-right: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-}
-.gux-container[data-placement=right] .gux-arrow, .gux-container[data-placement=right-start] .gux-arrow, .gux-container[data-placement=right-end] .gux-arrow {
-  border-bottom: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-  border-left: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
-}
-.gux-container .gux-arrow {
-  position: absolute;
-  width: 13px;
-  height: 13px;
-  background: inherit;
-  border-radius: var(--gse-ui-tooltip-borderRadius);
-}
 .gux-container ::slotted(gux-icon) {
   align-self: center;
   width: var(--gse-ui-icon-size-sm);
@@ -95,22 +72,6 @@
   background-color: var(--gse-ui-tooltip-dark-backgroundColor);
   border-color: var(--gse-ui-tooltip-dark-border-color);
 }
-.gux-container.gux-dark[data-placement=bottom] .gux-arrow, .gux-container.gux-dark[data-placement=bottom-start] .gux-arrow, .gux-container.gux-dark[data-placement=bottom-end] .gux-arrow {
-  border-top: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
-  border-left: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
-}
-.gux-container.gux-dark[data-placement=top] .gux-arrow, .gux-container.gux-dark[data-placement=top-start] .gux-arrow, .gux-container.gux-dark[data-placement=top-end] .gux-arrow {
-  border-right: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
-  border-bottom: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
-}
-.gux-container.gux-dark[data-placement=left] .gux-arrow, .gux-container.gux-dark[data-placement=left-start] .gux-arrow, .gux-container.gux-dark[data-placement=left-end] .gux-arrow {
-  border-top: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
-  border-right: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
-}
-.gux-container.gux-dark[data-placement=right] .gux-arrow, .gux-container.gux-dark[data-placement=right-start] .gux-arrow, .gux-container.gux-dark[data-placement=right-end] .gux-arrow {
-  border-bottom: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
-  border-left: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
-}
 .gux-container.gux-dark ::slotted(gux-icon) {
   align-self: center;
   width: var(--gse-ui-icon-size-sm);