genesys-spark-components 4.0.0-beta.25 → 4.0.0-beta.26

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.css

@@ -0,0 +1,207 @@
+.gux-focus-ring-focused:focus {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+}
+
+/* Font Definitions. */
+/* From: https://google-webfonts-helper.herokuapp.com */
+/* roboto-300 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url("./fonts/roboto-v20-latin-300.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Light"), local("Roboto-Light"), url("./fonts/roboto-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-300.woff2") format("woff2"), url("./fonts/roboto-v20-latin-300.woff") format("woff"), url("./fonts/roboto-v20-latin-300.ttf") format("truetype"), url("./fonts/roboto-v20-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-regular - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url("./fonts/roboto-v20-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-regular.woff") format("woff"), url("./fonts/roboto-v20-latin-regular.ttf") format("truetype"), url("./fonts/roboto-v20-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-italic - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url("./fonts/roboto-v20-latin-italic.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Italic"), local("Roboto-Italic"), url("./fonts/roboto-v20-latin-italic.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-italic.woff2") format("woff2"), url("./fonts/roboto-v20-latin-italic.woff") format("woff"), url("./fonts/roboto-v20-latin-italic.ttf") format("truetype"), url("./fonts/roboto-v20-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-700 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url("./fonts/roboto-v20-latin-700.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-700.woff") format("woff"), url("./fonts/roboto-v20-latin-700.ttf") format("truetype"), url("./fonts/roboto-v20-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+body {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+/* Headings */
+h1 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 300;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+h2 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 300;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+h3 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+h4,
+h5,
+h6 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: 2px;
+}
+
+a {
+  color: #2a60c8;
+  text-decoration: underline;
+  border-radius: 2px;
+}
+a:hover {
+  color: #2754ac;
+}
+a:active {
+  color: #23478f;
+}
+a:focus-visible {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+table a {
+  color: #2a60c8;
+  text-decoration: underline;
+  border-radius: 2px;
+  text-decoration: none;
+}
+table a:hover {
+  color: #2754ac;
+}
+table a:active {
+  color: #23478f;
+}
+table a:focus-visible {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
+
+/* Custom Styles */
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.gux-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.gux-container slot[name=primary-message] {
+  color: #364154;
+  text-align: center;
+}
+.gux-container slot[name=additional-guidance] {
+  color: #596373;
+  text-align: center;
+}
+.gux-container.gux-small, .gux-container.gux-medium {
+  padding: 8px 0 4px;
+}
+.gux-container.gux-small slot[name=primary-message], .gux-container.gux-medium slot[name=primary-message] {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+}
+.gux-container.gux-small slot[name=additional-guidance], .gux-container.gux-medium slot[name=additional-guidance] {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 16px;
+}
+.gux-container.gux-large {
+  padding: 16px 0 4px;
+}
+.gux-container.gux-large slot[name=primary-message] {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 300;
+  font-size: 24px;
+  line-height: 32px;
+}
+.gux-container.gux-large slot[name=additional-guidance] {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+}

package/dist/collection/components/{beta → stable}/gux-loading-message/gux-loading-message.js

@@ -53,11 +53,11 @@ export class GuxLoadingMessage {
         [`gux-${this.loadingMessageSize}`]: true
       }, role: "alert", "aria-live": "assertive" }, h("slot", { name: "progress" }), h("slot", { name: "primary-message" }), h("slot", { name: "additional-guidance" })));
   }
