genesys-spark-components 3.24.2 → 3.26.1

package/dist/cjs/{usage-tracking-f514d954.js → usage-tracking-202d8fb5.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "3.24.2";
+const version = "3.26.1";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";
@@ -152,67 +152,6 @@ const commitlint = {
 		]
 	}
 };
-const stylelint = {
-	"extends": [
-		"stylelint-config-standard",
-		"stylelint-config-recess-order",
-		"stylelint-config-prettier",
-		"postcss-less",
-		"postcss-html"
-	],
-	overrides: [
-		{
-			files: [
-				"**/*.less"
-			],
-			customSyntax: "postcss-less"
-		},
-		{
-			files: [
-				"**/*.html"
-			],
-			customSyntax: "postcss-html"
-		}
-	],
-	rules: {
-		"no-descending-specificity": null,
-		"no-duplicate-selectors": null,
-		"value-no-vendor-prefix": null,
-		"property-no-vendor-prefix": null,
-		"selector-type-no-unknown": [
-			true,
-			{
-				ignoreTypes: [
-					"/^gux-/",
-					"lineargradient"
-				]
-			}
-		],
-		"function-no-unknown": [
-			true,
-			{
-				ignoreFunctions: [
-					"fade",
-					"lighten",
-					"darken",
-					"e",
-					"%"
-				]
-			}
-		],
-		"declaration-block-no-redundant-longhand-properties": [
-			true,
-			{
-				ignoreShorthands: [
-					"flex-flow",
-					"grid-column",
-					"grid-row",
-					"grid-area"
-				]
-			}
-		]
-	}
-};
 const volta = {
 	node: "14.19.1"
 };
@@ -230,7 +169,6 @@ const packageInfo = {
 	devDependencies: devDependencies,
 	config: config,
 	commitlint: commitlint,
-	stylelint: stylelint,
 	"lint-staged": {
 	"*.{css,html,less}": [
 		"stylelint --fix",

package/dist/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
     "./components/beta/gux-badge/gux-badge.js",
+    "./components/beta/gux-blank-state/gux-blank-state.js",
     "./components/beta/gux-button-slot/gux-button-slot.js",
     "./components/beta/gux-card/gux-card.js",
     "./components/beta/gux-chart-column/gux-chart-column.js",

package/dist/collection/components/beta/gux-blank-state/gux-blank-state-constants.js

@@ -0,0 +1,5 @@
+/**
+ * Below are the max-widths for the blank state component.
+ */
+export const SMALL_STATE = 160;
+export const MEDIUM_STATE = 300;

package/dist/collection/components/beta/gux-blank-state/gux-blank-state.css

@@ -0,0 +1,61 @@
+: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 ::slotted(gux-icon) {
+  width: 48px;
+  height: 48px;
+  color: #c8cfda;
+}
+.gux-container slot[name='primary-message'] {
+  color: #364154;
+  text-align: center;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+}
+.gux-container slot[name='additional-guidance'] {
+  color: #364154;
+  text-align: center;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 16px;
+}
+.gux-container.gux-small .gux-message-container,
+.gux-container.gux-medium .gux-message-container {
+  padding: 8px 0 4px;
+}
+.gux-container.gux-small .gux-guidance-container,
+.gux-container.gux-medium .gux-guidance-container {
+  padding-bottom: 8px;
+}
+.gux-container.gux-large .gux-message-container {
+  padding: 16px 0 4px;
+}
+.gux-container.gux-large .gux-message-container 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 .gux-guidance-container {
+  padding-bottom: 16px;
+}
+.gux-container.gux-large .gux-guidance-container slot[name='additional-guidance'] {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+}

package/dist/collection/components/beta/gux-blank-state/gux-blank-state.js

@@ -0,0 +1,69 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, h, State, readTask } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+import { OnResize } from '../../../utils/decorator/on-resize';
+import * as blankStateWidth from './gux-blank-state-constants';
+/**
+ * @slot primary-message - Required slot for primary-message.
+ * @slot image - Slot for gux-icon element.
+ * @slot additional-guidance - Slot for additional-guidance.
+ * @slot call-to-action - Slot for the message call to action button.
+ */
+export class GuxBlankState {
+  onResize() {
+    this.setBlankStateSize();
+  }
+  componentWillLoad() {
+    trackComponent(this.root);
+  }
+  componentDidLoad() {
+    this.setBlankStateSize();
+  }
+  setBlankStateSize() {
+    readTask(() => {
+      const containerWidth = this.root.clientWidth;
+      if (containerWidth <= blankStateWidth.SMALL_STATE) {
+        this.blankStateSize = 'small';
+      }
+      else if (containerWidth <= blankStateWidth.MEDIUM_STATE) {
+        this.blankStateSize = 'medium';
+      }
+      else {
+        this.blankStateSize = 'large';
+      }
+    });
+  }
+  render() {
+    return (h("div", { class: {
+        'gux-container': true,
+        [`gux-${this.blankStateSize}`]: true
+      } },
+      h("slot", { name: "image" }),
+      h("div", { class: "gux-message-container" },
+        h("slot", { name: "primary-message" })),
+      h("div", { class: "gux-guidance-container" },
+        h("slot", { name: "additional-guidance" })),
+      h("gux-button-slot-beta", { accent: "primary" },
+        h("slot", { name: "call-to-action" }))));
+  }
+  static get is() { return "gux-blank-state-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-blank-state.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-blank-state.css"]
+  }; }
+  static get states() { return {
+    "blankStateSize": {}
+  }; }
+  static get elementRef() { return "root"; }
+}
+__decorate([
+  OnResize()
+], GuxBlankState.prototype, "onResize", null);

