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

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

@@ -2,20 +2,21 @@
   box-sizing: border-box;
   display: block;
   max-height: 20rem;
-  padding: 8px 0;
+  padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow-y: auto;
-  color: #2e394c;
-  background: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  background: 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);
   outline: none;
 }
+
 :host(:focus) {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
+
 .gux-message-container {
   display: flex;
   flex-direction: column;
@@ -23,10 +24,21 @@
   align-content: stretch;
   align-items: center;
   justify-content: center;
+  text-align: center;
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;
   height: 32px;
-  padding: 8px 16px;
-  color: #2e394c;
+  font-family: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);
+  font-weight: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);
+  font-size: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);
+  color: var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor);
 }
+.gux-message-container .gux-no-matches .gux-no-matches-header {
+  font-family: var(--gse-ui-dropdown-menu-emptyState-header-text-fontFamily);
+  font-weight: var(--gse-ui-dropdown-menu-emptyState-header-text-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-emptyState-header-text-lineHeight);
+  font-size: var(--gse-ui-dropdown-menu-emptyState-header-text-fontSize);
+  color: var(--gse-ui-dropdown-menu-emptyState-header-foregroundColor);
+}

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

@@ -2,8 +2,8 @@ import { h, Host } from '@stencil/core';
 import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from './gux-listbox.service';
 import { optionTagSelector } from './options/option-types';
 import { buildI18nForComponent } from '../../../i18n';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
+import simulateNativeEvent from '@utils/dom/simulate-native-event';
 import { trackComponent } from '@utils/tracking/usage';
 import translationResources from './i18n/en.json';
 /**
@@ -144,7 +144,10 @@ export class GuxListbox {
   }
   renderAllListboxOptionsFiltered() {
     return [
-      h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
+      h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || [
+        h("div", { class: "gux-no-matches-header" }, this.i18n('noMatchesHeader')),
+        h("div", null, this.i18n('noMatchesMessage'))
+      ])),
       this.renderHiddenSlot()
     ];
   }
@@ -161,7 +164,7 @@ export class GuxListbox {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-listbox.less"]
+      "$": ["gux-listbox.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.css

@@ -1,30 +1,51 @@
-gux-option {
+:host {
   box-sizing: border-box;
   display: flex;
-  height: 32px;
-  padding: 6px 8px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  gap: var(--gse-ui-menu-option-gap);
 }
-gux-option.gux-disabled {
+:host .gux-slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(.gux-disabled) {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
-}
-gux-option.gux-selected {
-  background: #deeaff;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
-gux-option.gux-active,
-gux-option.gux-hovered:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+
+:host(.gux-selected) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
-gux-option.gux-filtered {
-  display: none;
+
+:host(.gux-active) {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
-gux-option .gux-slot-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+:host(.gux-hovered:not(:disabled)) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
+
+:host(.gux-filtered) {
+  display: none;
+}

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 /**
  * @slot - text
  */
@@ -46,9 +46,10 @@ export class GuxOption {
       }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
   static get is() { return "gux-option"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-option.less"]
+      "$": ["gux-option.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.css

@@ -1,38 +1,57 @@
-gux-option-icon {
+:host {
   box-sizing: border-box;
   display: flex;
-  height: 32px;
-  padding: 6px 8px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
-  align-items: flex-start;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  gap: var(--gse-ui-menu-option-gap);
 }
-gux-option-icon.gux-disabled {
+:host .gux-slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(.gux-disabled) {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
-gux-option-icon.gux-selected {
-  background: #deeaff;
+
+:host(.gux-selected) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
-gux-option-icon.gux-active,
-gux-option-icon.gux-hovered:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+
+:host(.gux-active) {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
-gux-option-icon.gux-filtered {
-  display: none;
+
+:host(.gux-hovered:not(:disabled)) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
-gux-option-icon .gux-slot-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+:host(.gux-filtered) {
+  display: none;
 }
-gux-option-icon gux-icon {
+
+:host gux-icon {
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  margin-block-start: calc((20px - 16px) / 2);
-  margin-inline-end: 8px;
-}
+  width: var(--gse-ui-menu-option-startIcon-width);
+  height: var(--gse-ui-menu-option-startIcon-height);
+}

package/dist/collection/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 /**
  * @slot - text
  */
@@ -55,9 +55,10 @@ export class GuxOptionIcon {
       }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-icon", { decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
   static get is() { return "gux-option-icon"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-option-icon.less"]
+      "$": ["gux-option-icon.scss"]
     };
   }
   static get styleUrls() {

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/stable/gux-pagination-cursor/gux-pagination-cursor.js

@@ -101,7 +101,7 @@ export class GuxPaginationCursor {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../gux-pagination/gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types"
             }
           }
         },

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