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

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-beta.js → legacy/gux-pagination-legacy/gux-pagination.js}

@@ -1,23 +1,19 @@
-import { h, readTask } from '@stencil/core';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { h } from '@stencil/core';
 import { trackComponent } from '@utils/tracking/usage';
-const minAdvancedSpacerWidth = 24;
-export class GuxPaginationBeta {
+export class GuxPaginationLegacy {
   constructor() {
-    this.reinstateLayoutBreakpoint = 0;
-    this.layout = 'advanced';
     this.currentPage = 1;
     this.totalItems = 0;
     this.itemsPerPage = 25;
+    this.layout = 'full';
     this.totalPages = undefined;
-    this.displayedLayout = undefined;
   }
   setPage(page) {
     if (page <= 0) {
       this.setPage(1);
       return;
     }
-    const totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
+    const totalPages = this.calculateTotalPages();
     if (page > totalPages) {
       this.setPage(totalPages);
       return;
@@ -28,6 +24,13 @@ export class GuxPaginationBeta {
       itemsPerPage: this.itemsPerPage
     });
   }
+  calculateTotalPages() {
+    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));
+  }
+  calculateCurrentPage() {
+    const minCurrentPage = this.totalPages > 0 ? 1 : 0;
+    return Math.max(minCurrentPage, Math.min(this.currentPage, this.totalPages));
+  }
   handleInternalitemsperpagechange(event) {
     this.itemsPerPage = event.detail;
     this.setPage(1);
@@ -35,93 +38,42 @@ export class GuxPaginationBeta {
   handleInternalcurrentpagechange(event) {
     this.setPage(event.detail);
   }
-  calculateTotalPages(totalItems, itemsPerPage) {
-    return Math.max(1, Math.ceil(totalItems / itemsPerPage));
-  }
-  calculateCurrentPage(totalPages, currentPage) {
-    const minCurrentPage = totalPages > 0 ? 1 : 0;
-    return Math.max(minCurrentPage, Math.min(currentPage, totalPages));
-  }
-  checkPaginationContainerWidthForLayout() {
-    readTask(() => {
-      const container = this.root.shadowRoot.querySelector('.gux-pagination-container');
-      const spacer = this.root.shadowRoot.querySelector('.gux-pagination-spacer');
-      const containerWidth = container.clientWidth;
-      const spacerWidth = spacer.clientWidth;
-      if (spacerWidth < minAdvancedSpacerWidth &&
-        this.displayedLayout !== 'simple') {
-        this.reinstateLayoutBreakpoint = containerWidth;
-        this.displayedLayout = 'simple';
-      }
-      else if (containerWidth > this.reinstateLayoutBreakpoint) {
-        this.reinstateLayoutBreakpoint = 0;
-        this.displayedLayout = this.layout;
-      }
-    });
+  getPaginationInfoElement(layout) {
+    if (layout === 'expanded') {
+      return null;
+    }
+    const content = [
+      h("gux-pagination-item-counts-legacy", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage })
+    ];
+    if (layout === 'full') {
+      content.push(h("gux-pagination-items-per-page-legacy", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }));
+    }
+    return (h("div", { class: "gux-pagination-info" }, content));
   }
   componentWillLoad() {
     trackComponent(this.root, { variant: this.layout });
   }
   componentWillRender() {
-    this.totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
-    this.currentPage = this.calculateCurrentPage(this.totalPages, this.currentPage);
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver) {
-      this.resizeObserver.unobserve(this.root.shadowRoot.querySelector('.gux-pagination-container'));
-    }
-  }
-  componentDidLoad() {
-    if (!this.resizeObserver && window.ResizeObserver) {
-      this.resizeObserver = new ResizeObserver(() => this.checkPaginationContainerWidthForLayout());
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.observe(this.root.shadowRoot.querySelector('.gux-pagination-container'));
-    }
-    afterNextRenderTimeout(() => {
-      this.checkPaginationContainerWidthForLayout();
-    }, 500);
+    this.totalPages = this.calculateTotalPages();
+    this.currentPage = this.calculateCurrentPage();
   }
   render() {
-    return (h("div", { class: "gux-pagination-container" }, h("div", { class: "gux-pagination-info" }, h("gux-pagination-item-counts-beta", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page-beta", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { class: "gux-pagination-spacer" }), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons-beta", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+    return (h("div", { class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
   }
-  static get is() { return "gux-pagination-beta"; }
+  static get is() { return "gux-pagination-legacy"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-beta.less"]
+      "$": ["gux-pagination-legacy.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["gux-pagination-beta.css"]
+      "$": ["gux-pagination-legacy.css"]
     };
   }
   static get properties() {
     return {
-      "layout": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "GuxPaginationLayoutBeta",
-          "resolved": "\"advanced\" | \"simple\"",
-          "references": {
-            "GuxPaginationLayoutBeta": {
-              "location": "import",
-              "path": "./gux-pagination-beta.types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The pagination component can have different layouts to suit the available space"
-        },
-        "attribute": "layout",
-        "reflect": false,
-        "defaultValue": "'advanced'"
-      },
       "currentPage": {
         "type": "number",
         "mutable": true,
@@ -167,7 +119,7 @@ export class GuxPaginationBeta {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../../stable/gux-pagination/gux-pagination.types"
+              "path": "./gux-pagination.types"
             }
           }
         },
@@ -180,13 +132,35 @@ export class GuxPaginationBeta {
         "attribute": "items-per-page",
         "reflect": false,
         "defaultValue": "25"
+      },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxPaginationLayout",
+          "resolved": "\"expanded\" | \"full\" | \"small\"",
+          "references": {
+            "GuxPaginationLayout": {
+              "location": "import",
+              "path": "./gux-pagination.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The pagination component can have different layouts to suit the available space"
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "'full'"
       }
     };
   }
   static get states() {
     return {
-      "totalPages": {},
-      "displayedLayout": {}
+      "totalPages": {}
     };
   }
   static get events() {
@@ -206,7 +180,7 @@ export class GuxPaginationBeta {
           "references": {
             "GuxPaginationState": {
               "location": "import",
-              "path": "../../stable/gux-pagination/gux-pagination.types"
+              "path": "./gux-pagination.types"
             }
           }
         }

package/dist/collection/components/legacy/{gux-simple-toast → gux-simple-toast-legacy}/gux-simple-toast.css

@@ -12,7 +12,7 @@
   background: #f6f7f9;
   border: 1px solid #b4bccb;
   border-radius: 4px;
-  box-shadow: 0 2px 4px fade(#202937, 24%);
+  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
 }
 
 .gux-icon {

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.css

@@ -1,12 +1,101 @@
+.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-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 {
-  color: #2e394c;
   -webkit-user-select: none;
   user-select: none;
-  background-color: #fdfdfd;
 }
 :host:first-child .gux-header {
-  border-top: 1px solid #e2e6ee;
+  border-top: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
+
 section.gux-disabled {
   cursor: default;
   opacity: 0.5;
@@ -14,6 +103,7 @@ section.gux-disabled {
 section.gux-disabled > * {
   pointer-events: none;
 }
+
 .gux-header {
   all: unset;
   box-sizing: border-box;
@@ -24,91 +114,88 @@ section.gux-disabled > * {
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  padding: 12px 12px 12px 16px;
+  padding: var(--gse-ui-accordion-header-padding);
   margin: 0;
   cursor: pointer;
-  border-bottom: 1px solid #e2e6ee;
+  border-bottom: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
 .gux-header .gux-header-text {
   flex: 1 1 auto;
   align-self: auto;
-  padding-right: 8px;
   text-align: left;
-}
-.gux-header .gux-header-text.gux-arrow-position-beside {
-  flex-grow: 0;
+  color: var(--gse-ui-accordion-header-default-foreground-labelColor);
+  font-weight: --gse-ui-accordion-header-label-defaultText-fontWeight;
 }
 .gux-header.gux-reverse-headings .gux-header-text {
   display: flex;
   flex-direction: column-reverse;
 }
-.gux-header ::slotted([slot='header']) {
+.gux-header ::slotted([slot=header]) {
   padding: 0;
   margin: 0;
-  font-size: 12px !important;
-  font-weight: bold !important;
-  line-height: 16px !important;
+  font-size: var(--gse-ui-accordion-header-label-defaultText-fontFamily) !important;
+  font-weight: var(--gse-ui-accordion-header-label-defaultText-fontWeight) !important;
+  line-height: var(--gse-ui-accordion-header-label-defaultText-lineHeight) !important;
 }
-.gux-header ::slotted([slot='subheader']) {
+.gux-header ::slotted([slot=subheader]) {
   padding: 0;
-  margin: 2px 0 0;
-  font-size: 11px !important;
-  font-weight: 400 !important;
-  color: #4c5667;
+  margin: var(--gux-spacing-3xs) 0 0;
+  font-size: var(--gse-ui-accordion-contentItem-defaultText-fontSize) !important;
+  font-weight: var(--gse-ui-accordion-contentItem-defaultText-fontWeight) !important;
+  color: var(--gse-ui-accordion-contentItem-foregroundColor);
 }
-.gux-reverse-headings.gux-header ::slotted([slot='subheader']) {
-  margin: 0 0 2px 0;
+.gux-header ::slotted([slot=subheader]) .gux-reverse-headings {
+  margin: 0 0 var(--gux-spacing-3xs) 0;
 }
-.gux-header ::slotted([slot='icon']) {
+.gux-header ::slotted([slot=icon]) {
   flex: 0 0 auto;
   align-self: flex-start;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  color: #6b7585;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-accordion-header-gap);
+  color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-closed);
 }
-.gux-reverse-headings.gux-header ::slotted([slot='icon']) {
+.gux-header ::slotted([slot=icon]) .gux-reverse-headings {
   align-self: flex-end;
 }
 .gux-header .gux-header-icon {
   flex: 0 1 auto;
   align-items: center;
   align-self: auto;
-  margin-left: 8px;
-  color: #6b7585;
+  margin-left: var(--gse-ui-accordion-header-gap);
+  color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-closed);
   transition: transform 0.5s ease;
   transform-origin: center;
 }
 .gux-header .gux-header-icon gux-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--gse-ui-accordion-header-chevronIcon);
+  height: var(--gse-ui-accordion-header-chevronIcon);
 }
-.gux-header .gux-header-icon.gux-arrow-position-before-text {
+.gux-header .gux-header-icon.gux-arrow-position-start {
   order: -1;
-  margin: 0 8px 0 0;
+  margin-right: var(--gse-ui-accordion-header-gap);
 }
 .gux-header .gux-header-icon.gux-expanded {
   transform: rotate(-180deg);
+  color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-open);
 }
 .gux-header:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-.gux-header:focus-visible .gux-header-icon {
-  color: #2e394c;
+  outline: var(--gse-ui-accordion-focusBorder-width) var(--gse-ui-accordion-focusBorder-style) var(--gse-ui-accordion-focusBorder-color);
+  border-radius: var(--gse-ui-accordion-menuItem-focus-borderRadius);
+  outline-offset: var(--gse-ui-accordion-focus-offset-gap);
 }
 .gux-header:hover .gux-header-icon {
-  color: #2e394c;
+  color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-hover);
 }
+
 .gux-content {
   box-sizing: border-box;
   display: none;
-  border-bottom: 1px solid #e2e6ee;
+  border-bottom: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
 .gux-content.gux-expanded {
   display: block;
 }
 .gux-content.gux-text-content-layout {
-  padding: 16px;
-}
+  padding: var(--gse-ui-accordion-contentItem-padding);
+}

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.js

@@ -10,7 +10,7 @@ export class GuxAccordionSection {
   constructor() {
     this.sectionId = randomHTMLId('gux-accordion-section');
     this.headerId = randomHTMLId('gux-accordion-header');
-    this.arrowPosition = 'default';
+    this.arrowPosition = 'end';
     this.contentLayout = 'text';
     this.open = false;
     this.disabled = false;
@@ -26,11 +26,7 @@ export class GuxAccordionSection {
     this.open = !this.open;
   }
   isArrowPositionBeforeText() {
-    return this.arrowPosition === 'before-text';
-  }
-  // arrow position 'beside-text' will be removed in v4 (COMUI-1128)
-  isArrowPositionedBesideText() {
-    return this.arrowPosition === 'beside-text';
+    return this.arrowPosition === 'start';
   }
   handleSlotChange(slotname) {
     const slot = this.root.querySelector(`[slot="${slotname}"]`);
@@ -49,12 +45,11 @@ export class GuxAccordionSection {
         'gux-header': true,
         'gux-reverse-headings': this.reverseHeadings
       }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { name: "icon" }), h("div", { class: {
-        'gux-header-text': true,
-        'gux-arrow-position-beside': this.isArrowPositionedBesideText()
+        'gux-header-text': true
       } }, h("slot", { onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { class: {
         'gux-header-icon': true,
         'gux-expanded': this.open,
-        'gux-arrow-position-before-text': this.isArrowPositionBeforeText()
+        'gux-arrow-position-start': this.isArrowPositionBeforeText()
       } }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), h("div", { id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
         'gux-content': true,
         'gux-expanded': this.open,
@@ -65,7 +60,7 @@ export class GuxAccordionSection {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-accordion-section.less"]
+      "$": ["gux-accordion-section.scss"]
     };
   }
   static get styleUrls() {
@@ -80,7 +75,7 @@ export class GuxAccordionSection {
         "mutable": false,
         "complexType": {
           "original": "GuxAccordionSectionArrowPosition",
-          "resolved": "\"before-text\" | \"beside-text\" | \"default\"",
+          "resolved": "\"end\" | \"start\"",
           "references": {
             "GuxAccordionSectionArrowPosition": {
               "location": "import",
@@ -92,11 +87,11 @@ export class GuxAccordionSection {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Position of the arrow chevron icon. Position can be 'default' or 'before-text'.  'beside-text' is deprecated and will be removed in v4."
+          "text": "Position of the arrow chevron icon. Position can be 'start' or 'end'."
         },
         "attribute": "arrow-position",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "'end'"
       },
       "contentLayout": {
         "type": "string",

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

@@ -1,3 +1,3 @@
 gux-accordion {
   -custom-noop: noop;
-}
+}

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

@@ -43,7 +43,7 @@ export class GuxAccordion {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-accordion.less"]
+      "$": ["gux-accordion.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-action-button/gux-action-button.css

@@ -32,6 +32,7 @@
   height: 16px;
 }
 .gux-action-button-container .gux-list-container {
+  max-width: 220px;
   padding: var(--gux-spacing-xs) 0;
   margin: 0;
   list-style: none;

package/dist/collection/components/stable/gux-action-button/gux-action-button.js

@@ -14,12 +14,14 @@ import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
 import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '@utils/tracking/usage';
 import { buildI18nForComponent } from '../../../i18n';
-import { getGuxActionButtonAccent } from './gux-action-button.types';
 import defaultResources from './i18n/en.json';
+import { getGuxActionButtonAccent } from './gux-action-button.types';
+/**
+ * @slot title - slot for icon and button text
+ */
 export class GuxActionButton {
   constructor() {
     this.type = 'button';
-    this.text = undefined;
     this.disabled = false;
     this.accent = 'secondary';
     this.isOpen = false;
@@ -113,9 +115,7 @@ export class GuxActionButton {
     this.i18n = await buildI18nForComponent(this.root, defaultResources);
   }
   render() {
-    return (h("div", { class: "gux-action-button-container" }, h("gux-popup", { expanded: this.isOpen, disabled: this.disabled }, h("div", { slot: "target", class: "gux-action-button-container" }, h("gux-button-slot-beta", { class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, this.text)), h("gux-button-slot-beta", { class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.i18n('actionButtonDropdown', {
-        buttonTitle: this.text
-      }) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null))))));
+    return (h("div", { class: "gux-action-button-container" }, h("gux-popup", { expanded: this.isOpen, disabled: this.disabled }, h("div", { slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { name: "title" }))), h("gux-button-slot", { class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.i18n('moreOptions') }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null))))));
   }
   static get is() { return "gux-action-button"; }
   static get encapsulation() { return "shadow"; }
@@ -154,23 +154,6 @@ export class GuxActionButton {
         "reflect": false,
         "defaultValue": "'button'"
       },
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The component text."
-        },
-        "attribute": "text",
-        "reflect": false
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

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

@@ -29,6 +29,7 @@
   * @prop --gse-ui-alert-text-lineHeight
   * @prop --gse-ui-alert-text-fontSize
   * @prop --gse-ui-alert-borderRadius
+  * @prop --gse-ui-alert-text-fontWeight
   */
 :host {
   display: block;
@@ -62,7 +63,7 @@
   gap: var(--gse-ui-alert-gap);
   font-family: var(--gse-ui-alert-text-fontFamily);
   font-size: var(--gse-ui-alert-text-fontSize);
-  font-weight: 400;
+  font-weight: var(--gse-ui-alert-text-fontWeight);
   line-height: var(--gse-ui-alert-text-lineHeight);
 }
 .gux-inline-alert .gux-sr-only:not(:focus):not(:active) {