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

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

@@ -75,6 +75,10 @@ export class GuxCalendar {
     for (let i = 0; i < length; i++) {
       const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 0, 0, 0, 0);
       const classes = [];
+      const today = new Date();
+      const isToday = currentDate.getFullYear() === today.getFullYear() &&
+        currentDate.getMonth() === today.getMonth() &&
+        currentDate.getDate() === today.getDate();
       let disabled = false;
       let hidden = false;
       if (date.getMonth() !== month) {
@@ -90,6 +94,9 @@ export class GuxCalendar {
         disabled = true;
       }
       let isSelected = false;
+      if (isToday) {
+        classes.push('gux-current-date');
+      }
       if (this.mode === "range" /* CalendarModes.Range */) {
         const [start, end] = fromIsoDateRange(this.value);
         const fromTimeStamp = start.getTime();
@@ -117,7 +124,8 @@ export class GuxCalendar {
         date,
         hidden,
         disabled,
-        selected: isSelected
+        selected: isSelected,
+        isToday
       });
       currentDate.setDate(currentDate.getDate() + 1);
     }
@@ -306,7 +314,7 @@ export class GuxCalendar {
     })));
   }
   renderCalendarTable(index) {
-    return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale))))))))));
+    return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
   }
   render() {
     return (h("div", { class: "gux-calendar" }, h("div", { class: "gux-header" }, h("button", { type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })), this.renderMonthHeader(), h("button", { type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("div", { class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
@@ -315,7 +323,7 @@ export class GuxCalendar {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-calendar.less"]
+      "$": ["gux-calendar.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.css

@@ -15,6 +15,11 @@ button {
   padding: 0 8px;
 }
 
+button.gux-compact {
+  height: var(--gse-ui-contextMenu-button-compact);
+  padding: 0 4px;
+}
+
 button:hover:enabled {
   background-color: var(--gse-ui-contextMenu-states-hover-backgroundColor);
 }

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.js

@@ -19,8 +19,9 @@ import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
 export class GuxContextMenu {
   constructor() {
     this.buttonId = randomHTMLId();
-    this.screenreaderText = '';
+    this.compact = false;
     this.disabled = false;
+    this.screenreaderText = '';
     this.isOpen = false;
   }
   /**
@@ -106,7 +107,7 @@ export class GuxContextMenu {
     this.i18n = await buildI18nForComponent(this.root, translationResources);
   }
   render() {
-    return (h(Host, null, h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
+    return (h(Host, null, h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
         this.i18n('contextMenuScreenreaderText') })))), h("div", { slot: "popup", class: "gux-list-container" }, h("gux-list", { onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null))))));
   }
   static get is() { return "gux-context-menu"; }
@@ -124,23 +125,23 @@ export class GuxContextMenu {
   }
   static get properties() {
     return {
-      "screenreaderText": {
-        "type": "string",
+      "compact": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Screenreader text for context menu button\ndefaults to \"context menu\""
+          "text": "Indicates button density style. Intended to be paired with gux-table property."
         },
-        "attribute": "screenreader-text",
+        "attribute": "compact",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "false"
       },
       "disabled": {
         "type": "boolean",
@@ -159,6 +160,24 @@ export class GuxContextMenu {
         "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "screenreaderText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Screenreader text for context menu button\ndefaults to \"context menu\""
+        },
+        "attribute": "screenreader-text",
+        "reflect": false,
+        "defaultValue": "''"
       }
     };
   }

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

@@ -1,6 +1,72 @@
+/*
+@prop gse-ui-formControl-input-focus-border-width
+@prop gse-ui-formControl-input-focus-border-style
+@prop gse-ui-formControl-input-focus-border-color
+@prop gse-ui-formControl-input-active-border-width
+@prop gse-ui-formControl-input-active-border-style
+@prop gse-ui-formControl-input-active-border-color
+@prop gse-ui-formControl-focusRing-borderRadius
+@prop gse-ui-datePicker-disabled-opacity
+@prop gse-ui-formControl-label-text-fontSize
+@prop gse-ui-formControl-input-textfield-height
+@prop gse-ui-formControl-input-padding
+@prop gse-ui-formControl-input-contentText-fontFamily
+@prop gse-ui-formControl-input-contentText-fontSize
+@prop gse-ui-formControl-input-contentText-lineHeight
+@prop gse-ui-formControl-input-populatedColor
+@prop gse-ui-formControl-input-backgroundColor
+@prop gse-ui-formControl-input-default-border-width
+@prop gse-ui-formControl-input-default-border-style
+@prop gse-ui-formControl-input-default-border-color
+@prop gse-ui-formControl-input-borderRadius
+@prop gse-ui-calendarMenu-day-input-width
+@prop gse-ui-formControl-input-inputIcon-iconEndColor
+@prop gse-ui-actionButton-borderRadius
+@prop gse-ui-icon-size-sm
+*/
+.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);
+}
+
 :host {
   display: block;
 }
+
 .gux-datepicker {
   display: inline-block;
 }
@@ -9,7 +75,7 @@
   cursor: default;
 }
 .gux-datepicker.gux-disabled .gux-datepicker-field .gux-datepicker-field-input {
-  opacity: 0.5;
+  opacity: var(--gse-ui-datePicker-disabled-opacity);
 }
 .gux-datepicker .gux-datepicker-field {
   display: inline-flex;
@@ -36,64 +102,58 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  margin-right: 8px;
-  font-size: 12px;
-  font-weight: bold;
-  line-height: 20px;
+  margin-right: var(--gse-ui-formControl-label-gap);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input {
-  position: relative;
-  flex: 0 1 auto;
-  align-self: auto;
-  order: 0;
-  margin: 4px 0;
-}
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  gap: 4px;
+  gap: var(--gse-ui-formControl-input-gap);
   align-content: stretch;
   align-items: center;
   justify-content: center;
+  white-space: nowrap;
   width: 100%;
-  height: 32px;
-  padding: 4px 8px;
-  font-family: inherit;
-  font-size: 12px;
-  line-height: 1.6667;
-  color: #2e394c;
-  background-color: #f6f7f9;
+  height: var(--gse-ui-formControl-input-textfield-height);
+  padding: var(--gse-ui-formControl-input-padding);
+  font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
+  font-size: var(--gse-ui-formControl-input-contentText-fontSize);
+  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  color: var(--gse-ui-formControl-input-populatedColor);
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
-  border: 1px solid #6b7585;
-  border-radius: 4px;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+  border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
+}
+.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input:focus-within {
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input:focus-within {
-  border-color: #2a60c8;
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 100px;
+  width: var(--gse-ui-calendarMenu-day-input-width);
   overflow: hidden;
-  color: #2e394c;
-  background-color: #f6f7f9;
+  color: var(--gse-ui-formControl-input-populatedColor);
   border: none;
   outline: none;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::placeholder {
-  color: #596373;
+  color: var(--gse-ui-formControl-input-placeholderColor);
   opacity: 1;
 }
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-cancel-button,
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-results-button,
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-calendar-picker-indicator {
+.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-cancel-button, .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-results-button, .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
 }
@@ -104,43 +164,40 @@
   align-self: auto;
   justify-content: center;
   order: 0;
-  padding: 2px;
-  color: #596373;
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
   background: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-actionButton-borderRadius);
   outline: none;
 }
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:focus-within {
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible,
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover {
-  color: #2e394c;
+.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible, .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover {
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
   cursor: pointer;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button gux-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input gux-calendar {
   position: fixed;
   z-index: var(--gux-zindex-popup, 1);
   display: none;
-  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
 }
 .gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button {
-  color: #2a60c8;
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
 }
-.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible,
-.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover {
-  color: #2a60c8;
+.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible, .gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover {
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
 }
 .gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input gux-calendar {
   display: block;
 }
+
 .gux-sr-only {
   position: absolute;
   top: auto;
@@ -148,4 +205,4 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

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

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

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

@@ -146,10 +146,6 @@
   margin: 0;
 }
 
-gux-popup::part(gux-popup-container) {
-  width: inherit;
-}
-
 .gux-selected-icon {
   display: flex;
   align-items: center;

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

@@ -202,8 +202,4 @@
 .gux-listbox-container {
   box-sizing: border-box;
   margin: 0;
-}
-
-gux-popup::part(gux-popup-container) {
-  width: inherit;
 }

package/dist/collection/components/stable/gux-flyout-menu/gux-flyout-menu.css

@@ -0,0 +1,79 @@
+.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);
+}
+
+:host {
+  z-index: var(--gux-zindex-popover);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
+  cursor: default;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+:host(: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-flyout-menu-content {
+  display: none;
+}
+.gux-flyout-menu-content.gux-shown {
+  display: flex;
+}
+
+.gux-arrow,
+.gux-arrow::before {
+  position: absolute;
+  top: -3px;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+}
+
+.gux-arrow::before {
+  visibility: visible;
+  content: "";
+  border-top: 1px solid #b4bccb;
+  border-left: 1px solid #b4bccb;
+  transform: rotate(45deg);
+}

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

@@ -134,11 +134,11 @@ export class GuxFlyoutMenu {
         'gux-shown': this.isShown
       }, ref: el => (this.menuContentElement = el) }, h("slot", { name: "menu" }))));
   }
-  static get is() { return "gux-flyout-menu-beta"; }
+  static get is() { return "gux-flyout-menu"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-flyout-menu.less"]
+      "$": ["gux-flyout-menu.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.css

@@ -0,0 +1,26 @@
+gux-menu-option {
+  display: block;
+  flex: 1 1 auto;
+  align-self: auto;
+}
+gux-menu-option .gux-menu-option-button {
+  all: unset;
+  width: var(--gse-ui-flyoutMenu-width);
+  height: var(--gse-ui-menu-option-height);
+  padding: 4px 12px;
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
+  background-color: var(--gse-ui-menu-option-default-backgroundColor);
+}
+gux-menu-option .gux-menu-option-button:focus-within, gux-menu-option .gux-menu-option-button:hover {
+  background-color: var(--gse-ui-menu-option-hover-backgroundColor);
+}
+gux-menu-option .gux-menu-option-button:enabled {
+  cursor: pointer;
+}
+gux-menu-option .gux-menu-option-button .gux-menu-option-button-text {
+  display: block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/collection/components/{beta → stable}/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.js

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

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu.css

@@ -0,0 +1,23 @@
+gux-menu {
+  flex-direction: column;
+  width: fit-content;
+  padding: var(--gse-ui-flyoutMenu-padding);
+  background-color: var(--gse-ui-flyoutMenu-backgroundColor);
+  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);
+}
+gux-menu .gux-arrow,
+gux-menu .gux-arrow::before {
+  position: absolute;
+  top: -3px;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+}
+gux-menu .gux-arrow::before {
+  visibility: visible;
+  content: "";
+  border-top: 1px solid #b4bccb;
+  border-left: 1px solid #b4bccb;
+  transform: rotate(45deg);
+}

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

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

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.css

@@ -0,0 +1,55 @@
+gux-submenu {
+  display: block;
+  flex: 1 1 auto;
+  align-self: auto;
+}
+gux-submenu .gux-submenu-button {
+  all: unset;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: flex-start;
+  width: var(--gse-ui-flyoutMenu-width);
+  height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
+  background-color: #fdfdfd;
+}
+gux-submenu .gux-submenu-button:focus-within, gux-submenu .gux-submenu-button:hover {
+  background-color: var(--gse-ui-menu-option-hover-backgroundColor);
+}
+gux-submenu .gux-submenu-button .gux-submenu-button-text {
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 0;
+  margin-right: var(--gse-ui-menu-option-gap);
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+gux-submenu .gux-submenu-button .gux-submenu-open-icon {
+  flex: 0 0 auto;
+  align-self: auto;
+  order: 0;
+  width: var(--gse-ui-menu-option-startIcon-width);
+  height: var(--gse-ui-menu-option-startIcon-height);
+}
+gux-submenu .gux-submenu-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  flex-direction: column;
+  padding: var(--gse-ui-menu-padding);
+  margin: 0;
+  visibility: hidden;
+  background-color: 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);
+  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);
+}
+gux-submenu .gux-submenu-wrapper.gux-shown {
+  visibility: visible;
+}

package/dist/collection/components/{beta → stable}/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.js

@@ -151,7 +151,7 @@ export class GuxSubmenu {
   static get is() { return "gux-submenu"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-submenu.less"]
+      "$": ["gux-submenu.scss"]
     };
   }
   static get styleUrls() {