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

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.js

@@ -0,0 +1,164 @@
+import { h } from '@stencil/core';
+import { getClosestElement } from '@utils/dom/get-closest-element';
+import { getSlotTextContent } from '@utils/dom/get-slot-text-content';
+import { hasSlot } from '@utils/dom/has-slot';
+/**
+ * @slot icon - optional slot for an icon
+ * @slot text - required slot for text
+ */
+export class GuxSegmentedControlItem {
+  constructor() {
+    this.value = undefined;
+    this.selected = false;
+    this.disabled = false;
+    this.iconOnly = false;
+    this.position = undefined;
+  }
+  onClick(e) {
+    if (this.disabled) {
+      e.stopPropagation();
+    }
+  }
+  isInStartPosition(switchItem) {
+    const parentSegmentControl = getClosestElement('gux-segmented-control-beta', switchItem);
+    const children = Array.from(parentSegmentControl.children);
+    const index = children.findIndex(i => i === switchItem);
+    return index === 0;
+  }
+  isInEndPosition(switchItem) {
+    const parentSegmentControl = getClosestElement('gux-segmented-control-beta', switchItem);
+    const children = Array.from(parentSegmentControl.children);
+    const index = children.findIndex(i => i === switchItem);
+    return index === children.length - 1;
+  }
+  renderTooltip() {
+    if (this.iconOnly) {
+      return (h("gux-tooltip", null, getSlotTextContent(this.root, 'text')));
+    }
+  }
+  renderIconSlot() {
+    if (hasSlot(this.root, 'icon')) {
+      return (h("div", { class: {
+          'gux-icon': true,
+          'gux-icon-only': this.iconOnly
+        } }, h("slot", { name: "icon" })));
+    }
+  }
+  render() {
+    return (h("div", { class: {
+        'gux-container': true,
+        'gux-start': this.isInStartPosition(this.root),
+        'gux-end': this.isInEndPosition(this.root)
+      } }, h("button", { class: {
+        'gux-segmented-control-item': true,
+        'gux-icon-only': this.iconOnly,
+        'gux-selected': this.selected
+      }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { class: {
+        'gux-text': true,
+        'gux-icon-only': this.iconOnly
+      } }, h("slot", { name: "text" }))), this.renderTooltip()));
+  }
+  static get is() { return "gux-segmented-control-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-segmented-control-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-segmented-control-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-only",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "position": {}
+    };
+  }
+  static get elementRef() { return "root"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control.js

@@ -0,0 +1,83 @@
+import { h, Host } from '@stencil/core';
+import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { trackComponent } from '@utils/tracking/usage';
+/**
+ * @slot - list of gux-segmented-control-item elements
+ */
+export class GuxSegmentedControl {
+  constructor() {
+    this.value = undefined;
+    this.items = [];
+  }
+  onClick(e) {
+    e.stopPropagation();
+    const switchItem = e.target.closest('gux-segmented-control-item');
+    if (switchItem && this.value !== switchItem.value) {
+      this.value = switchItem.value;
+      simulateNativeEvent(this.root, 'input');
+      simulateNativeEvent(this.root, 'change');
+    }
+  }
+  slotChanged() {
+    this.items = Array.from(this.root.children);
+  }
+  componentWillLoad() {
+    trackComponent(this.root);
+  }
+  componentWillRender() {
+    this.items.forEach(switchItem => {
+      switchItem.selected = switchItem.value === this.value;
+    });
+  }
+  render() {
+    return (h(Host, { role: "group" }, h("slot", { onSlotchange: this.slotChanged.bind(this) })));
+  }
+  static get is() { return "gux-segmented-control-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-segmented-control.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-segmented-control.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "items": {}
+    };
+  }
+  static get elementRef() { return "root"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.css

@@ -129,8 +129,4 @@ gux-popup .gux-dropdown-options {
   background: #fdfdfd;
   border-radius: 4px;
   box-shadow: none;
-}
-
-gux-popup::part(gux-popup-container) {
-  width: inherit;
 }

package/dist/collection/components/{stable/gux-switch → legacy/gux-switch-legacy}/gux-switch-item/gux-switch-item.css

@@ -73,30 +73,30 @@ gux-switch-item.gux-selected {
   font-weight: var(--gse-core-fontWeight-bold);
 }
 
-gux-switch > gux-switch-item .gux-switch-item {
+gux-switch-legacy > gux-switch-item .gux-switch-item {
   padding: 0 8px 4px;
   border-bottom: 1px solid #e2e6ee;
 }
-gux-switch > gux-switch-item .gux-switch-item:focus-visible, gux-switch > gux-switch-item .gux-switch-item:hover {
+gux-switch-legacy > gux-switch-item .gux-switch-item:focus-visible, gux-switch-legacy > gux-switch-item .gux-switch-item:hover {
   padding: 0 8px 1px;
   border-bottom: 4px solid #2a60c8;
   outline: none;
 }
-gux-switch > gux-switch-item .gux-switch-item:focus-visible > gux-icon svg, gux-switch > gux-switch-item .gux-switch-item:hover > gux-icon svg {
+gux-switch-legacy > gux-switch-item .gux-switch-item:focus-visible > gux-icon svg, gux-switch-legacy > gux-switch-item .gux-switch-item:hover > gux-icon svg {
   fill: #2e394c;
 }
-gux-switch > gux-switch-item .gux-switch-item > gux-icon {
+gux-switch-legacy > gux-switch-item .gux-switch-item > gux-icon {
   width: 32px;
   height: 32px;
 }
-gux-switch > gux-switch-item.gux-selected .gux-switch-item {
+gux-switch-legacy > gux-switch-item.gux-selected .gux-switch-item {
   padding: 0 8px 1px;
   border-bottom: 4px solid #2a60c8;
 }
-gux-switch > gux-switch-item.gux-selected .gux-switch-item > gux-icon svg {
+gux-switch-legacy > gux-switch-item.gux-selected .gux-switch-item > gux-icon svg {
   fill: #2e394c;
 }
-gux-switch.gux-small > gux-switch-item .gux-switch-item {
+gux-switch-legacy.gux-small > gux-switch-item .gux-switch-item {
   font-family: var(--gse-core-fontFamily-body), sans-serif;
   font-weight: var(--gse-core-fontWeight-regular);
   font-size: var(--gse-core-fontSize-xs);
@@ -104,13 +104,13 @@ gux-switch.gux-small > gux-switch-item .gux-switch-item {
   padding: 0 4px;
   border-bottom: 1px solid #e2e6ee;
 }
-gux-switch.gux-small > gux-switch-item .gux-switch-item:focus-visible, gux-switch.gux-small > gux-switch-item .gux-switch-item:hover {
+gux-switch-legacy.gux-small > gux-switch-item .gux-switch-item:focus-visible, gux-switch-legacy.gux-small > gux-switch-item .gux-switch-item:hover {
   border-bottom-color: #2e394c;
 }
-gux-switch.gux-small > gux-switch-item .gux-switch-item > gux-icon {
+gux-switch-legacy.gux-small > gux-switch-item .gux-switch-item > gux-icon {
   width: 24px;
   height: 24px;
 }
-gux-switch.gux-small > gux-switch-item.gux-selected .gux-switch-item {
+gux-switch-legacy.gux-small > gux-switch-item.gux-selected .gux-switch-item {
   border-bottom-color: #2e394c;
 }

package/dist/collection/components/{stable/gux-switch → legacy/gux-switch-legacy}/gux-switch.js

@@ -33,7 +33,7 @@ export class GuxSwitch {
   render() {
     return (h(Host, { role: "group", class: `gux-${this.layout}` }, h("slot", { onSlotchange: this.slotChanged.bind(this) })));
   }
-  static get is() { return "gux-switch"; }
+  static get is() { return "gux-switch-legacy"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -115,7 +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", { 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))))));
+    return (h("div", { class: "gux-action-button-container" }, h("gux-popup", { expanded: this.isOpen, disabled: this.disabled, "exceed-target-width": true }, 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"; }

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

@@ -103,7 +103,7 @@ export class GuxButtonMulti {
     trackComponent(this.root, { variant: this.accent });
   }
   render() {
-    return (h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(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() }, h("slot", { name: "title" }), 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("gux-popup", { expanded: this.isOpen, "exceed-target-width": true }, h("div", { slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(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() }, h("slot", { name: "title" }), 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-button-multi"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,34 +1,78 @@
+/**
+@prop gse-ui-calendarMenu-day-headerText-fontFamily
+@prop gse-ui-calendarMenu-day-headerText-lineHeight
+@prop gse-ui-calendarMenu-day-headerText-fontSize
+@prop gse-ui-calendarMenu-day-headerText-fontWeight
+@prop gse-ui-calendarMenu-day-date-size
+@prop gse-ui-calendarMenu-month-headerText-fontFamily
+@prop gse-ui-calendarMenu-month-headerText-lineHeight
+@prop gse-ui-calendarMenu-month-headerText-fontSize
+@prop gse-ui-calendarMenu-month-single-header-height
+@prop gse-ui-calendarMenu-month-focusBorderRadius
+@prop gse-ui-calendarMenu-dateBody-padding
+@prop gse-ui-calendarMenu-header-backgroundColor
+@prop gse-ui-calendarMenu-header-foregroundColor
+@prop gse-ui-calendarMenu-header-gap
+@prop gse-ui-calendarMenu-header-padding
+@prop gse-ui-calendarMenu-backgroundColor
+@prop gse-ui-calendarMenu-date-defaultText-fontFamily
+@prop gse-ui-calendarMenu-date-defaultText-lineHeight
+@prop gse-ui-calendarMenu-date-defaultText-fontSize
+@prop gse-ui-calendarMenu-date-defaultText-fontWeight
+@prop gse-ui-calendarMenu-date-currentText-fontFamily
+@prop gse-ui-calendarMenu-date-currentText-lineHeight
+@prop gse-ui-calendarMenu-date-currentText-fontSize
+@prop gse-ui-calendarMenu-date-currentText-fontWeight
+@prop gse-ui-calendarMenu-date-selected-foregroundColor
+@prop gse-ui-calendarMenu-date-selected-backgroundColor
+@prop gse-ui-calendarMenu-date-selected-hoverBackgroundColor
+@prop gse-ui-calendarMenu-date-hover-backgroundColor
+@prop gse-ui-calendarMenu-date-range-backgroundColor
+@prop gse-ui-calendarMenu-date-default-foregroundColor
+@prop gse-ui-calendarMenu-single-header-borderRadius
+@prop gse-ui-calendarMenu-single-body-borderRadius
+@prop gse-ui-calendarMenu-disabled-opacity
+@prop gse-ui-calendarMenu-boxShadow-color
+@prop gse-ui-calendarMenu-boxShadow-type
+@prop gse-ui-calendarMenu-boxShadow-x
+@prop gse-ui-calendarMenu-boxShadow-y
+@prop gse-ui-calendarMenu-boxShadow-blur
+@prop gse-ui-calendarMenu-boxShadow-spread
+@prop gse-ui-calendarMenu-day-range-height - Not used since this value is already calculated from using other tokens
+@prop gse-ui-calendarMenu-day-input-height - Not used since this value is already calculated from using other tokens
+*/
 :host {
   display: inline-block;
 }
+
 .gux-calendar {
   margin-top: 2px;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  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);
 }
 .gux-calendar .gux-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;
+  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);
+  gap: var(--gse-ui-calendarMenu-header-gap);
+  font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
 }
 .gux-calendar .gux-header button {
   position: absolute;
-  padding: 5px;
-  color: #fdfdfd;
+  color: var(--gse-ui-calendarMenu-month-monthHeader-foregroundColor);
   cursor: pointer;
   background: none;
   border: none;
   outline: none;
 }
 .gux-calendar .gux-header button:focus-visible {
-  outline: #75a8ff auto 5px;
+  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);
 }
 .gux-calendar .gux-header button.gux-left {
   left: 18px;
@@ -37,35 +81,32 @@
   right: 18px;
 }
 .gux-calendar .gux-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-calendar .gux-header .gux-month-list {
   display: flex;
   justify-content: space-between;
   width: 100%;
+  line-height: var(--gse-ui-calendarMenu-month-headerText-lineHeight);
+  font-size: var(--gse-ui-calendarMenu-month-headerText-fontSize);
+  font-family: var(--gse-ui-calendarMenu-month-headerText-fontFamily);
 }
 .gux-calendar .gux-header .gux-month-list label {
   width: 100%;
   text-align: center;
-  font-size: 12px;
-  line-height: 20px;
-  font-family: sans-serif;
-  font-weight: 400;
-  font-weight: 700;
 }
 .gux-calendar .gux-content {
   display: flex;
   align-items: flex-start;
-  padding: 20px 24px;
-  color: #2e394c;
-  background-color: #fdfdfd;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  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);
 }
 .gux-calendar .gux-content table {
-  width: 168px;
+  width: var(--gse-ui-calendarMenu-day-input-width);
   text-align: left;
   table-layout: fixed;
   border-spacing: 0;
@@ -76,64 +117,89 @@
   padding-right: 24px;
 }
 .gux-calendar .gux-content table tr {
-  height: 28px;
+  height: var(--gse-ui-calendarMenu-day-input-height);
 }
 .gux-calendar .gux-content table tr:empty {
   display: none;
 }
 .gux-calendar .gux-content table tr th,
 .gux-calendar .gux-content table tr td {
-  width: 28px;
-  height: 28px;
+  width: var(--gse-ui-calendarMenu-day-date-size);
+  height: var(--gse-ui-calendarMenu-day-date-size);
   padding: 0;
   margin: 0;
   text-align: center;
-  font-family: sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
 }
 .gux-calendar .gux-content table tr th {
-  font-family: sans-serif;
-  font-weight: 400;
-  font-weight: 700;
+  font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
+  line-height: var(--gse-ui-calendarMenu-day-headerText-lineHeight);
+  font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
+  font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
 }
 .gux-calendar .gux-content table tr td {
   cursor: pointer;
+  font-family: var(--gse-ui-calendarMenu-date-defaultText-fontFamily);
+  line-height: var(--gse-ui-calendarMenu-date-defaultText-lineHeight);
+  font-size: var(--gse-ui-calendarMenu-date-defaultText-fontSize);
+  font-weight: var(--gse-ui-calendarMenu-date-defaultText-fontWeight);
+  color: var(--gse-ui-calendarMenu-date-default-foregroundColor);
 }
 .gux-calendar .gux-content table tr td.gux-hovered {
-  background-color: #deeaff;
+  background-color: var(--gse-ui-calendarMenu-date-range-backgroundColor);
 }
 .gux-calendar .gux-content table tr td.gux-selected {
-  color: #fdfdfd;
-  background-color: #2a60c8;
-  border-radius: 4px;
+  color: var(--gse-ui-calendarMenu-date-selected-foregroundColor);
+  background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }
-.gux-calendar .gux-content table tr td.gux-selected.gux-start-date {
-  border-radius: 4px 0 0 4px;
+.gux-calendar .gux-content table tr td.gux-selected:hover:not(.gux-calendar .gux-content table tr td.gux-selected.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-selected.gux-end-date) {
+  background-color: var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor);
 }
-.gux-calendar .gux-content table tr td.gux-selected.gux-end-date {
-  border-radius: 0 4px 4px 0;
+.gux-calendar .gux-content table tr td.gux-start-date, .gux-calendar .gux-content table tr td.gux-end-date {
+  background-color: var(--gse-ui-calendarMenu-date-range-backgroundColor);
 }
-.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date) {
-  color: #fdfdfd;
-  background-color: #2a60c8;
-  border-radius: 4px;
+.gux-calendar .gux-content table tr td.gux-start-date .gux-date, .gux-calendar .gux-content table tr td.gux-end-date .gux-date {
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
+  background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
+  width: var(--gse-ui-calendarMenu-day-date-size);
+  height: var(--gse-ui-calendarMenu-day-date-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.gux-calendar .gux-content table tr td.gux-start-date .gux-date:hover, .gux-calendar .gux-content table tr td.gux-end-date .gux-date:hover {
+  background-color: var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor);
+}
+.gux-calendar .gux-content table tr td.gux-start-date {
+  border-radius: 16px 0 0 16px;
+}
+.gux-calendar .gux-content table tr td.gux-end-date {
+  border-radius: 0 16px 16px 0;
+}
+.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date):not(.gux-calendar .gux-content table tr td.gux-hovered):not(.gux-calendar .gux-content table tr td.gux-selected) {
+  background-color: var(--gse-ui-calendarMenu-date-hover-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }
 .gux-calendar .gux-content table tr td.gux-disabled {
-  color: rgba(46, 57, 76, 0.5);
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
   pointer-events: none;
 }
 .gux-calendar .gux-content table tr td.gux-not-in-month {
-  color: rgba(107, 117, 133, 0.5);
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
 .gux-calendar .gux-content table tr td.gux-not-in-month:hover {
-  color: #2e394c;
-  background-color: #e2e6ee;
+  background-color: var(--gse-ui-calendarMenu-date-hover-backgroundColor);
 }
 .gux-calendar .gux-content table tr td.gux-not-in-month.gux-hidden {
   visibility: hidden;
 }
+.gux-calendar .gux-content table tr td.gux-current-date {
+  font-family: var(--gse-ui-calendarMenu-date-currentText-fontFamily);
+  line-height: var(--gse-ui-calendarMenu-date-currentText-lineHeight);
+  font-size: var(--gse-ui-calendarMenu-date-currentText-fontSize);
+  font-weight: var(--gse-ui-calendarMenu-date-currentText-fontWeight);
+}
+
 .gux-sr-only {
   position: absolute;
   top: auto;
@@ -141,4 +207,4 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

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() {