genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

package/dist/collection/components/{beta → stable}/gux-table/gux-sort-control/gux-sort-control.js

@@ -1,8 +1,8 @@
 import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../i18n';
 import { trackComponent } from '@utils/tracking/usage';
-import { getClosestElement } from '../../../../utils/dom/get-closest-element';
-import { onMutation } from '../../../../utils/dom/on-mutation';
+import { getClosestElement } from '@utils/dom/get-closest-element';
+import { onMutation } from '@utils/dom/on-mutation';
 import tableResources from '../i18n/en.json';
 export class GuxSortControl {
   constructor() {
@@ -56,10 +56,10 @@ export class GuxSortControl {
   getIconName(colSortDirection) {
     switch (colSortDirection) {
       case 'descending':
-        return 'arrow-solid-up';
+        return 'arrow-solid-down';
       case 'ascending':
       default:
-        return 'arrow-solid-down';
+        return 'arrow-solid-up';
     }
   }
   getNextSort(colSortDirection) {
@@ -101,7 +101,7 @@ export class GuxSortControl {
     return (h("div", { class: "gux-container" }, h("button", { class: {
         'gux-sort-button': true,
         'gux-active': this.active
-      }, type: "button", onClick: () => this.onClick() }, h("span", { class: "gux-sr-only" }, this.getSRText(this.sort)), h("gux-icon", { class: {
+      }, type: "button", onClick: () => this.onClick(), "aria-label": this.getSRText(this.sort) }, h("gux-icon", { class: {
         'gux-sort-icon': true,
         'gux-left': this.isLeftAlignIcon
       }, "icon-name": this.getIconName(this.sort), decorative: true })), h("div", { class: "gux-resize-spacer" })));
@@ -111,7 +111,7 @@ export class GuxSortControl {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-sort-control.less"]
+      "$": ["gux-sort-control.scss"]
     };
   }
   static get styleUrls() {

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

@@ -0,0 +1,63 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+gux-table-select-menu {
+  display: inline-flex;
+  font-family: var(--gse-ui-popover-body-text-fontFamily);
+  font-weight: var(--gse-ui-popover-body-text-fontWeight);
+  line-height: var(--gse-ui-popover-body-text-lineHeight);
+  font-size: var(--gse-ui-popover-body-text-fontSize);
+}
+gux-table-select-menu .gux-select-menu-button {
+  margin-left: var(--gse-ui-dataTableItems-header-gap);
+  padding: 0;
+  color: var(--gse-ui-dataTableItems-cell-chevron-foregroundColor);
+  background-color: inherit;
+  border: none;
+  outline: none;
+}
+gux-table-select-menu .gux-select-menu-button:focus-visible gux-icon {
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
+}
+gux-table-select-menu .gux-select-menu-button gux-icon {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+}

package/dist/collection/components/{beta → stable}/gux-table/gux-table-select-menu/gux-table-select-menu.js

@@ -76,7 +76,7 @@ export class GuxTableSelectMenu {
   static get is() { return "gux-table-select-menu"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-table-select-menu.less"]
+      "$": ["gux-table-select-menu.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/{beta → stable}/gux-table/gux-table-select-menu/gux-table-select-popover/gux-table-header-popover.js

@@ -10,8 +10,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { createPopper } from '@popperjs/core';
 import { h } from '@stencil/core';
-import { OnClickOutside } from '../../../../../utils/decorator/on-click-outside';
-import { onHiddenChange } from '../../../../../utils/dom/on-attribute-change';
+import { OnClickOutside } from '@utils/decorator/on-click-outside';
+import { onHiddenChange } from '@utils/dom/on-attribute-change';
 /**
  * @slot - popover content
  */
@@ -88,7 +88,7 @@ export class GuxTableSelectPopover {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-table-select-popover.less"]
+      "$": ["gux-table-select-popover.scss"]
     };
   }
   static get styleUrls() {

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

@@ -0,0 +1,12 @@
+:host {
+  color: var(--gse-ui-popover-headerColor);
+}
+
+.gux-popover-wrapper {
+  z-index: 2;
+  display: inline-block;
+  padding: var(--gse-ui-popover-gap) 0;
+  background-color: var(--gse-ui-popover-backgroundColor);
+  border-radius: var(--gse-ui-popover-borderRadius);
+  box-shadow: var(--gse-ui-popover-boxShadow-x) var(--gse-ui-popover-boxShadow-y) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-popover-boxShadow-color);
+}

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

@@ -0,0 +1,80 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+:host {
+  display: block;
+  isolation: isolate;
+}
+:host .gux-table {
+  position: relative;
+  height: inherit;
+}
+:host .gux-table .gux-table-container {
+  max-height: 100%;
+  overflow: auto;
+  scrollbar-color: var(--gse-ui-dataTableItems-scrollbar-foregroundColor);
+  scrollbar-width: thin;
+}
+:host .gux-table .gux-table-container.gux-column-resizing-hover, :host .gux-table .gux-table-container.gux-column-resizing {
+  cursor: col-resize;
+}
+:host .gux-empty-table {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - var(--gse-ui-dataTableItems-header-default-height));
+  color: #596373;
+  background: #fdfdfd;
+  font-family: var(--gse-core-fontFamily-heading), var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-semiBold);
+  font-size: var(--gse-core-fontSize-lg);
+  line-height: var(--gse-lineHeight-md);
+}

package/dist/collection/components/{beta → stable}/gux-table/gux-table.js

@@ -1,7 +1,7 @@
 import { Host, h, readTask, forceUpdate } from '@stencil/core';
 import { buildI18nForComponent } from '../../../i18n';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
-import { randomHTMLId } from '../../../utils/dom/random-html-id';
+import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 import { trackComponent } from '@utils/tracking/usage';
 import tableResources from './i18n/en.json';
 const COL_RESIZE_HANDLE_WIDTH = 3;
@@ -13,11 +13,7 @@ export class GuxTable {
     this.slotObserver = new MutationObserver(() => forceUpdate(this));
     this.tableId = randomHTMLId('gux-table');
     this.columnsWidths = {};
-    this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     this.isVerticalScroll = false;
-    this.isHorizontalScroll = false;
-    this.isScrolledToFirstCell = true;
-    this.isScrolledToLastCell = false;
     this.columnResizeHover = false;
     this.compact = false;
     this.objectTable = false;
@@ -34,15 +30,11 @@ export class GuxTable {
       this.prepareResizableColumns();
     }
     this.prepareSelectableRows();
-    this.checkHorizontalScroll();
     this.checkVerticalScroll();
     if (!this.resizeObserver && window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(() => {
         readTask(() => {
-          this.checkHorizontalScroll();
           this.checkVerticalScroll();
-          this.updateScrollState();
-          this.scaleColumnWidths();
         });
       });
     }
@@ -55,6 +47,11 @@ export class GuxTable {
       childList: true
     });
   }
+  checkVerticalScroll() {
+    const tableContainerElement = this.tableContainer;
+    this.isVerticalScroll =
+      tableContainerElement.scrollHeight > tableContainerElement.clientHeight;
+  }
   disconnectedCallback() {
     if (this.resizeObserver) {
       this.resizeObserver.unobserve(this.tableContainer);
@@ -65,16 +62,15 @@ export class GuxTable {
     }
   }
   /******************************* Event Listeners *******************************/
-  onScroll() {
-    this.updateScrollState();
-  }
   onInternalAllRowSelectChange(event) {
     event.stopPropagation();
-    this.handleSelectAllRows();
+    this.handleSelectAllRows(event.detail);
   }
   onInternalRowSelectChange(event) {
     event.stopPropagation();
-    this.handleRowSelection(event.target);
+    const rowCheckbox = event.target;
+    rowCheckbox.selected = event.detail;
+    this.handleRowSelection(rowCheckbox);
   }
   onMouseMove(event) {
     if (this.resizableColumns) {
@@ -141,7 +137,7 @@ export class GuxTable {
     const selectAllCheckbox = this.selectAllCheckbox;
     if (selectAllCheckbox) {
       const rowCheckboxes = this.rowCheckboxes;
-      const filterDisabled = rowCheckboxes.filter(rowBox => rowBox.hasAttribute('disabled') == false);
+      const filterDisabled = rowCheckboxes.filter(rowBox => !rowBox.hasAttribute('disabled'));
       const selectedRows = filterDisabled.filter(box => box.selected);
       const hasRows = Boolean(rowCheckboxes.length);
       const allSelected = selectedRows.length === filterDisabled.length;
@@ -151,12 +147,13 @@ export class GuxTable {
     }
   }
   // Handle a change in state of the select all checkbox
-  handleSelectAllRows() {
+  handleSelectAllRows(selected) {
     const selectAllCheckbox = this.selectAllCheckbox;
     const rowCheckboxes = this.rowCheckboxes;
     rowCheckboxes.forEach(rowBox => {
+      selectAllCheckbox.selected = selected;
       if (!rowBox.hasAttribute('disabled')) {
-        rowBox.selected = selectAllCheckbox.selected;
+        rowBox.selected = selected;
         this.updateRowSelection(rowBox);
       }
     });
@@ -181,101 +178,18 @@ export class GuxTable {
       tableRow.removeAttribute('data-selected-row');
     }
   }
-  /******************************* Scrolling *******************************/
-  nextColumn() {
-    const columns = this.tableColumns;
-    const viewportBounds = this.tableContainer.getBoundingClientRect();
-    // The last column who's right side is out of the viewport
-    // or the last element if we can't find one.
-    const lastVisibleColumn = columns.find(col => col.getBoundingClientRect().right > viewportBounds.right) || columns[columns.length - 1];
-    const lastColumnBounds = lastVisibleColumn.getBoundingClientRect();
-    let distanceToScroll = lastColumnBounds.right - viewportBounds.right;
-    // Don't scroll the whole viewport away if there is a very long column
-    if (distanceToScroll > viewportBounds.width) {
-      distanceToScroll = viewportBounds.width * 0.9;
-    }
-    // Always try to scroll a little bit extra to make sure we aren't caught out by
-    // funny floating-point pixel math behavior.
-    this.tableContainer.scrollLeft += Math.ceil(distanceToScroll);
-    this.updateScrollState();
-  }
-  previousColumn() {
-    const columns = this.tableColumns;
-    const viewportBounds = this.tableContainer.getBoundingClientRect();
-    // The first column who's left side is out of the viewport
-    // or the first element if we can't find one.
-    const firstVisibleColumn = columns
-      .reverse()
-      .find(col => col.getBoundingClientRect().left < viewportBounds.left) ||
-      columns[0];
-    const firstColumnBounds = firstVisibleColumn.getBoundingClientRect();
-    let distanceToScroll = viewportBounds.left - firstColumnBounds.left;
-    // Don't scroll the whole viewport away if there is a very long column
-    if (distanceToScroll > viewportBounds.width) {
-      distanceToScroll = viewportBounds.width * 0.9;
-    }
-    // Always try to scroll a little bit extra to make sure we aren't caught out by
-    // funny floating-point pixel math behavior.
-    this.tableContainer.scrollLeft += -Math.ceil(distanceToScroll);
-    this.updateScrollState();
-  }
-  updateScrollState() {
-    const scrollLeft = this.tableContainer.scrollLeft;
-    const maxScrollLeft = this.tableContainer.scrollWidth - this.tableContainer.clientWidth;
-    this.isScrolledToFirstCell = scrollLeft === 0;
-    this.isScrolledToLastCell =
-      // sometimes this can go less than zero due to the scrollbar constant
-      maxScrollLeft - scrollLeft - this.tableScrollbarConstant <= 0;
-  }
-  checkHorizontalScroll() {
-    const tableWidth = this.slottedTable.getBoundingClientRect().width;
-    const containerWidth = this.root.getBoundingClientRect().width;
-    this.isHorizontalScroll = tableWidth > containerWidth;
-  }
-  checkVerticalScroll() {
-    const tableContainerElement = this.tableContainer;
-    this.isVerticalScroll =
-      tableContainerElement.scrollHeight > tableContainerElement.clientHeight;
-  }
-  get tableScrollbarConstant() {
-    const container = this.tableContainer;
-    return container ? container.offsetWidth - container.clientWidth : 0;
-  }
   /******************************* Resizable Columns *******************************/
   prepareResizableColumns() {
     const styleElement = document.createElement('style');
     styleElement.id = `${this.tableId}-resizable-styles`;
     document.querySelector('head').appendChild(styleElement);
     const columnWidths = this.calculateColumnWidths(this.tableColumns);
-    this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     columnWidths
       // Exclude the last column to allow it to fill the remaining space naturally
       .slice(0, -1)
       .forEach(c => (this.columnsWidths[c.name] = c.width));
     this.setResizableColumnsStyles();
   }
-  /** Scale column pixel widths equal when a resize is observed */
-  scaleColumnWidths() {
-    if (!this.columnResizeState &&
-      this.resizableColumns &&
-      !this.isHorizontalScroll) {
-      const oldColumnWidths = this.calculateColumnWidths(this.tableColumns);
-      const oldTableWidth = this.tableWidth;
-      const newTableWidth = this.getElementComputedWidth(this.slottedTable);
-      oldColumnWidths
-        .map(col => (Object.assign(Object.assign({}, col), { width: this.calcScaledColWidth(col.width, oldTableWidth, newTableWidth) })))
-        // Exclude the last column to allow it to fill the remaining space naturally
-        .slice(0, -1)
-        .forEach(c => (this.columnsWidths[c.name] = c.width));
-      this.tableWidth = newTableWidth;
-      this.setResizableColumnsStyles();
-    }
-  }
-  calcScaledColWidth(colWidth, oldTableWidth, newTableWidth) {
-    const proposedWidth = Math.round((colWidth / oldTableWidth) * newTableWidth);
-    const minWidth = 1;
-    return Math.max(proposedWidth, minWidth);
-  }
   updateResizeState(event) {
     if (this.columnResizeState) {
       const minimumWidth = 1;
@@ -292,7 +206,6 @@ export class GuxTable {
       });
       this.columnsWidths[columnName] = columnWidths.find(c => c.name === columnName).width;
       this.setResizableColumnsStyles();
-      this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     }
     else {
       this.columnResizeHover = false;
@@ -312,7 +225,7 @@ export class GuxTable {
         this.columnResizeState = {
           resizableColumn,
           columnResizeMouseStartX: event.pageX,
-          resizableColumnInitialWidth: this.getElementComputedWidth(resizableColumn)
+          resizableColumnInitialWidth: resizableColumn.clientWidth
         };
       }
     });
@@ -326,16 +239,11 @@ export class GuxTable {
     return (header.getBoundingClientRect().right - event.clientX <
       COL_RESIZE_HANDLE_WIDTH);
   }
-  getElementComputedWidth(element) {
-    return (element.clientWidth -
-      parseInt(window.getComputedStyle(element).paddingLeft) -
-      parseInt(window.getComputedStyle(element).paddingRight));
-  }
   /** Calculates column width minus padding in pixels */
   calculateColumnWidths(columns) {
     return columns.map(c => ({
       name: c.dataset.columnName,
-      width: this.getElementComputedWidth(c)
+      width: c.clientWidth
     }));
   }
   setResizableColumnsStyles() {
@@ -361,13 +269,13 @@ export class GuxTable {
     };
   }
   render() {
-    return (h(Host, { "gs-table-id": this.tableId, "gs-v-scroll": this.isVerticalScroll, "gs-h-scroll": this.isHorizontalScroll, "gs-obj-table": this.objectTable, "gs-compact": this.compact }, h("div", { class: "gux-table" }, h("div", { tabindex: this.isVerticalScroll ? '0' : '-1', id: this.tableId, class: this.tableContainerClasses }, h("slot", { name: "data" })), this.isHorizontalScroll && (h("gux-button-slot-beta", { accent: "secondary" }, h("button", { class: "gux-table-scroll-left", disabled: this.isScrolledToFirstCell, onClick: !this.isScrolledToFirstCell && this.previousColumn.bind(this) }, h("gux-icon", { "icon-name": "chevron-left", "screenreader-text": this.i18n('scrollLeft') })))), this.isHorizontalScroll && (h("gux-button-slot-beta", { accent: "secondary", style: { marginRight: `${this.tableScrollbarConstant}px` } }, h("button", { class: "gux-table-scroll-right", disabled: this.isScrolledToLastCell, style: { marginRight: `${this.tableScrollbarConstant}px` }, onClick: !this.isScrolledToLastCell && this.nextColumn.bind(this) }, h("gux-icon", { "icon-name": "chevron-right", "screenreader-text": this.i18n('scrollRight') })))), this.isTableEmpty && (h("div", { class: "gux-empty-table" }, this.emptyMessage || this.i18n('emptyMessage'))))));
+    return (h(Host, { "gs-table-id": this.tableId, "gs-obj-table": this.objectTable, "gs-compact": this.compact }, h("div", { class: "gux-table" }, h("div", { tabindex: this.isVerticalScroll ? '0' : '-1', id: this.tableId, class: this.tableContainerClasses }, h("slot", { name: "data" })), this.isTableEmpty && (h("div", { class: "gux-empty-table" }, this.emptyMessage || this.i18n('emptyMessage'))))));
   }
-  static get is() { return "gux-table-beta"; }
+  static get is() { return "gux-table"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-table.less"]
+      "$": ["gux-table.scss"]
     };
   }
   static get styleUrls() {
@@ -452,9 +360,6 @@ export class GuxTable {
   static get states() {
     return {
       "isVerticalScroll": {},
-      "isHorizontalScroll": {},
-      "isScrolledToFirstCell": {},
-      "isScrolledToLastCell": {},
       "columnResizeHover": {}
     };
   }
@@ -528,12 +433,6 @@ export class GuxTable {
   static get elementRef() { return "root"; }
   static get listeners() {
     return [{
-        "name": "scroll",
-        "method": "onScroll",
-        "target": undefined,
-        "capture": true,
-        "passive": true
-      }, {
         "name": "internalallrowselectchange",
         "method": "onInternalAllRowSelectChange",
         "target": undefined,

package/dist/collection/components/{beta → stable}/gux-table-toolbar/gux-table-toolbar-action/gux-table-toolbar-action.css

@@ -1,3 +1,3 @@
 :host([disabled]) {
   pointer-events: none;
-}
+}

package/dist/collection/components/{beta → stable}/gux-table-toolbar/gux-table-toolbar-action/gux-table-toolbar-action.js

@@ -27,7 +27,7 @@ export class GuxTableToolbarAction {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-table-toolbar-action.less"]
+      "$": ["gux-table-toolbar-action.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/{beta → stable}/gux-table-toolbar/gux-table-toolbar-custom-action/gux-table-toolbar-custom-action.css

@@ -2,6 +2,7 @@
 button[disabled] {
   pointer-events: none;
 }
+
 .gux-sr-only {
   display: flex;
 }
@@ -14,13 +15,14 @@ button[disabled] {
   clip-path: inset(50%);
   white-space: nowrap;
 }
+
 .gux-action-title {
   display: flex;
   flex-direction: row;
-  gap: 8px;
+  gap: var(--gse-ui-button-gap);
   align-items: center;
 }
-.gux-action-title slot[name='icon']::slotted(gux-icon) {
-  width: 16px;
-  height: 16px;
-}
+.gux-action-title slot[name=icon]::slotted(gux-icon) {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+}

package/dist/collection/components/{beta → stable}/gux-table-toolbar/gux-table-toolbar-custom-action/gux-table-toolbar-custom-action.js

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { trackComponent } from '@utils/tracking/usage';
+import { getSlotTextContent } from '@utils/dom/get-slot-text-content';
 /**
  * @slot text - Slot for action text.
  * @slot icon - Slot for icon.
@@ -10,18 +11,23 @@ export class GuxTableToolbarCustomAction {
     this.accent = 'secondary';
     this.disabled = false;
   }
+  renderTooltip() {
+    if (this.iconOnly) {
+      return (h("gux-tooltip", null, getSlotTextContent(this.root, 'text')));
+    }
+  }
   componentWillLoad() {
     trackComponent(this.root);
   }
   render() {
-    return (h("gux-button-slot-beta", { accent: this.accent }, h("button", { disabled: this.disabled, type: "button", class: "gux-action-title" }, h("slot", { name: "icon" }), h("span", { class: { 'gux-sr-only': this.iconOnly } }, h("slot", { name: "text" })))));
+    return (h("gux-button-slot", { accent: this.accent }, h("button", { disabled: this.disabled, type: "button", class: "gux-action-title" }, h("slot", { name: "icon" }), h("span", { class: { 'gux-sr-only': this.iconOnly } }, h("slot", { name: "text" }))), this.renderTooltip()));
   }
   static get is() { return "gux-table-toolbar-custom-action"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-table-toolbar-custom-action.less"]
+      "$": ["gux-table-toolbar-custom-action.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-table-toolbar/gux-table-toolbar-menu-button/gux-table-toolbar-menu-button.css

@@ -0,0 +1,31 @@
+:host {
+  display: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+:host(.gux-show-menu) {
+  display: block;
+}
+
+.gux-menu-button button {
+  color: var(--gse-ui-button-secondary-default-foregroundColor);
+  cursor: grab;
+  background-color: var(--gse-ui-button-secondary-default-backgroundColor);
+  border: none;
+}
+.gux-menu-button button gux-icon {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+}
+
+.gux-list-container {
+  width: min-content;
+  padding: var(--gse-ui-menu-padding);
+  margin: 0;
+  list-style: none;
+  background-color: var(--gse-ui-menu-backgroundColor);
+  border: 1px var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  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);
+}

package/dist/collection/components/{beta → stable}/gux-table-toolbar/gux-table-toolbar-menu-button/gux-table-toolbar-menu-button.js

@@ -55,6 +55,12 @@ export class GuxTableToolbarMenuButton {
       }
     }
   }
+  onFocusin() {
+    void this.tooltipTitleElement.setShowTooltip();
+  }
+  onFocusout() {
+    void this.tooltipTitleElement.setHideTooltip();
+  }
   toggle() {
     this.expanded = !this.expanded;
     if (this.expanded) {
@@ -79,14 +85,14 @@ export class GuxTableToolbarMenuButton {
     trackComponent(this.root);
   }
   render() {
-    return (h(Host, { class: { 'gux-show-menu': this.showMenu } }, h("gux-popup", { expanded: this.expanded }, h("div", { slot: "target", class: "gux-toolbar-menu-container" }, h("gux-button-slot-beta", { class: "gux-menu-button" }, h("button", { type: "button", ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("gux-icon", { "screenreader-text": this.i18n('additionalActions'), "icon-name": "menu-kebab-horizontal" })))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { ref: el => (this.listElement = el) }, h("slot", null))))));
+    return (h(Host, { class: { 'gux-show-menu': this.showMenu } }, h("gux-popup", { expanded: this.expanded }, h("div", { slot: "target", class: "gux-toolbar-menu-container" }, h("gux-button-slot", { class: "gux-menu-button" }, h("button", { type: "button", ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, h("span", null, h("gux-icon", { "screenreader-text": this.i18n('additionalActions'), "icon-name": "menu-kebab-horizontal" })))))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { ref: el => (this.listElement = el) }, h("slot", null))))));
   }
   static get is() { return "gux-table-toolbar-menu-button"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-table-toolbar-menu-button.less"]
+      "$": ["gux-table-toolbar-menu-button.scss"]
     };
   }
   static get styleUrls() {
@@ -134,6 +140,18 @@ export class GuxTableToolbarMenuButton {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "focusin",
+        "method": "onFocusin",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focusout",
+        "method": "onFocusout",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }