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

package/dist/collection/components/stable/gux-time-picker/gux-time-picker.css

@@ -0,0 +1,121 @@
+.gux-time-picker {
+  position: relative;
+  display: inline-block;
+}
+.gux-time-picker.gux-error .gux-input-time {
+  border-color: var(--gse-ui-formControl-input-error-border-color);
+}
+.gux-time-picker .gux-input-time {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-input-gap);
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  width: 100%;
+  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: 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-time-picker .gux-input-time: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-time-picker .gux-input-time input {
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 0;
+  width: 2ch;
+  padding: 0;
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
+  border: none;
+  outline: none;
+}
+.gux-time-picker .gux-input-time input.gux-input-time-hours {
+  text-align: right;
+}
+.gux-time-picker .gux-input-time input::placeholder {
+  color: var(--gse-ui-formControl-input-placeholderColor);
+  opacity: 1;
+}
+.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector {
+  display: grid;
+  grid-template: auto 1fr/auto 1fr auto;
+  place-items: flex-end;
+  padding: 0;
+  font-family: var(--gse-ui-formControl-input-prefixSufix-text-fontFamily);
+  font-size: var(--gse-ui-formControl-input-prefixSufix-text-fontSize);
+  line-height: var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);
+  font-weight: var(--gse-ui-formControl-input-prefixSufix-text-fontWeight);
+  color: var(--gse-ui-formControl-input-populatedColor);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible {
+  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-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem {
+  grid-row: 1/1;
+  grid-column: 1/1;
+  visibility: hidden;
+}
+.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem.gux-visible {
+  visibility: visible;
+}
+.gux-time-picker .gux-input-time .gux-clock-button {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  align-self: auto;
+  justify-content: center;
+  order: 0;
+  padding: 0;
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
+  background: transparent;
+  border: none;
+}
+.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled) {
+  color: #4856cb;
+  cursor: pointer;
+}
+.gux-time-picker .gux-input-time .gux-clock-button:focus {
+  outline: none;
+}
+.gux-time-picker .gux-input-time .gux-clock-button:focus-visible {
+  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-time-picker .gux-input-time .gux-clock-button gux-icon {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+}
+.gux-time-picker .gux-time-separator {
+  padding: 0 1ch;
+}
+.gux-time-picker .gux-list-container {
+  max-height: 150px;
+  padding: var(--gse-ui-menu-padding);
+  margin: 0;
+  overflow-y: scroll;
+  list-style: none;
+  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  background-color: var(--gse-ui-menu-backgroundColor);
+  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);
+  border-radius: var(--gse-ui-menu-borderRadius);
+}

package/dist/collection/components/{beta → stable}/gux-time-picker/gux-time-picker.js

@@ -16,7 +16,7 @@ import { buildI18nForComponent } from '../../../i18n';
 import { trackComponent } from '@utils/tracking/usage';
 import translationResources from './i18n/en.json';
 import { getHourDisplayValue, getHoursPattern, getLocaleClockType, getMinuteDisplayValue, getMinutesPattern, getTimeDisplayValues, getValidValueHourChange, getValidValueMinuteChange, getValue, incrementHour, incrementMinute, isAm } from './gux-time-picker.service';
