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

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

@@ -1,80 +1,43 @@
 .gux-month-calendar {
   flex-wrap: wrap;
-  width: 255px;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
+  width: var(--gse-ui-calendarMenu-width);
+  height: var(--gse-ui-calendarMenu-height);
+  box-shadow: var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
 }
 .gux-month-calendar .gux-year-header {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 16px;
-  padding: 16px;
-  color: #fdfdfd;
-  background-color: #2a60c8;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+  font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
+  line-height: var(--gse-ui-calendarMenu-day-headerText-lineHeight);
+  font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
+  height: var(--gse-ui-calendarMenu-month-single-header-height);
+  padding: var(--gse-ui-calendarMenu-header-padding);
+  color: var(--gse-ui-calendarMenu-header-foregroundColor);
+  background-color: var(--gse-ui-calendarMenu-header-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);
 }
 .gux-month-calendar .gux-year-header button {
-  color: #fdfdfd;
+  color: inherit;
   cursor: pointer;
   background: none;
   border: none;
   outline: none;
+  padding: 8px;
 }
 .gux-month-calendar .gux-year-header button:focus-visible {
-  border-radius: 4px;
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-semantic-focusRing-width) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
 }
 .gux-month-calendar .gux-year-header button.gux-year-change:disabled {
   cursor: default;
-  opacity: 0.5;
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
 .gux-month-calendar .gux-year-header button gux-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
   pointer-events: none;
-}
-.gux-month-calendar .gux-year-header .gux-year {
-  font-family: sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-}
-.gux-month-calendar .gux-months {
-  padding: 24px;
-  background-color: #fdfdfd;
-}
-.gux-month-calendar .gux-months button {
-  width: 65px;
-  height: 50px;
-  margin: 2px;
-  text-align: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  font-family: sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-}
-.gux-month-calendar .gux-months button:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-.gux-month-calendar .gux-months button.gux-selected,
-.gux-month-calendar .gux-months button:hover {
-  color: #fdfdfd;
-  background-color: #2a60c8;
-}
-.gux-month-calendar .gux-months button:disabled {
-  color: #596373;
-  pointer-events: none;
-  background-color: #fdfdfd;
-}
+}

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

@@ -100,7 +100,7 @@ export class GuxMonthCalendar {
     return (h("div", { class: "gux-year-header" }, h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
         currentYear: parseInt(this.year),
         changeYear: parseInt(this.year) - 1
-      }) })), h("div", { class: "gux-year" }, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
+      }) })), h("div", null, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
         currentYear: parseInt(this.year),
         changeYear: parseInt(this.year) + 1
       }) }))));
@@ -123,7 +123,7 @@ export class GuxMonthCalendar {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-month-calendar.less"]
+      "$": ["gux-month-calendar.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,53 +1,44 @@
 :host {
   flex: 0 0 33.3%;
 }
+
 :host([disabled]) {
   pointer-events: none;
 }
-:host([disabled='false']) {
+
+:host([disabled=false]) {
   pointer-events: auto;
 }
-::slotted(gux-icon) {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  vertical-align: middle;
-}
+
 .gux-container {
-  padding: 4px;
+  padding-left: var(--gse-ui-calendarMenu-monthBody-gap);
+  padding-right: var(--gse-ui-calendarMenu-monthBody-gap);
 }
 .gux-container button {
   all: unset;
   box-sizing: border-box;
   width: 100%;
-  height: 49px;
-  padding: 8px 0;
-  color: #2e394c;
+  height: var(--gse-ui-calendarMenu-month-monthCell-height);
   text-align: center;
   word-wrap: break-word;
   cursor: pointer;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
   outline: none;
 }
 .gux-container button.gux-selected {
-  color: #fdfdfd;
-  background: #2a60c8;
+  color: var(--gse-ui-calendarMenu-month-selected-foregroundColor);
+  background: var(--gse-ui-calendarMenu-month-selected-backgroundColor);
 }
 .gux-container button:focus-visible:not(:disabled) {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
 }
 .gux-container button:hover:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
-}
-.gux-container button:active:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+  background: var(--gse-ui-calendarMenu-month-hover-backgroundColor);
 }
 .gux-container button:disabled {
-  color: rgba(46, 57, 76, 0.5);
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
   cursor: default;
-}
+}

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

@@ -27,7 +27,7 @@ export class GuxMonthListItem {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-month-list-item.less"]
+      "$": ["gux-month-list-item.scss"]
     };
   }
   static get styleUrls() {

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

@@ -2,7 +2,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 12px 16px;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-}
+  padding: var(--gse-ui-calendarMenu-monthBody-padding);
+  background-color: var(--gse-ui-calendarMenu-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
+  box-shadow: var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
+}

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

