genesys-spark-components 4.105.4 → 4.106.0

package/dist/collection/components/beta/gux-calendar-beta/components/single/gux-calendar.css

@@ -5,8 +5,8 @@
   font-family: var(--gse-ui-calendarMenu-month-defaultText-fontFamily);
   font-size: var(--gse-ui-calendarMenu-month-defaultText-fontSize);
   background: var(--gse-ui-calendarMenu-date-selected-foregroundColor);
-  border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
-  box-shadow: rgba(34, 37, 41, 0.24) 0 2px 4px;
+  border-radius: 8px;
+  box-shadow: var(--gse-ui-calendarMenu-boxShadow-offsetX) var(--gse-ui-calendarMenu-boxShadow-offsetY) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
 }
 .gux-calendar-beta .gux-header {
   display: flex;
@@ -30,6 +30,7 @@
 }
 .gux-calendar-beta .gux-header .gux-left,
 .gux-calendar-beta .gux-header .gux-right {
+  block-size: 100%;
   color: var(--gse-ui-calendarMenu-header-foregroundColor);
   cursor: pointer;
   background: none;
@@ -38,35 +39,31 @@
 }
 .gux-calendar-beta .gux-header .gux-left:focus-visible,
 .gux-calendar-beta .gux-header .gux-right:focus-visible {
-  outline: 2px solid #aac9ff;
-  outline-offset: 1px;
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
-.gux-calendar-beta .gux-header .gux-left gux-icon,
-.gux-calendar-beta .gux-header .gux-right gux-icon {
-  inline-size: 16px;
-  block-size: 16px;
+.gux-calendar-beta .gux-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gse-ui-calendarMenu-dateBody-gap);
+  padding: var(--gse-ui-calendarMenu-dateBody-padding);
+  color: var(--gse-ui-calendarMenu-date-default-foregroundColor);
+  background-color: var(--gse-ui-calendarMenu-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
 }
-.gux-calendar-beta .gux-week-days {
-  padding-block-start: 24px;
-  padding-inline: 24px;
+.gux-calendar-beta .gux-content .gux-week-days {
   font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
   font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
   font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
   color: var(--gse-ui-calendarMenu-month-default-foregroundColor);
   text-align: center;
 }
-.gux-calendar-beta .gux-week-days .gux-week-day {
+.gux-calendar-beta .gux-content .gux-week-days .gux-week-day {
   display: inline-block;
-  inline-size: var(--gse-ui-calendarMenu-day-date-size);
-  block-size: 16px;
-}
-.gux-calendar-beta .gux-content {
-  padding: var(--gse-ui-calendarMenu-dateBody-padding);
-  color: var(--gse-ui-calendarMenu-month-default-foregroundColor);
-  background-color: var(--gse-ui-calendarMenu-backgroundColor);
-  border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
+  inline-size: var(--gse-ui-calendarMenu-day-range-height);
+  block-size: var(--gse-ui-calendarMenu-day-range-width);
 }
-.gux-calendar-beta .gux-content-week .gux-content-date {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date {
   display: inline-block;
   inline-size: var(--gse-ui-calendarMenu-day-date-size);
   block-size: var(--gse-ui-calendarMenu-day-input-height);
@@ -75,43 +72,43 @@
   font-style: normal;
   font-weight: var(--gse-ui-calendarMenu-date-defaultText-fontWeight);
   line-height: 32px;
-  color: #626e84;
   text-align: center;
   vertical-align: middle;
   border: none;
   outline: none;
   opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
-.gux-calendar-beta .gux-content-week .gux-content-date.gux-current-month {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-current-month {
   color: var(--gse-ui-calendarMenu-month-default-foregroundColor);
   opacity: 1;
 }
-.gux-calendar-beta .gux-content-week .gux-content-date.gux-hidden {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-hidden {
   display: none;
 }
-.gux-calendar-beta .gux-content-week .gux-content-date.gux-disabled {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-disabled {
   pointer-events: none;
 }
-.gux-calendar-beta .gux-content-week .gux-content-date.gux-selected {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-selected {
   color: var(--gse-ui-calendarMenu-date-selected-foregroundColor);
   background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
   border: none;
   border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
   outline: none;
 }
-.gux-calendar-beta .gux-content-week .gux-content-date.gux-selected:hover {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-selected:hover {
   background-color: var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor);
 }
-.gux-calendar-beta .gux-content-week .gux-content-date:hover {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date:hover {
   cursor: pointer;
   background-color: var(--gse-ui-calendarMenu-date-hover-backgroundColor);
   border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }
-.gux-calendar-beta .gux-content-week .gux-content-date:focus-visible {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date:focus-visible {
   border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
   outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
-.gux-calendar-beta .gux-content-week .gux-content-date .gux-sr-only:not(:focus):not(:active) {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date .gux-sr-only:not(:focus):not(:active) {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -120,7 +117,7 @@
   clip-path: inset(50%);
   white-space: nowrap;
 }
-.gux-calendar-beta .gux-content-week .gux-content-date.gux-current-date {
+.gux-calendar-beta .gux-content .gux-content-week .gux-content-date.gux-current-date {
   font-family: var(--gse-ui-calendarMenu-month-currentText-fontFamily);
   font-size: var(--gse-ui-calendarMenu-date-currentText-fontSize);
   font-weight: var(--gse-ui-calendarMenu-date-currentText-fontWeight);

package/dist/collection/components/beta/gux-calendar-beta/components/single/gux-calendar.js

@@ -176,12 +176,12 @@ export class GuxCalendar {
     renderHeader() {
         return (h("div", { class: "gux-header" }, h("button", { type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth', {
                 localizedPreviousMonthAndYear: getDateAsMonthYear(this.changeMonth(-1), this.locale)
-            }), onClick: () => this.setNewFocusedMonth(-1) }, h("gux-icon", { decorative: true, "icon-name": "custom/chevron-left-small-regular" })), h("span", { class: "gux-header-month-and-year" }, getDateAsMonthYear(this.getFocusedValue(), this.locale)), h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
+            }), onClick: () => this.setNewFocusedMonth(-1) }, h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), h("span", { class: "gux-header-month-and-year" }, getDateAsMonthYear(this.getFocusedValue(), this.locale)), h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
                 localizedNextMonthAndYear: getDateAsMonthYear(this.changeMonth(1), this.locale)
-            }), onClick: () => this.setNewFocusedMonth(1) }, h("gux-icon", { decorative: true, "icon-name": "custom/chevron-right-small-regular" }))));
+            }), onClick: () => this.setNewFocusedMonth(1) }, h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))));
     }
     renderContent() {
-        return (h("div", null, h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("div", { class: "gux-week-day" }, day)))), h("div", { class: "gux-content" }, this.getMonthDays().map(week => (h("div", { class: "gux-content-week" }, week.dates.map(day => (h("div", { "data-date": day.date.getTime(), onClick: () => this.onDateClick(day.date), role: "button", "aria-current": day.selected ? 'true' : 'false', tabindex: day.selected || day.focused ? '0' : '-1', onKeyDown: e => void this.onKeyDown(e), "aria-disabled": day.disabled ? 'true' : 'false', class: {
+        return (h("div", { class: "gux-content" }, h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("div", { class: "gux-week-day" }, day)))), h("div", null, this.getMonthDays().map(week => (h("div", { class: "gux-content-week" }, week.dates.map(day => (h("div", { "data-date": day.date.getTime(), onClick: () => this.onDateClick(day.date), role: "button", "aria-current": day.selected ? 'true' : 'false', tabindex: day.selected || day.focused ? '0' : '-1', onKeyDown: e => void this.onKeyDown(e), "aria-disabled": day.disabled ? 'true' : 'false', class: {
                 'gux-content-date': true,
                 'gux-disabled': day.disabled,
                 'gux-current-month': day.inCurrentMonth,
@@ -190,7 +190,7 @@ export class GuxCalendar {
             } }, h("span", { class: "gux-non-sr", "aria-hidden": "true" }, day.date.getDate()), h("span", { class: "gux-sr-only" }, h("gux-date-beta", { datetime: day.date.toISOString(), format: "long" })))))))))));
     }
     render() {
-        return (h("div", { key: '4810ec697a88feab92ed7bb5f0deb725755de699', class: "gux-calendar-beta" }, h("slot", { key: 'cfde02db14b9d5d3fc68905f86ed4718828e0364' }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: 'e0bc6441c51d12d1c5d82409309c0a57b119873a', class: "gux-calendar-beta" }, h("slot", { key: '082c6a0fde9e2c37eeb08a8584bc7e195541ae00' }), this.renderHeader(), this.renderContent()));
     }
     static get is() { return "gux-calendar-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-link/gux-link.css

@@ -0,0 +1,88 @@
+/*
+ * Typography styles and mixins.
+ */
+/* Headings */
+/* Body Copy */
+/* Anchor */
+/**
+ *  All of the '!important' flags should be removed in v5
+ *  They are added to override a global styling set to all <a> elements.
+ *  This global styling should also be removed in v5
+ *  Jira ticket for that: https://inindca.atlassian.net/browse/COMUI-3265
+ */
+:host {
+  padding-block: var(--gse-ui-links-inLine-padding);
+}
+:host ::slotted(a) {
+  inline-size: fit-content;
+  font-family: var(--gse-ui-links-inLine-medium-text-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-ui-links-inLine-medium-text-fontSize);
+  font-weight: var(--gse-ui-links-inLine-medium-text-fontWeight);
+  line-height: var(--gse-ui-links-inLine-medium-text-lineHeight);
+  color: var(--gse-ui-links-default-foregroundColor) !important;
+  border-radius: var(--gse-ui-links-focusOutline-borderRadius) !important;
+}
+:host ::slotted(a:hover) {
+  color: var(--gse-ui-links-hover-foregroundColor) !important;
+}
+:host ::slotted(a:active) {
+  color: var(--gse-ui-links-active-foregroundColor) !important;
+}
+:host ::slotted(a:visited) {
+  color: var(--gse-ui-links-visited-foregroundColor) !important;
+}
+:host ::slotted(a:focus-visible) {
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+}
+
+:host([size=small]) ::slotted(a) {
+  font-family: var(--gse-ui-links-inLine-small-text-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-ui-links-inLine-small-text-fontSize);
+  font-weight: var(--gse-ui-links-inLine-small-text-fontWeight);
+  line-height: var(--gse-ui-links-inLine-small-text-lineHeight);
+}
+
+:host([standalone]) {
+  display: block;
+  padding-block: var(--gse-ui-links-standalone-padding);
+}
+:host([standalone]) ::slotted(a) {
+  display: flex;
+  gap: var(--gse-ui-links-standalone-gap);
+  align-items: center;
+  inline-size: fit-content;
+  font-family: var(--gse-ui-links-standalone-medium-text-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-ui-links-standalone-medium-text-fontSize);
+  font-weight: var(--gse-ui-links-standalone-medium-text-fontWeight);
+  line-height: var(--gse-ui-links-standalone-medium-text-lineHeight);
+  text-decoration: none !important;
+}
+:host([standalone]) ::slotted(a:hover) {
+  font-family: var(--gse-ui-links-standalone-medium-underlinedText-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-ui-links-standalone-medium-underlinedText-fontSize);
+  font-weight: var(--gse-ui-links-standalone-medium-underlinedText-fontWeight);
+  line-height: var(--gse-ui-links-standalone-medium-underlinedText-lineHeight);
+  text-decoration: var(--gse-ui-links-standalone-medium-underlinedText-textDecoration) !important;
+}
+:host([standalone]) ::slotted(a:active) {
+  text-decoration: none !important;
+}
+
+:host([size=small][standalone]) ::slotted(a) {
+  font-family: var(--gse-ui-links-standalone-small-text-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-ui-links-standalone-small-text-fontSize);
+  font-weight: var(--gse-ui-links-standalone-small-text-fontWeight);
+  line-height: var(--gse-ui-links-standalone-small-text-lineHeight);
+}
+:host([size=small][standalone]) ::slotted(a:hover) {
+  font-family: var(--gse-ui-links-standalone-small-underlinedText-fontFamily), var(--gse-semantic-theme-fontFamily-body), sans-serif;
+  font-size: var(--gse-ui-links-standalone-small-underlinedText-fontSize);
+  font-weight: var(--gse-ui-links-standalone-small-underlinedText-fontWeight);
+  line-height: var(--gse-ui-links-standalone-small-underlinedText-lineHeight);
+  text-decoration: var(--gse-ui-links-standalone-small-underlinedText-textDecoration) !important;
+}
+
+:host([standalone][class=gux-breadcrumb-link]) {
+  padding: 0;
+}

package/dist/collection/components/beta/gux-link/gux-link.js

@@ -0,0 +1,73 @@
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getClosestElement } from "../../../utils/dom/get-closest-element";
+export class GuxLink {
+    constructor() {
+        this.size = 'medium';
+        this.standalone = false;
+    }
+    componentWillLoad() {
+        trackComponent(this.root, {
+            variant: this.size + (this.standalone ? '-standalone' : '')
+        });
+    }
+    checkBreadcrumbParent() {
+        return !!getClosestElement('.gux-breadcrumb-generation', this.root);
+    }
+    render() {
+        return (h(Host, { key: 'ff833826e421c0388207abc54ae059a5d703303c', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, h("slot", { key: '1987d0a30c61e2061882070faf0ee92078f786d3' })));
+    }
+    static get is() { return "gux-link-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'medium' | 'small'",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "standalone": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "standalone",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js

@@ -166,7 +166,7 @@ export class GuxMonthCalendar {
         return (h("gux-month-list", null, monthButtons));
     }
     render() {
-        return (h("div", { key: '9caf15653919c98d027292a800265c18ad663ed6', class: {
+        return (h("div", { key: '483d249a808cbd5d6e073ba12f0650cb5597f734', class: {
                 'gux-hidden': !this.expanded,
                 'gux-month-calendar': true
             } }, this.renderHeader(), this.renderMonths()));

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js

@@ -22,7 +22,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '83c6451801cc01f11916968c5a7fbf8268e7fdaa', role: "listitem", value: this.value }, h("div", { key: 'd60137a28ca16e4cbb4750d7e4352da99645b146', class: "gux-container" }, h("button", { key: '2087bf628ae2c59cf72b4507ce1bba3deaf5484b', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '2271fc3159882a272ca830df30ec18b521867b11' })))));
+        return (h(Host, { key: '9926fc852f8d9d32a5870cce6531d79c65886f33', role: "listitem", value: this.value }, h("div", { key: '554da394b223e1940ec31c22cc2a0f1640c4b1dc', class: "gux-container" }, h("button", { key: '7b7147ed8676d54702728769eb83bcbaf6d766dc', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '59592a31eaef4f03df031cc655209d3c570021ca' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js

@@ -38,7 +38,7 @@ export class GuxMonthList {
         first(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: '73337930f8168b2cf3ea19e758840c4d73ede824', role: "list" }, h("slot", { key: '4cb56de3a3999f681f8706eecf1a8311d9aca3f0' })));
+        return (h(Host, { key: 'c134a4b9abc1d870e010a86857f9933012216737', role: "list" }, h("slot", { key: '343ffdf8fd2978166a9ef2a13748534fa5aaf1a9' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -200,7 +200,7 @@ export class GuxMonthPicker {
         return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
     }
     render() {
-        return (h("gux-popup", { key: '3e874f28af6bae4dd53e4f805751401fa48b2fb3', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '974641d1f4e0867788a64f41fc72a76688260f37', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-month-picker-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.css

@@ -52,7 +52,7 @@
   border: var(--gse-ui-formControl-input-error-border-width) var(--gse-ui-formControl-input-error-border-style) var(--gse-ui-formControl-input-error-border-color);
 }
 .target-container:focus-within {
-  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
   outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 
@@ -151,6 +151,6 @@
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-region-select:focus-within {
-  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
   outline-offset: var(--gse-semantic-focusOutline-offset);
 }

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.js

@@ -364,7 +364,7 @@ export class GuxPhoneInput {
         return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("gux-listbox", { "aria-label": this.i18n('regionDropdown'), value: this.region ? this.region.alpha2Code : '' }, this.regionOptions)));
     }
     render() {
-        return (h("gux-popup", { key: '88fda2068da55381d5ac83f0853463c623d79c4a', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '9486015223b4b9033b10c67fce3f2178c9041912', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-phone-input-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-popover-beta/gux-popover.js

@@ -197,10 +197,10 @@ export class GuxPopover {
         }
     }
     render() {
-        return (h("div", { key: '0956debf6d168a53d2392a9097d1021a40db81ed', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '5e481cf437fbeeb2b9a504cbab1bc379dbe7fba6', ref: (el) => (this.popupElement = el), class: {
                 'gux-popover-wrapper': true,
                 'gux-hidden': !this.isOpen
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '8ac78e31d4225d15a19cb213340b43894421d401', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'e763e9f6aaadb4e6746227948e4565dcb9ad5da8', class: "gux-arrow-caret" })), h("div", { key: '89e0769e83e1275f6c59d83a8aec84ac781f0139', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '1f81a0750b248977353e6ee1071e053b8b4e1f00', name: "title" }), this.renderDismissButton()), h("div", { key: '01b627cce8e37043bbd65b34f1a60c1104edfd93', class: "gux-popover-content" }, h("slot", { key: 'b19b3f19dc701ea048b8d14460d743b215a1da63' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: '1ef55c5205040fabe293a146b07e5a1f56468657', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '4527d7f23a405d8d937c5bb5150ae7b88286b946', class: "gux-arrow-caret" })), h("div", { key: '877961881a63783b4fa19387badb63cac0701540', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '8ab06c20228f35f0925abd7f125b237ddaa2cdac', name: "title" }), this.renderDismissButton()), h("div", { key: '71eec119b566ee0093dc0f0ac4b4406d2d17ba78', class: "gux-popover-content" }, h("slot", { key: '4794c27cb2eca72bf18132ff1daae35369576a71' }))));
     }
     static get is() { return "gux-popover-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-popover-list-beta/gux-popover-list.js

@@ -143,10 +143,10 @@ export class GuxPopoverList {
         }
     }
     render() {
-        return (h("div", { key: 'f42b52fb101ae28228a43b1b63380786c96e0ae7', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '2cbd8677025be6ba4dfef8c1165149a16d0acd2a', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '4c56c1d765988e6ab6d780f3531f5268ff8edac1', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: '5b57ef382386c628ce0f0f94e1cf6853c73f9331', onClick: this.dismiss.bind(this) })), h("div", { key: 'f97d9ab45434408704a6371cafa24899fd151500', class: "gux-popover-content" }, h("slot", { key: 'b363ec66ffaaf1e8995d7338097a52de3cc37d38' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: '7c8f422379a975dd8dc50ebcda8daa8d3c268c4f', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'fec3a9253c4a9d99997ddd0bcee5e18baee45c27', onClick: this.dismiss.bind(this) })), h("div", { key: 'eca980665fa52dbb091f4feb814df0aecabc6b9a', class: "gux-popover-content" }, h("slot", { key: '5b5224973fc71787a27f37661f4a0fe0a349fdee' }))));
     }
     static get is() { return "gux-popover-list-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action/gux-rich-text-editor-action-rich-style/gux-rich-text-editor-action-rich-style.css

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+gux-button-slot button {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+gux-button-slot button.gux-is-pressed {
+  color: var(--gse-ui-button-ghost-active-foregroundColor);
+  background-color: var(--gse-ui-button-ghost-active-backgroundColor);
+}
+
+.gux-list-container {
+  inline-size: 214px;
+  margin: 0;
+  overflow-y: auto;
+  background: var(--gse-ui-menu-backgroundColor);
+  border-color: var(--gse-ui-menu-border-color);
+  border-style: var(--gse-ui-menu-border-style);
+  border-width: var(--gse-ui-menu-border-width);
+  border-radius: var(--gse-ui-menu-borderRadius);
+  box-shadow: var(--gse-ui-menu-boxShadow-offsetX) var(--gse-ui-menu-boxShadow-offsetY) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
+}