-export class GuxTimePickerBeta {
+export class GuxTimePicker {
   constructor() {
     this.value = '00:00';
     this.interval = 60;
@@ -215,11 +215,11 @@ export class GuxTimePickerBeta {
         'gux-error': this.hasError
       }, expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
   }
-  static get is() { return "gux-time-picker-beta"; }
+  static get is() { return "gux-time-picker"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-time-picker.less"]
+      "$": ["gux-time-picker.scss"]
     };
   }
   static get styleUrls() {
@@ -406,4 +406,4 @@ export class GuxTimePickerBeta {
 }
 __decorate([
   OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxTimePickerBeta.prototype, "onClickOutside", null);
+], GuxTimePicker.prototype, "onClickOutside", null);

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

@@ -40,7 +40,7 @@ export class GuxToast {
     return (h("div", { class: "gux-buttons-bar" }, h("slot", { name: "link" })));
   }
   renderActions() {
-    return (h("div", { class: "gux-buttons-bar" }, this.hasSecondaryButton && (h("gux-button-slot-beta", null, h("slot", { name: "secondary-button" }))), h("gux-button-slot-beta", { accent: this.hasSecondaryButton ? 'primary' : 'tertiary' }, h("slot", { name: "primary-button" }))));
+    return (h("div", { class: "gux-buttons-bar" }, this.hasSecondaryButton && (h("gux-button-slot", null, h("slot", { name: "secondary-button" }))), h("gux-button-slot", { accent: this.hasSecondaryButton ? 'primary' : 'tertiary' }, h("slot", { name: "primary-button" }))));
   }
   render() {
     return (h("div", { class: `gux-toast gux-toast-${this.toastType}` }, h("div", { class: `gux-icon gux-icon-${this.toastType}` }, this.renderToastIcon()), h("div", { class: "gux-content" }, h("div", { class: "gux-message" }, h("gux-truncate", { class: "gux-message-title", "max-lines": 1 }, h("slot", { name: "title" })), h("gux-truncate", { class: "gux-message-body", "max-lines": 2 }, h("slot", { name: "message" }))), this.toastType !== 'action' && this.hasLink && this.renderLink(), this.toastType === 'action' &&

package/dist/collection/components/stable/gux-toggle/gux-toggle-slider/gux-toggle-slider.css

@@ -1,3 +1,42 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
 gux-toggle-slider {
   display: flex;
   align-items: center;
@@ -21,9 +60,10 @@ gux-toggle-slider .gux-toggle-slider.gux-disabled {
 }
 gux-toggle-slider .gux-toggle-slider:focus-visible {
   outline: none;
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  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-toggle-slider .gux-toggle-slider .gux-slider {
   position: absolute;
@@ -38,7 +78,7 @@ gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch {
   left: 1px;
   width: 14px;
   height: 14px;
-  content: '';
+  content: "";
   background-color: #fdfdfd;
   border-radius: 50%;
   transition: 0.5s;
@@ -64,4 +104,4 @@ gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-ico
   opacity: 1;
   transition: opacity 0.25s linear;
   transition-delay: 0.25s;
-}
+}

package/dist/collection/components/stable/gux-toggle/gux-toggle-slider/gux-toggle-slider.js

@@ -29,7 +29,7 @@ export class GuxToggleSlider {
   static get is() { return "gux-toggle-slider"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-toggle-slider.less"]
+      "$": ["gux-toggle-slider.scss"]
     };
   }
   static get styleUrls() {

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

@@ -4,9 +4,11 @@
   color: #2e394c;
   outline: none;
 }
+
 :host(.gux-display-inline) {
   display: inline-block;
 }
+
 .gux-toggle-container {
   cursor: pointer;
 }
@@ -41,7 +43,7 @@
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text {
   display: grid;
-  grid-template-areas: 'inner-div';
+  grid-template-areas: "inner-div";
   place-items: start;
 }
 .gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner {
@@ -84,4 +86,4 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-}
+}

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

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

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

@@ -1,12 +1,41 @@
+/**
+  * @prop --gse-ui-tooltip-light-border-color
+  * @prop --gse-ui-tooltip-light-border-width
+  * @prop --gse-ui-tooltip-light-border-style
+  * @prop --gse-ui-tooltip-light-backgroundColor
+  * @prop --gse-ui-tooltip-light-foregroundColor
+  * @prop --gse-ui-tooltip-light-iconColor
+  * @prop --gse-ui-tooltip-dark-border-color
+  * @prop --gse-ui-tooltip-dark-border-width
+  * @prop --gse-ui-tooltip-dark-border-style
+  * @prop --gse-ui-tooltip-dark-backgroundColor
+  * @prop --gse-ui-tooltip-dark-foregroundColor
+  * @prop --gse-ui-tooltip-dark-iconColor
+  * @prop --gse-ui-tooltip-boxShadow-x
+  * @prop --gse-ui-tooltip-boxShadow-y
+  * @prop --gse-ui-tooltip-boxShadow-blur
+  * @prop --gse-ui-tooltip-boxShadow-spread
+  * @prop --gse-ui-tooltip-boxShadow-color
+  * @prop --gse-ui-tooltip-padding
+  * @prop --gse-ui-tooltip-height
+  * @prop --gse-ui-tooltip-gap
+  * @prop --gse-ui-tooltip-borderRadius
+  * @prop --gse-ui-tooltip-text-fontFamily
+  * @prop --gse-ui-tooltip-text-lineHeight
+  * @prop --gse-ui-tooltip-text-fontSize
+  * @prop --gse-ui-tooltip-text-fontWeight
+
+  */
 :host {
   position: fixed;
   z-index: var(--gux-zindex-tooltip, 1);
   display: none;
   width: max-content;
   max-width: 250px;
-  overflow: hidden;
   opacity: 0;
+  box-shadow: var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
 }
+
 :host(.gux-show) {
   display: block;
   animation-name: fade-in;
@@ -14,15 +43,82 @@
   animation-delay: 1s;
   animation-fill-mode: forwards;
 }
+
 .gux-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-content: center;
+  gap: var(--gse-ui-tooltip-gap);
   box-sizing: border-box;
-  padding: 6px 12px;
-  color: #2e394c;
+  padding: var(--gse-ui-tooltip-padding);
   pointer-events: none;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-tooltip-borderRadius);
+  font-family: var(--gse-ui-tooltip-text-fontFamily);
+  font-weight: var(--gse-ui-tooltip-text-fontWeight);
+  line-height: var(--gse-ui-tooltip-text-lineHeight);
+  font-size: var(--gse-ui-tooltip-text-fontSize);
+  background-color: var(--gse-ui-tooltip-light-backgroundColor);
+  border: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+  color: var(--gse-ui-tooltip-light-foregroundColor);
 }
+.gux-container[data-placement=bottom] .gux-arrow, .gux-container[data-placement=bottom-start] .gux-arrow, .gux-container[data-placement=bottom-end] .gux-arrow {
+  border-top: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+  border-left: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+}
+.gux-container[data-placement=top] .gux-arrow, .gux-container[data-placement=top-start] .gux-arrow, .gux-container[data-placement=top-end] .gux-arrow {
+  border-right: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+  border-bottom: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+}
+.gux-container[data-placement=left] .gux-arrow, .gux-container[data-placement=left-start] .gux-arrow, .gux-container[data-placement=left-end] .gux-arrow {
+  border-top: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+  border-right: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+}
+.gux-container[data-placement=right] .gux-arrow, .gux-container[data-placement=right-start] .gux-arrow, .gux-container[data-placement=right-end] .gux-arrow {
+  border-bottom: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+  border-left: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+}
+.gux-container .gux-arrow {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: var(--gse-ui-tooltip-borderRadius);
+  background: inherit;
+}
+.gux-container ::slotted(gux-icon) {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-tooltip-light-iconColor);
+  align-self: center;
+}
+.gux-container.gux-dark {
+  background-color: var(--gse-ui-tooltip-dark-backgroundColor);
+  border-color: var(--gse-ui-tooltip-dark-border-color);
+  color: var(--gse-ui-tooltip-dark-foregroundColor);
+}
+.gux-container.gux-dark[data-placement=bottom] .gux-arrow, .gux-container.gux-dark[data-placement=bottom-start] .gux-arrow, .gux-container.gux-dark[data-placement=bottom-end] .gux-arrow {
+  border-top: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
+  border-left: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
+}
+.gux-container.gux-dark[data-placement=top] .gux-arrow, .gux-container.gux-dark[data-placement=top-start] .gux-arrow, .gux-container.gux-dark[data-placement=top-end] .gux-arrow {
+  border-right: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
+  border-bottom: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
+}
+.gux-container.gux-dark[data-placement=left] .gux-arrow, .gux-container.gux-dark[data-placement=left-start] .gux-arrow, .gux-container.gux-dark[data-placement=left-end] .gux-arrow {
+  border-top: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
+  border-right: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
+}
+.gux-container.gux-dark[data-placement=right] .gux-arrow, .gux-container.gux-dark[data-placement=right-start] .gux-arrow, .gux-container.gux-dark[data-placement=right-end] .gux-arrow {
+  border-bottom: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
+  border-left: var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);
+}
+.gux-container.gux-dark ::slotted(gux-icon) {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+  color: var(--gse-ui-tooltip-dark-iconColor);
+  align-self: center;
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -30,4 +126,4 @@
   100% {
     opacity: 1;
   }
-}
+}

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

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, offset, shift, arrow } from '@floating-ui/dom';
 import { randomHTMLId } from '@utils/dom/random-html-id';
 import { trackComponent } from '@utils/tracking/usage';
 import { findElementById } from '@utils/dom/find-element-by-id';
