npm - genesys-spark-components - Versions diffs - 4.0.0-beta.27 → 4.0.0-beta.28 - Mend

genesys-spark-components 4.0.0-beta.27 → 4.0.0-beta.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (306) hide show

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.js CHANGED Viewed

@@ -1,57 +1,16 @@
-import { h, readTask } from '@stencil/core';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { h } from '@stencil/core';
 import { trackComponent } from '@utils/tracking/usage';
-import * as loadingMessageWidth from './gux-loading-message-constants';
 /**
  * @slot progress - Required slot for progress.
  * @slot primary-guidance - Required slot for primary guidance.
  * @slot additional-guidance - Slot for additional guidance.
  */
 export class GuxLoadingMessage {
-  constructor() {
-    this.hasAdditionalGuidance = undefined;
-    this.loadingMessageSize = undefined;
-  }
-  updateLoadingMessageSize() {
-    readTask(() => {
-      const containerWidth = this.root.clientWidth;
-      if (containerWidth <= loadingMessageWidth.SMALL_LOADING_MESSAGE) {
-        this.loadingMessageSize = 'small';
-      }
-      else if (containerWidth <= loadingMessageWidth.MEDIUM_LOADING_MESSAGE) {
-        this.loadingMessageSize = 'medium';
-      }
-      else {
-        this.loadingMessageSize = 'large';
-      }
-    });
-  }
   componentWillLoad() {
     trackComponent(this.root);
   }
-  componentDidLoad() {
-    if (!this.resizeObserver && window.ResizeObserver) {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateLoadingMessageSize();
-      });
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.observe(this.root);
-    }
-    afterNextRenderTimeout(() => {
-      this.updateLoadingMessageSize();
-    }, 500);
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver) {
-      this.resizeObserver.unobserve(this.root);
-    }
-  }
   render() {
-    return (h("div", { class: {
-        'gux-container': true,
-        [`gux-${this.loadingMessageSize}`]: true
-      }, role: "alert", "aria-live": "assertive" }, h("slot", { name: "progress" }), h("slot", { name: "primary-message" }), h("slot", { name: "additional-guidance" })));
+    return (h("div", { class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { class: "gux-progress" }, h("slot", { name: "progress" })), h("div", { class: "gux-primary-message" }, h("slot", { name: "primary-message" })), h("div", { class: "gux-additional-guidance" }, h("slot", { name: "additional-guidance" }))));
   }
   static get is() { return "gux-loading-message"; }
   static get encapsulation() { return "shadow"; }
@@ -65,11 +24,5 @@ export class GuxLoadingMessage {
       "$": ["gux-loading-message.css"]
     };
   }
-  static get states() {
-    return {
-      "hasAdditionalGuidance": {},
-      "loadingMessageSize": {}
-    };
-  }
   static get elementRef() { return "root"; }
 }

package/dist/collection/components/stable/gux-switch/gux-switch-item/gux-switch-item.css CHANGED Viewed

@@ -1,34 +1,40 @@
 .gux-focus-ring-focused:focus {
-  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-focus-ring-focused-within:focus-within {
-  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-focus-ring-focused-visible:focus-visible {
-  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-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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);
 }
 /* Font Definitions. */
@@ -113,42 +119,50 @@ h6 {
 /* Anchor */
 .gux-icon-anchor gux-icon {
-  padding-right: 2px;
+  padding-right: var(--gse-ui-links-inLine-padding);
 }
 a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
 }
 a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 a:focus-visible {
-  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);
 }
 table a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
   text-decoration: none;
 }
 table a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 table a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+table a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 table a:focus-visible {
-  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);
 }
 /* Custom Styles */

package/dist/collection/components/stable/gux-table/gux-table-select-menu/gux-table-select-menu.css CHANGED Viewed

@@ -1,34 +1,40 @@
 .gux-focus-ring-focused:focus {
-  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-focus-ring-focused-within:focus-within {
-  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-focus-ring-focused-visible:focus-visible {
-  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-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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-table-select-menu {

package/dist/collection/components/stable/gux-table/gux-table.css CHANGED Viewed

@@ -1,34 +1,40 @@
 .gux-focus-ring-focused:focus {
-  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-focus-ring-focused-within:focus-within {
-  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-focus-ring-focused-visible:focus-visible {
-  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-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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);
 }
 /* Font Definitions. */
@@ -113,42 +119,50 @@ h6 {
 /* Anchor */
 .gux-icon-anchor gux-icon {
-  padding-right: 2px;
+  padding-right: var(--gse-ui-links-inLine-padding);
 }
 a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
 }
 a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 a:focus-visible {
-  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);
 }
 table a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
   text-decoration: none;
 }
 table a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 table a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+table a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 table a:focus-visible {
-  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);
 }
 /* Custom Styles */

package/dist/collection/components/stable/gux-tabs/gux-tab-panel/gux-tab-panel.css CHANGED Viewed

@@ -1,34 +1,40 @@
 .gux-focus-ring-focused:focus {
-  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-focus-ring-focused-within:focus-within {
-  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-focus-ring-focused-visible:focus-visible {
-  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-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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);
 }
 :host {
@@ -45,7 +51,8 @@
 }
 :host(:focus-visible) {
-  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);
 }

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

@@ -1,34 +1,40 @@
 .gux-focus-ring-focused:focus {
-  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-focus-ring-focused-within:focus-within {
-  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-focus-ring-focused-visible:focus-visible {
-  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-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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 {
@@ -54,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;

package/dist/component-specs.json CHANGED Viewed

@@ -1185,8 +1185,7 @@
         "tertiary"
       ],
       "disabled": "checkbox",
-      "is-open": "checkbox",
-      "text": "text"
+      "is-open": "checkbox"
     },
     "events": {
       "close": "Triggered when the menu is close",

package/dist/deploy-info.json CHANGED Viewed

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "4.0.0-beta.27",
+  "version": "4.0.0-beta.28",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "27",
-  "buildDate": "2023-09-19T04:11:51.012588Z"
+  "build": "28",
+  "buildDate": "2023-09-20T04:18:55.566139Z"
 }