genesys-spark-components 4.0.0-beta.54 → 4.0.0-beta.56

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -13,9 +13,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -46,7 +45,7 @@
 }
 .gux-form-field-legend-label.gux-beside {
   position: relative;
-  top: 8px;
+  top: var(--gse-ui-formControl-input-top);
   float: left;
   width: fit-content;
   min-width: 45px;
@@ -68,9 +67,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -13,9 +13,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -46,7 +45,7 @@
 }
 .gux-form-field-legend-label.gux-beside {
   position: relative;
-  top: 8px;
+  top: var(--gse-ui-formControl-input-top);
   float: left;
   width: fit-content;
   min-width: 45px;
@@ -68,9 +67,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

package/dist/collection/components/stable/{gux-alert → gux-inline-alert}/gux-inline-alert.js

@@ -57,7 +57,7 @@ export class GuxAlert {
             "GuxAlertAccent": {
               "location": "import",
               "path": "./gux-inline-alert.types",
-              "id": "src/components/stable/gux-alert/gux-inline-alert.types.ts::GuxAlertAccent"
+              "id": "src/components/stable/gux-inline-alert/gux-inline-alert.types.ts::GuxAlertAccent"
             }
           }
         },

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

@@ -0,0 +1,18 @@
+import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
+describe('gux-inline-alert', () => {
+  describe('#render', () => {
+    [
+      `<gux-inline-alert accent="info">Note: This is an information alert.</gux-inline-alert>`,
+      `<gux-inline-alert accent="success">Note: This is a success alert.</gux-inline-alert>`,
+      `<gux-inline-alert accent="warning">Note: This is a warning alert.</gux-inline-alert>`,
+      `<gux-inline-alert accent="error">Note: This is a warning alert.</gux-inline-alert>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-inline-alert');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/{gux-alert → gux-inline-alert}/tests/gux-inline-alert.spec.js

@@ -2,17 +2,13 @@ import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxAlert } from "../gux-inline-alert";
 const components = [GuxAlert];
 const language = 'en';
-describe('gux-alert-beta', () => {
+describe('gux-inline-alert', () => {
   describe('#render', () => {
     [
-      `<gux-alert-beta accent="info">Note: This is an information alert.</gux-alert-beta>`,
-      ` <gux-alert-beta accent="success">Note: This is a success alert.</gux-alert-beta>`,
-      `<gux-alert-beta accent="warning-octogon"
-      >Note: This is a warning alert.</gux-alert-beta
-    >`,
-      `<gux-alert-beta accent="warning-triangle"
-    >Note: This is a warning alert.</gux-alert-beta
-  >`
+      `<gux-inline-alert accent="info">Note: This is an information alert.</gux-inline-alert>`,
+      `<gux-inline-alert accent="success">Note: This is a success alert.</gux-inline-alert>`,
+      `<gux-inline-alert accent="warning">Note: This is a warning alert.</gux-inline-alert>`,
+      `<gux-inline-alert accent="error">Note: This is a warning alert.</gux-inline-alert>`
     ].forEach((html, index) => {
       it(`should render component as expected (${index + 1})`, async () => {
         const page = await newSpecPage({ components, html, language });

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

@@ -2,8 +2,7 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-menu-padding);
 }

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

@@ -4,8 +4,7 @@
   max-height: 20rem;
   padding: var(--gse-ui-menu-padding);
   margin: 0;
-  overflow-x: visible;
-  overflow-y: auto;
+  overflow: visible auto;
   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);
@@ -22,9 +21,8 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   text-align: center;
 }
 .gux-message-container .gux-no-matches {

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

@@ -4,9 +4,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-menu-option-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
   font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);

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

@@ -4,9 +4,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-menu-option-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
   font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);

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

@@ -16,9 +16,8 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.css

@@ -3,9 +3,8 @@ gux-pagination-buttons .gux-pagination-buttons-container {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch flex-end;
   align-items: center;
-  justify-content: flex-end;
   margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 gux-pagination-buttons .gux-pagination-buttons-container > div {
@@ -25,9 +24,8 @@ gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons
   flex-shrink: 0;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
 }
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current,
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {

package/dist/collection/components/stable/gux-pagination/gux-pagination-items-per-page/gux-pagination-items-per-page.css

@@ -3,9 +3,8 @@ gux-pagination-items-per-page .gux-pagination-items-per-page-container {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
 }
 gux-pagination-items-per-page .gux-pagination-items-per-page-container > div {
   flex: 0 1 auto;

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

@@ -7,9 +7,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch space-between;
   align-items: center;
-  justify-content: space-between;
   height: var(--gse-ui-dataTableItems-cell-tablePagination-height);
   padding: var(--gse-ui-dataTableItems-tablePagination-padding);
   background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
@@ -20,10 +19,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
   align-self: auto;
-  justify-content: flex-start;
   order: 0;
 }
 .gux-pagination-container .gux-pagination-info > * {

package/dist/collection/components/stable/gux-pagination-cursor/gux-pagination-cursor.css

@@ -2,9 +2,8 @@
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch space-between;
   align-items: flex-start;
-  justify-content: space-between;
   padding: var(--gse-ui-dataTableItems-tablePagination-padding);
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);

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

@@ -23,9 +23,8 @@
 .gux-popover-wrapper .gux-popover-header {
   display: flex;
   flex-direction: row;
-  align-content: center;
+  place-content: center space-between;
   align-items: center;
-  justify-content: space-between;
   padding-bottom: var(--gse-ui-popover-gap);
   font-family: var(--gse-ui-popover-title-text-fontFamily);
   font-size: var(--gse-ui-popover-title-text-fontSize);

package/dist/collection/components/stable/gux-table/gux-sort-control/gux-sort-control.css

@@ -4,9 +4,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: flex-start;
+  place-content: flex-start flex-start;
   align-items: center;
-  justify-content: flex-start;
   border-top: var(--gse-ui-dataTableItems-header-selectedBar-height) solid transparent;
   border-bottom: var(--gse-ui-dataTableItems-header-selectedBar-height) solid transparent;
 }

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

@@ -41,8 +41,7 @@ gux-tabs .gux-tab-container {
   box-sizing: content-box;
   display: flex;
   width: 100%;
-  overflow-x: hidden;
-  overflow-y: hidden;
+  overflow: hidden hidden;
   background-color: transparent;
 }
 gux-tabs .gux-scrollable-section {

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() {