@@ -48,7 +48,7 @@ export class GuxMonthList {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-month-list.less"]
+      "$": ["gux-month-list.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,25 +1,30 @@
 :host {
   display: inline-block;
 }
+
 .gux-target {
   display: inline-flex;
-  padding: 4px 8px 4px 12px;
   cursor: pointer;
-  background-color: #f6f7f9;
-  border: 1px solid #6b7585;
-  border-radius: 4px;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+  padding: var(--gse-ui-formControl-textarea-padding);
+  gap: var(--gse-ui-formControl-input-gap);
+  background-color: var(--gse-ui-calendarMenu-backgroundColor);
+  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-target:focus-within {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  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-target .gux-display {
   display: inline-flex;
   min-width: 100px;
-  padding-right: 8px;
-  color: #2e394c;
+  padding-right: var(--gse-ui-formControl-input-gap);
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  color: var(--gse-ui-formControl-label-labelColor);
 }
 .gux-target .gux-display .gux-spinner {
   outline: none;
@@ -28,37 +33,34 @@
   margin-left: 4px;
 }
 .gux-target .gux-display .gux-spinner:focus-visible {
-  background: #deeaff;
-}
-.gux-target .gux-display .gux-spinner.gux-empty {
-  color: #596373;
+  background: var(--gse-ui-calendarMenu-month-hover-backgroundColor);
 }
 .gux-target .gux-popup-toggle {
   justify-content: right;
-  padding: 2px;
-  color: #596373;
+  color: var(--gse-ui-monthPicker-calendarStates-defaultColor);
   background: transparent;
   border: none;
-  border-radius: 4px;
 }
 .gux-target .gux-popup-toggle:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: 2px;
 }
-.gux-target .gux-popup-toggle:not(:disabled):focus,
 .gux-target .gux-popup-toggle:not(:disabled):hover {
-  color: #2e394c;
+  color: var(--gse-ui-monthPicker-calendarStates-hoverColor);
   cursor: pointer;
 }
-.gux-target .gux-popup-toggle gux-icon {
-  width: 16px;
-  height: 16px;
+.gux-target .gux-popup-toggle:not(:disabled):focus {
+  color: var(--gse-ui-monthPicker-calendarStates-activeColor);
+  cursor: pointer;
 }
-.gux-target .gux-popup-toggle.gux-expanded {
-  color: #2a60c8;
+.gux-target .gux-popup-toggle:disabled {
+  color: var(--gse-ui-monthPicker-calendarStates-disabledColor);
 }
-.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):focus-visible,
-.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):hover {
-  color: #2a60c8;
+.gux-target .gux-popup-toggle gux-icon {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
 }
+.gux-target .gux-popup-toggle.gux-expanded {
+  color: var(--gse-ui-monthPicker-calendarStates-activeColor);
+}

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

@@ -163,16 +163,10 @@ export class GuxMonthPicker {
     return this.i18n('unset');
   }
   renderMonthSpinnerButton() {
-    return (h("div", { role: "spinbutton", class: {
-        'gux-spinner': true,
-        'gux-empty': Boolean(!this.value)
-      }, tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementMonth(d), this.yearSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.monthSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('month'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "1", "aria-valuemax": "12", "aria-label": this.i18n('month') }, this.getSpinnerLabel('month')));
+    return (h("div", { role: "spinbutton", class: "gux-spinner", tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementMonth(d), this.yearSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.monthSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('month'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "1", "aria-valuemax": "12", "aria-label": this.i18n('month') }, this.getSpinnerLabel('month')));
   }
   renderYearSpinnerButton() {
-    return (h("div", { role: "spinbutton", class: {
-        'gux-spinner': true,
-        'gux-empty': Boolean(!this.value)
-      }, tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementYear(d), this.monthSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.yearSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('year'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "0", "aria-label": this.i18n('year') }, this.getSpinnerLabel('year')));
+    return (h("div", { role: "spinbutton", class: "gux-spinner", tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementYear(d), this.monthSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.yearSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('year'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "0", "aria-label": this.i18n('year') }, this.getSpinnerLabel('year')));
   }
   renderSpinnerButtons() {
     if (YearFirstLocales.includes(this.locale)) {
@@ -193,13 +187,13 @@ 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", { expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+    return (h("gux-popup", { 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"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-month-picker.less"]
+      "$": ["gux-month-picker.scss"]
     };
   }
   static get styleUrls() {