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

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.css

@@ -1,10 +1,65 @@
+.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);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
   min-width: 0;
   padding: 0;
-  margin: var(--gux-form-field-fieldset-container-margin-top, 16px) 0 var(--gux-form-field-fieldset-container-margin-bottom, 16px) 0;
+  margin: 0;
   border: none;
 }
+
 .gux-form-field-error {
   display: none;
   flex-direction: row;
@@ -12,10 +67,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  line-height: 20px;
-  color: #2e394c;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error.gux-show {
   display: flex;
@@ -24,23 +80,20 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  min-width: 16px;
-  min-height: 16px;
-  margin: 2px 4px 0 0;
-  color: #ea0b0b;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-formControl-helper-gap);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
-.gux-form-field-legend-label {
-  padding: 0;
-}
+
 .gux-form-field-legend-label.gux-required::after {
-  font-size: 12px;
-  color: #ea0b0b;
-  content: ' *';
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+  content: " *";
 }
 .gux-form-field-legend-label.gux-beside {
   position: relative;
@@ -48,10 +101,10 @@
   float: left;
   width: fit-content;
   min-width: 45px;
-  margin-right: 8px;
+  margin-right: var(--gse-ui-formControl-label-gap);
 }
 .gux-form-field-legend-label.gux-above {
-  margin-bottom: 8px;
+  padding: var(--gse-ui-formControl-label-padding);
 }
 .gux-form-field-legend-label.gux-screenreader {
   position: absolute;
@@ -61,6 +114,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -68,11 +122,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-  color: #6b7585;
+  padding: var(--gse-ui-formControl-helper-padding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
 }
 .gux-form-field-help.gux-show {
   display: flex;
@@ -82,21 +136,23 @@
   align-self: none;
   order: 0;
 }
+
 :host {
   display: block;
-  color: #2e394c;
 }
+
 ::slotted(label) {
-  font-family: sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 16px;
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  color: var(--gse-ui-formControl-label-labelColor);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
 }
+
 .gux-input-and-error-container {
   flex-grow: 1;
 }
 .gux-input-and-error-container .gux-input.gux-disabled {
   pointer-events: none;
-  opacity: 0.5;
-}
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.js

@@ -108,7 +108,7 @@ export class GuxFormFieldDropdown {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-form-field-dropdown.less"]
+      "$": ["gux-form-field-dropdown.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,10 +1,65 @@
+.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);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
   min-width: 0;
   padding: 0;
-  margin: var(--gux-form-field-fieldset-container-margin-top, 16px) 0 var(--gux-form-field-fieldset-container-margin-bottom, 16px) 0;
+  margin: 0;
   border: none;
 }
+
 .gux-form-field-error {
   display: none;
   flex-direction: row;
@@ -12,10 +67,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  line-height: 20px;
-  color: #2e394c;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error.gux-show {
   display: flex;
@@ -24,23 +80,20 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  min-width: 16px;
-  min-height: 16px;
-  margin: 2px 4px 0 0;
-  color: #ea0b0b;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-formControl-helper-gap);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
-.gux-form-field-legend-label {
-  padding: 0;
-}
+
 .gux-form-field-legend-label.gux-required::after {
-  font-size: 12px;
-  color: #ea0b0b;
-  content: ' *';
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+  content: " *";
 }
 .gux-form-field-legend-label.gux-beside {
   position: relative;
@@ -48,10 +101,10 @@
   float: left;
   width: fit-content;
   min-width: 45px;
-  margin-right: 8px;
+  margin-right: var(--gse-ui-formControl-label-gap);
 }
 .gux-form-field-legend-label.gux-above {
-  margin-bottom: 8px;
+  padding: var(--gse-ui-formControl-label-padding);
 }
 .gux-form-field-legend-label.gux-screenreader {
   position: absolute;
@@ -61,6 +114,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -68,11 +122,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-  color: #6b7585;
+  padding: var(--gse-ui-formControl-helper-padding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
 }
 .gux-form-field-help.gux-show {
   display: flex;
@@ -82,13 +136,15 @@
   align-self: none;
   order: 0;
 }
+
 ::slotted(label) {
-  font-family: sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 16px;
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  color: var(--gse-ui-formControl-label-labelColor);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
 }
+
 .gux-input-and-error-container {
   flex-grow: 1;
-}
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-picker.js

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

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.css

@@ -1,29 +1,66 @@
+.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);
+}
+
 button {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  padding: 2px;
-  color: #596373;
+  color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
   background: transparent;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
-button:not(:disabled):focus-visible,
-button:not(:disabled):hover {
-  color: #2e394c;
+button:not(:disabled):focus-visible, button:not(:disabled):hover {
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
   cursor: pointer;
 }
 button gux-icon {
-  width: 12px;
-  height: 12px;
-  margin: 4px;
-  border-radius: 4px;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-formControl-input-gap);
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 button:focus {
   outline: none;
 }
 button:focus-visible:enabled gux-icon {
-  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);
+}

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.js

@@ -15,7 +15,7 @@ export class Gux {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-form-field-input-clear-button.less"]
+      "$": ["gux-form-field-input-clear-button.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core';
 import { autoUpdate, computePosition, flip, offset, size, shift, hide } from '@floating-ui/dom';
-import { hasParentElement } from '@utils/dom/has-parent-element';
 /**
  * @slot target - Required slot for target
  * @slot popup - Required slot for popup
@@ -9,6 +8,7 @@ export class GuxPopup {
   constructor() {
     this.expanded = false;
     this.disabled = false;
+    this.exceedTargetWidth = false;
   }
   runUpdatePosition() {
     this.cleanupUpdatePosition = autoUpdate(this.targetElementContainer, this.popupElementContainer, () => this.updatePosition(), {
@@ -21,7 +21,7 @@ export class GuxPopup {
   updatePosition() {
     if (this.targetElementContainer && this.popupElementContainer) {
       const popupElementContainer = this.popupElementContainer;
-      const root = this.root;
+      const exceedTargetWidth = this.exceedTargetWidth;
       void computePosition(this.targetElementContainer, this.popupElementContainer, {
         strategy: 'fixed',
         placement: 'bottom-start',
@@ -30,7 +30,7 @@ export class GuxPopup {
           flip(),
           size({
             apply({ rects }) {
-              if (hasParentElement('gux-action-button, gux-button-multi', root)) {
+              if (exceedTargetWidth) {
                 Object.assign(popupElementContainer.style, {
                   minWidth: `${rects.reference.width}px`
                 });
@@ -141,6 +141,24 @@ export class GuxPopup {
         "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "exceedTargetWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "set if parent component design allows for popup exceeding target width"
+        },
+        "attribute": "exceed-target-width",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -177,7 +195,6 @@ export class GuxPopup {
         }
       }];
   }
-  static get elementRef() { return "root"; }
   static get watchers() {
     return [{
         "propName": "expanded",

package/dist/component-specs.json

@@ -181,17 +181,6 @@
       "guxsortchanged": "Triggers when the sorting of the table column is changed."
     }
   },
-  "gux-switch": {
-    "beta": false,
-    "attributes": {
-      "layout": [
-        "default",
-        "small"
-      ],
-      "value": "text"
-    },
-    "events": []
-  },
   "gux-skip-navigation-list": {
     "beta": false,
     "attributes": [],
@@ -1031,6 +1020,11 @@
     "attributes": [],
     "events": []
   },
+  "gux-flyout-menu": {
+    "beta": false,
+    "attributes": [],
+    "events": []
+  },
   "gux-dropdown-multi": {
     "beta": false,
     "attributes": {
@@ -1125,6 +1119,7 @@
   "gux-context-menu": {
     "beta": false,
     "attributes": {
+      "compact": "checkbox",
       "disabled": "checkbox",
       "screenreader-text": "text"
     },
@@ -1287,7 +1282,6 @@
       ],
       "disabled": "checkbox",
       "is-open": "checkbox",
-      "text": "text",
       "type": [
         "button",
         "reset",
@@ -1307,6 +1301,17 @@
     },
     "events": []
   },
+  "gux-switch-legacy": {
+    "beta": false,
+    "attributes": {
+      "layout": [
+        "default",
+        "small"
+      ],
+      "value": "text"
+    },
+    "events": []
+  },
   "gux-simple-toast-legacy": {
     "beta": false,
     "attributes": {
@@ -1403,6 +1408,13 @@
     "attributes": [],
     "events": []
   },
+  "gux-segmented-control": {
+    "beta": true,
+    "attributes": {
+      "value": "text"
+    },
+    "events": []
+  },
   "gux-screen-reader": {
     "beta": true,
     "attributes": [],
@@ -1690,11 +1702,6 @@
     },
     "events": []
   },
-  "gux-flyout-menu": {
-    "beta": true,
-    "attributes": [],
-    "events": []
-  },
   "gux-date-time": {
     "beta": true,
     "attributes": [],

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "4.0.0-beta.30",
+  "version": "4.0.0-beta.32",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "30",
-  "buildDate": "2023-09-22T04:18:57.369724Z"
+  "build": "34",
+  "buildDate": "2023-09-26T04:14:31.315145Z"
 }