@@ -16,6 +16,8 @@ export class GuxTooltip {
     this.id = randomHTMLId('gux-tooltip');
     this.for = undefined;
     this.placement = 'bottom-start';
+    this.accent = 'light';
+    this.anchor = false;
     this.isShown = false;
   }
   handleKeyDown(event) {
@@ -46,17 +48,41 @@ export class GuxTooltip {
     });
   }
   updatePosition() {
+    const middleware = [offset(16), flip(), shift()];
+    if (this.anchor) {
+      middleware.push(arrow({ element: this.arrowElement }));
+    }
     void computePosition(this.forElement, this.root, {
       placement: this.placement,
       strategy: 'fixed',
-      middleware: [offset(16), flip(), shift()]
-    }).then(({ x, y, placement }) => {
+      middleware: middleware
+    }).then(({ x, y, middlewareData, placement }) => {
       Object.assign(this.root.style, {
         left: `${x}px`,
         top: `${y}px`
       });
-      // data-placement is currently only used for e2e tests
-      this.root.setAttribute('data-placement', placement);
+      //data-placement needed on the for e2e tests.
+      this.root.setAttribute('data-placement', this.placement);
+      const side = placement.split('-')[0];
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[side];
+      if (middlewareData.arrow) {
+        //This is 13 because this makes the arrow look aligned.
+        const arrowLen = 13;
+        const { x, y } = middlewareData.arrow;
+        Object.assign(this.arrowElement.style, {
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+          right: '',
+          bottom: '',
+          [staticSide]: `${-arrowLen / 2}px`,
+          transform: 'rotate(45deg)'
+        });
+      }
     });
   }
   show() {
@@ -84,6 +110,11 @@ export class GuxTooltip {
       console.error(`gux-tooltip: invalid element supplied to 'for': "${this.for}"`);
     }
   }