-  static get is() { return "gux-loading-message-beta"; }
+  static get is() { return "gux-loading-message"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-loading-message.less"]
+      "$": ["gux-loading-message.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/{beta → stable}/gux-skip-navigation-list/gux-skip-navigation-list.css

@@ -6,6 +6,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 :host(:focus-within) {
   position: inherit;
   top: inherit;
@@ -16,6 +17,7 @@
   position: absolute;
   inset: 0;
 }
+
 .gux-container nav {
   width: fit-content;
   margin: 40px auto;
@@ -23,4 +25,4 @@
 .gux-container nav ul {
   padding: 0;
   margin: 0;
-}
+}

package/dist/collection/components/{beta → stable}/gux-skip-navigation-list/gux-skip-navigation-list.js

@@ -13,12 +13,12 @@ export class GuxSkipNavigationList {
   render() {
     return (h("div", { class: "gux-container" }, h("nav", { "aria-label": this.i18n('navigationName') }, h("ul", { role: "list" }, h("slot", null)))));
   }
-  static get is() { return "gux-skip-navigation-list-beta"; }
+  static get is() { return "gux-skip-navigation-list"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-skip-navigation-list.less"]
+      "$": ["gux-skip-navigation-list.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-table-toolbar/gux-table-toolbar-custom-action/gux-table-toolbar-custom-action.css

@@ -1,157 +1,3 @@
-.gux-focus-ring-focused:focus {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-}
-
-/* Font Definitions. */
-/* From: https://google-webfonts-helper.herokuapp.com */
-/* roboto-300 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 300;
-  src: url("./fonts/roboto-v20-latin-300.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Light"), local("Roboto-Light"), url("./fonts/roboto-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-300.woff2") format("woff2"), url("./fonts/roboto-v20-latin-300.woff") format("woff"), url("./fonts/roboto-v20-latin-300.ttf") format("truetype"), url("./fonts/roboto-v20-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-regular - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 400;
-  src: url("./fonts/roboto-v20-latin-regular.eot"); /* IE9 Compat Modes */
-  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-regular.woff") format("woff"), url("./fonts/roboto-v20-latin-regular.ttf") format("truetype"), url("./fonts/roboto-v20-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-italic - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: italic;
-  font-weight: 400;
-  src: url("./fonts/roboto-v20-latin-italic.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Italic"), local("Roboto-Italic"), url("./fonts/roboto-v20-latin-italic.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-italic.woff2") format("woff2"), url("./fonts/roboto-v20-latin-italic.woff") format("woff"), url("./fonts/roboto-v20-latin-italic.ttf") format("truetype"), url("./fonts/roboto-v20-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-700 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 700;
-  src: url("./fonts/roboto-v20-latin-700.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-700.woff") format("woff"), url("./fonts/roboto-v20-latin-700.ttf") format("truetype"), url("./fonts/roboto-v20-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/*
- * Typography styles and mixins.
- */
-/* Helpers */
-/* Base typography */
-body {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-}
-
-/* Headings */
-h1 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
-}
-
-h2 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 18px;
-  line-height: 24px;
-}
-
-h3 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-h4,
-h5,
-h6 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-/* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: 2px;
-}
-
-a {
-  color: #2a60c8;
-  text-decoration: underline;
-  border-radius: 2px;
-}
-a:hover {
-  color: #2754ac;
-}
-a:active {
-  color: #23478f;
-}
-a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-table a {
-  color: #2a60c8;
-  text-decoration: underline;
-  border-radius: 2px;
-  text-decoration: none;
-}
-table a:hover {
-  color: #2754ac;
-}
-table a:active {
-  color: #23478f;
-}
-table a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-/* Custom Styles */
 :host([disabled]),
 button[disabled] {
   pointer-events: none;

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

@@ -3,47 +3,43 @@
   display: inline-block;
 }
 .gux-time-picker.gux-error .gux-input-time {
-  border-color: #ea0b0b;
+  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: 8px;
+  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-time-picker .gux-input-time:focus-within {
-  border-color: #2a60c8;
-  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-time-picker .gux-input-time input {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 20px;
+  width: 2ch;
   padding: 0;
-  font-size: 12px;
-  color: #2e394c;
-  text-align: center;
-  text-align: left;
-  background-color: #f6f7f9;
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
   outline: none;
 }
@@ -51,34 +47,31 @@
   text-align: right;
 }
 .gux-time-picker .gux-input-time input::placeholder {
-  color: #596373;
+  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;
+  grid-template: auto 1fr/auto 1fr auto;
   place-items: flex-end;
   padding: 0;
-  font-size: 12px;
-  font-weight: bold;
-  color: #2e394c;
+  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:not(:disabled):hover {
-  color: #2a60c8;
-  cursor: pointer;
-}
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible {
-  color: #2a60c8;
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-  border-radius: 2px;
+  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;
-  grid-column: 1;
+  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 {
@@ -92,43 +85,37 @@
   justify-content: center;
   order: 0;
   padding: 0;
-  color: #596373;
+  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: #2a60c8;
-  cursor: pointer;
-}
-.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled):hover {
-  color: #2a60c8 !important;
-  cursor: pointer;
-}
-.gux-time-picker .gux-input-time .gux-clock-button:not(:disabled):hover {
-  color: #2e394c;
+  color: #4856cb;
   cursor: pointer;
 }
 .gux-time-picker .gux-input-time .gux-clock-button:focus {
-  border: none;
   outline: none;
 }
-.gux-time-picker .gux-input-time .gux-clock-button:focus-visible gux-icon {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-  border-radius: 2px;
+.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: 16px;
-  height: 16px;
+  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: 8px 0;
+  padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow-y: scroll;
   list-style: none;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
-}
+  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/stable/gux-time-picker/gux-time-picker.js

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