package/dist/collection/components/beta/gux-blank-state/gux-blank-state.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/beta/gux-button-slot/gux-button-slot.js

@@ -9,8 +9,12 @@ export class GuxButtonSlot {
     this.accent = 'secondary';
   }
   validateSlotContent() {
-    const slottedElement = this.root.children[0];
-    const slottedTagName = slottedElement.tagName;
+    let slottedElement = this.root.children[0];
+    let slottedTagName = slottedElement.tagName;
+    if (slottedTagName === 'SLOT') {
+      slottedElement = slottedElement.assignedNodes()[0];
+      slottedTagName = slottedElement.tagName;
+    }
     if (slottedTagName === 'BUTTON') {
       return;
     }

package/dist/collection/components/beta/gux-dropdown-multi/gux-dropdown-multi.css

@@ -9,6 +9,10 @@ gux-dropdown-multi-tag {
   right: 32px;
   bottom: 4px;
 }
+.gux-error.gux-target-container-collapsed .gux-field-button,
+.gux-error.gux-target-container-expanded {
+  border-color: #ea0b0b;
+}
 .gux-field,
 .gux-target-container-expanded {
   all: unset;

package/dist/collection/components/beta/gux-dropdown-multi/gux-dropdown-multi.js

@@ -19,6 +19,7 @@ export class GuxDropdownMulti {
     this.disabled = false;
     this.required = false;
     this.filterable = false;
+    this.hasError = false;
     this.expanded = false;
     this.filter = '';
   }
@@ -258,7 +259,8 @@ export class GuxDropdownMulti {
     return (h("div", { class: {
         'gux-target-container': true,
         'gux-target-container-expanded': this.expanded && this.filterable,
-        'gux-target-container-collapsed': !(this.expanded && this.filterable)
+        'gux-target-container-collapsed': !(this.expanded && this.filterable),
+        'gux-error': this.hasError
       }, slot: "target" },
       this.renderFilterInputField(),
       h("button", { type: "button", class: "gux-field gux-field-button", disabled: this.disabled, onClick: this.fieldButtonClick.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() },
@@ -377,6 +379,24 @@ export class GuxDropdownMulti {
       "attribute": "filterable",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "hasError": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "has-error",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -20,6 +20,10 @@
   cursor: pointer;
   background-color: #f6f7f9;
 }
+.gux-error.gux-target-container-collapsed .gux-field-button,
+.gux-error.gux-target-container-expanded {
+  border-color: #ea0b0b;
+}
 .gux-field.gux-input-field {
   height: 30px;
 }

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

@@ -21,6 +21,7 @@ export class GuxDropdown {
     this.disabled = false;
     this.required = false;
     this.filterable = false;
+    this.hasError = false;
     this.expanded = false;
     this.filter = '';
   }
@@ -226,7 +227,8 @@ export class GuxDropdown {
   renderTarget() {
     return (h("div", { class: {
         'gux-target-container-expanded': this.expanded && this.filterable,
-        'gux-target-container-collapsed': !(this.expanded && this.filterable)
+        'gux-target-container-collapsed': !(this.expanded && this.filterable),
+        'gux-error': this.hasError
       }, slot: "target" },
       this.renderFilterInputField(),
       h("button", { type: "button", class: "gux-field gux-field-button", disabled: calculateInputDisabledState(this.root), onClick: this.fieldButtonClick.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() },
@@ -341,6 +343,24 @@ export class GuxDropdown {
       "attribute": "filterable",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "hasError": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "has-error",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -31,7 +31,7 @@
   color: #2e394c;
 }
 :host(.gux-input-error) ::slotted(input[type='checkbox']:not(:checked))::before {
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.138 2.467a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h7m0-1h-7a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3z' fill='%23ea0b0b' /%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%23ea0b0b'/%3E%3C/svg%3E");
 }
 :host(.gux-disabled) {
   cursor: not-allowed;
@@ -76,16 +76,16 @@
   box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
 }
 ::slotted(input[type='checkbox']:not(:checked))::before {
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.138 2.467a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h7m0-1h-7a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3z' fill='%2377828f' /%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%2377828f'/%3E%3C/svg%3E");
 }
 ::slotted(input[type='checkbox']:not(:checked):not(:disabled):not(:indeterminate):hover)::before {
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.138 2.467a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h7m0-1h-7a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3z' fill='%232a60c8' /%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%232a60c8'/%3E%3C/svg%3E");
 }
 ::slotted(input[type='checkbox']:checked)::before {
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.138 1.467h-7a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3zM6.8 11 3.638 7.941l.89-.932L6.8 9.2l3.947-3.861.891.932z' fill='%232a60c8' /%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.69231 0H12.3077C13.287 0 14.2261 0.38901 14.9185 1.08145C15.611 1.77389 16 2.71305 16 3.69231V12.3077C16 13.287 15.611 14.2261 14.9185 14.9185C14.2261 15.611 13.287 16 12.3077 16H3.69231C2.71305 16 1.77389 15.611 1.08145 14.9185C0.38901 14.2261 0 13.287 0 12.3077V3.69231C0 2.71305 0.38901 1.77389 1.08145 1.08145C1.77389 0.38901 2.71305 0 3.69231 0ZM5.62483 11.5936C5.79089 11.7597 6.00122 11.8372 6.21155 11.8372C6.43295 11.8372 6.64329 11.7486 6.79827 11.5936L13.2854 5.10652C13.6064 4.78549 13.6064 4.25412 13.2854 3.93308C12.9643 3.61205 12.433 3.61205 12.1119 3.93308L6.21155 9.83348L3.87575 7.4866C3.55472 7.16557 3.02335 7.16557 2.70231 7.4866C2.38128 7.80764 2.38128 8.339 2.70231 8.66004L5.62483 11.5936Z' fill='%232a60c8'/%3E%3C/svg%3E");
 }
 ::slotted(input[type='checkbox']:indeterminate)::before {
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.138 8.467h7v-1h-7zm7-7h-7a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3zm2 10a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2z' fill='%232a60c8' /%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.69231 1.84615H12.3077C13.3273 1.84615 14.1538 2.67271 14.1538 3.69231V12.3077C14.1538 13.3273 13.3273 14.1538 12.3077 14.1538H3.69231C2.67271 14.1538 1.84615 13.3273 1.84615 12.3077V3.69231C1.84615 2.67271 2.67271 1.84615 3.69231 1.84615ZM0 3.69231C0 1.6531 1.6531 0 3.69231 0H12.3077C14.3469 0 16 1.6531 16 3.69231V12.3077C16 14.3469 14.3469 16 12.3077 16H3.69231C1.6531 16 0 14.3469 0 12.3077V3.69231ZM4.00028 9.2308H12.0003C12.5049 9.2308 12.9234 8.81234 12.9234 8.30773C12.9234 7.80311 12.5049 7.38465 12.0003 7.38465H4.00028C3.49567 7.38465 3.07721 7.80311 3.07721 8.30773C3.07721 8.81234 3.49567 9.2308 4.00028 9.2308Z' fill='%232a60c8'/%3E%3C/svg%3E");
 }
 ::slotted(input[type='checkbox']:disabled)::before {
   cursor: not-allowed;

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

@@ -1,5 +1,5 @@
 .gux-form-field-container {
-  margin: 16px 0;
+  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
 }
 .gux-form-field-container.gux-beside {
   display: flex;

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

@@ -1,5 +1,5 @@
 .gux-form-field-container {
-  margin: 16px 0;
+  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
 }
 .gux-form-field-container.gux-beside {
   display: flex;
@@ -74,6 +74,3 @@
   pointer-events: none;
   opacity: 0.5;
 }
-.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
-  border-color: #ea0b0b;
-}

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Element, h, Prop, State } from '@stencil/core';
+import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
 import { calculateInputDisabledState } from '../../../../../utils/dom/calculate-input-disabled-state';
 import { onInputDisabledStateChange } from '../../../../../utils/dom/on-input-disabled-state-change';
 import { OnMutation } from '../../../../../utils/decorator/on-mutation';
@@ -24,6 +24,13 @@ export class GuxFormFieldDropdown {
     this.computedLabelPosition = 'above';
     this.hasError = false;
   }
+  watchValue(hasError) {
+    const dropdownSlot = this.root.querySelector('gux-dropdown') ||
+      this.root.querySelector('gux-dropdown-multi-beta');
+    if (dropdownSlot) {
+      dropdownSlot.hasError = hasError;
+    }
+  }
   onMutation() {
     this.hasError = hasErrorSlot(this.root);
   }
@@ -118,6 +125,10 @@ export class GuxFormFieldDropdown {
     "hasError": {}
   }; }
   static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "hasError",
+      "methodName": "watchValue"
+    }]; }
 }
 __decorate([
   OnMutation({ childList: true, subtree: true })

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

@@ -1,5 +1,5 @@
 .gux-form-field-container {
-  margin: 16px 0;
+  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
 }
 .gux-form-field-container.gux-beside {
   display: flex;

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

@@ -71,8 +71,6 @@
 ::slotted(input[type='radio']:focus-within)::before {
   outline: none;
   box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
-  margin: -1px;
-  box-shadow: 0 0 0 1px #fdfdfd inset, 0 0 0 4px #aac9ff inset;
 }
 ::slotted(input[type='radio']:not(:checked))::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.062C5.239 3.062 3 5.273 3 8s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill-rule='evenodd' clip-rule='evenodd' fill='%2377828f'/%3E%3C/svg%3E");

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

@@ -1,5 +1,5 @@
 .gux-form-field-container {
-  margin: 16px 0;
+  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
 }
 .gux-form-field-container.gux-beside {
   display: flex;

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

@@ -1,5 +1,5 @@
 .gux-form-field-container {
-  margin: 16px 0;
+  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
 }
 .gux-form-field-container.gux-beside {
   display: flex;

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

@@ -1,5 +1,5 @@
 .gux-form-field-container {
-  margin: 16px 0;
+  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
 }
 .gux-form-field-container.gux-beside {
   display: flex;

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

@@ -1,5 +1,5 @@
 .gux-form-field-container {
-  margin: 16px 0;
+  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
 }
 .gux-form-field-container.gux-beside {
   display: flex;

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

@@ -1,5 +1,5 @@
 .gux-form-field-container {
-  margin: 16px 0;
+  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
 }
 .gux-form-field-container.gux-beside {
   display: flex;

package/dist/collection/components/stable/gux-icon/icons/checkbox-active.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z"/></svg>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.69231 0H12.3077C13.287 0 14.2261 0.38901 14.9185 1.08145C15.611 1.77389 16 2.71305 16 3.69231V12.3077C16 13.287 15.611 14.2261 14.9185 14.9185C14.2261 15.611 13.287 16 12.3077 16H3.69231C2.71305 16 1.77389 15.611 1.08145 14.9185C0.38901 14.2261 0 13.287 0 12.3077V3.69231C0 2.71305 0.38901 1.77389 1.08145 1.08145C1.77389 0.38901 2.71305 0 3.69231 0ZM5.62483 11.5936C5.79089 11.7597 6.00122 11.8372 6.21155 11.8372C6.43295 11.8372 6.64329 11.7486 6.79827 11.5936L13.2854 5.10652C13.6064 4.78549 13.6064 4.25412 13.2854 3.93308C12.9643 3.61205 12.433 3.61205 12.1119 3.93308L6.21155 9.83348L3.87575 7.4866C3.55472 7.16557 3.02335 7.16557 2.70231 7.4866C2.38128 7.80764 2.38128 8.339 2.70231 8.66004L5.62483 11.5936Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/checkbox-partial.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 2.5H11C11.8284 2.5 12.5 3.17157 12.5 4V11C12.5 11.8284 11.8284 12.5 11 12.5H4C3.17157 12.5 2.5 11.8284 2.5 11V4C2.5 3.17157 3.17157 2.5 4 2.5ZM1 4C1 2.34315 2.34315 1 4 1H11C12.6569 1 14 2.34315 14 4V11C14 12.6569 12.6569 14 11 14H4C2.34315 14 1 12.6569 1 11V4ZM4.25 8.5H10.75C11.16 8.5 11.5 8.16 11.5 7.75C11.5 7.34 11.16 7 10.75 7H4.25C3.84 7 3.5 7.34 3.5 7.75C3.5 8.16 3.84 8.5 4.25 8.5Z"/></svg>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.69231 1.84615H12.3077C13.3273 1.84615 14.1538 2.67271 14.1538 3.69231V12.3077C14.1538 13.3273 13.3273 14.1538 12.3077 14.1538H3.69231C2.67271 14.1538 1.84615 13.3273 1.84615 12.3077V3.69231C1.84615 2.67271 2.67271 1.84615 3.69231 1.84615ZM0 3.69231C0 1.6531 1.6531 0 3.69231 0H12.3077C14.3469 0 16 1.6531 16 3.69231V12.3077C16 14.3469 14.3469 16 12.3077 16H3.69231C1.6531 16 0 14.3469 0 12.3077V3.69231ZM4.00028 9.2308H12.0003C12.5049 9.2308 12.9234 8.81234 12.9234 8.30773C12.9234 7.80311 12.5049 7.38465 12.0003 7.38465H4.00028C3.49567 7.38465 3.07721 7.80311 3.07721 8.30773C3.07721 8.81234 3.49567 9.2308 4.00028 9.2308Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/checkbox.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z"/></svg>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/radio-active.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.25C4.55 14.25 1.75 11.45 1.75 8C1.75 4.55 4.55 1.75 8 1.75C11.45 1.75 14.25 4.55 14.25 8C14.25 11.45 11.45 14.25 8 14.25ZM8 3.25C5.38 3.25 3.25 5.38 3.25 8C3.25 10.62 5.38 12.75 8 12.75C10.62 12.75 12.75 10.62 12.75 8C12.75 5.38 10.62 3.25 8 3.25Z"/><path d="M8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z"/></svg>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 16C3.584 16 0 12.416 0 8C0 3.584 3.584 0 8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16ZM8 1.92C4.6464 1.92 1.92 4.6464 1.92 8C1.92 11.3536 4.6464 14.08 8 14.08C11.3536 14.08 14.08 11.3536 14.08 8C14.08 4.6464 11.3536 1.92 8 1.92Z"/><path d="M8 11.84C10.1208 11.84 11.84 10.1208 11.84 8C11.84 5.87923 10.1208 4.16 8 4.16C5.87923 4.16 4.16 5.87923 4.16 8C4.16 10.1208 5.87923 11.84 8 11.84Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/radio.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.25C4.55 14.25 1.75 11.45 1.75 8C1.75 4.55 4.55 1.75 8 1.75C11.45 1.75 14.25 4.55 14.25 8C14.25 11.45 11.45 14.25 8 14.25ZM8 3.25C5.38 3.25 3.25 5.38 3.25 8C3.25 10.62 5.38 12.75 8 12.75C10.62 12.75 12.75 10.62 12.75 8C12.75 5.38 10.62 3.25 8 3.25Z"/></svg>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 16C3.584 16 0 12.416 0 8C0 3.584 3.584 0 8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16ZM8 1.92C4.6464 1.92 1.92 4.6464 1.92 8C1.92 11.3536 4.6464 14.08 8 14.08C11.3536 14.08 14.08 11.3536 14.08 8C14.08 4.6464 11.3536 1.92 8 1.92Z"/></svg>

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "3.24.1",
+  "version": "3.26.0",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "155",
-  "buildDate": "2022-08-31T13:07:06.314830Z"
+  "build": "161",
+  "buildDate": "2022-09-02T14:00:00.426882Z"
 }