+  renderAnchor() {
+    if (this.anchor) {
+      return (h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }));
+    }
+  }
   connectedCallback() {
     this.getForElement();
     if (this.forElement) {
@@ -98,7 +129,7 @@ export class GuxTooltip {
     }
   }
   componentWillLoad() {
-    trackComponent(this.root);
+    trackComponent(this.root, { variant: this.placement });
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e;
@@ -112,13 +143,16 @@ export class GuxTooltip {
     (_e = this.forElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusout', this.focusoutHandler);
   }
   render() {
-    return (h(Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { class: "gux-container" }, h("slot", null))));
+    return (h(Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { class: {
+        'gux-container': true,
+        [`gux-${this.accent}`]: true
+      }, "data-placement": this.placement }, h("slot", null), this.renderAnchor())));
   }
   static get is() { return "gux-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-tooltip.less"]
+      "$": ["gux-tooltip.scss"]
     };
   }
   static get styleUrls() {
@@ -167,6 +201,47 @@ export class GuxTooltip {
         "attribute": "placement",
         "reflect": false,
         "defaultValue": "'bottom-start'"
+      },
+      "accent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxTooltipAccent",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "GuxTooltipAccent": {
+              "location": "import",
+              "path": "./gux-tooltip-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accent",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
+      "anchor": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "anchor",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/stable/gux-tooltip-title/gux-tooltip-title.js

@@ -11,6 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from '@stencil/core';
 import { logWarn } from '../../../utils/error/log-error';
 import { OnMutation } from '../../../utils/decorator/on-mutation';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 export class GuxTooltipTitle {
   constructor() {
     this.hasTooltip = false;
@@ -46,6 +47,10 @@ export class GuxTooltipTitle {
   onMutation() {
     this.titleName = this.setTooltipTitleText();
     this.checkForTooltipHideOrShow();
+    // Handle checking if the tooltip should hide/show for dynamic content
+    afterNextRenderTimeout(() => {
+      this.checkForTooltipHideOrShow();
+    }, 500);
   }
   componentWillLoad() {
     this.titleName = this.setTooltipTitleText();

package/dist/collection/i18n/DateTimeFormatter.js

@@ -22,8 +22,8 @@ export class DateTimeFormatter {
    * @param {GuxDateTimeFormat} format An allowed format string
    * @returns {string} Formatted date string
    */
-  formatDate(datetime, format) {
-    return datetime.toLocaleDateString(this.locale, { dateStyle: format });
+  formatDate(datetime, format, options = {}) {
+    return datetime.toLocaleDateString(this.locale, Object.assign({}, options, { dateStyle: format }));
   }
   /**
    *
@@ -31,8 +31,8 @@ export class DateTimeFormatter {
    * @param {GuxDateTimeFormat} format An allowed format string
    * @returns {string} Formatted time string
    */
-  formatTime(datetime, format) {
-    return datetime.toLocaleTimeString(this.locale, { timeStyle: format });
+  formatTime(datetime, format, options = {}) {
+    return datetime.toLocaleTimeString(this.locale, Object.assign({}, options, { timeStyle: format }));
   }
   /**
    *
@@ -40,10 +40,7 @@ export class DateTimeFormatter {
    * @param {GuxDateTimeFormat} format An allowed format string
    * @returns {string} Formatted datetime string
    */
-  formatDateTime(datetime, format) {
-    return datetime.toLocaleString(this.locale, {
-      dateStyle: format,
-      timeStyle: format
-    });
+  formatDateTime(datetime, format, options = {}) {
+    return datetime.toLocaleString(this.locale, Object.assign({}, options, { dateStyle: format, timeStyle: format }));
   }
 }