@globalpayments/vega 2.46.0 → 2.47.0

package/dist/collection/components/vega-button-circle/vega-button-circle.css

@@ -281,7 +281,7 @@ button:focus {
 .vega-button-circle-variant-primary {
   border-width: 0px;
   background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+  color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
 }
 .vega-button-circle-variant-primary:hover {
   background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
@@ -290,8 +290,8 @@ button:focus {
   background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
 }
 .vega-button-circle-variant-primary:focus-visible {
-  background-color: rgba(var(--v-bg-action-focus, 19, 98, 226, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 
 .vega-button-circle-variant-secondary {
@@ -310,7 +310,8 @@ button:focus {
   background-color: rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1));
 }
 .vega-button-circle-variant-secondary:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 
 .vega-button-circle-variant-icon-only {
@@ -324,12 +325,13 @@ button:focus {
   background-color: rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1));
 }
 .vega-button-circle-variant-icon-only:focus-visible {
-  background-color: rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 
 .vega-button-circle-variant-primary.vega-button-circle-danger {
   background-color: rgba(var(--v-bg-danger, 189, 41, 71, 1));
+  color: rgba(var(--v-text-on-danger, 252, 252, 252, 1));
 }
 .vega-button-circle-variant-primary.vega-button-circle-danger:hover {
   background-color: rgba(var(--v-bg-danger-hover, 233, 71, 104, 1));
@@ -338,7 +340,8 @@ button:focus {
   background-color: rgba(var(--v-bg-danger-active, 230, 50, 87, 1));
 }
 .vega-button-circle-variant-primary.vega-button-circle-danger:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
 }
 
 .vega-button-circle-variant-secondary.vega-button-circle-danger {
@@ -357,7 +360,8 @@ button:focus {
   background-color: rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2));
 }
 .vega-button-circle-variant-secondary.vega-button-circle-danger:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
 }
 
 .vega-button-circle-variant-icon-only.vega-button-circle-danger {
@@ -372,8 +376,8 @@ button:focus {
   color: rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));
 }
 .vega-button-circle-variant-icon-only.vega-button-circle-danger:focus-visible {
-  background-color: rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
 }
 
 .vega-button-circle-disabled {
@@ -387,6 +391,7 @@ button:focus {
 
 .vega-button-circle-variant-primary.vega-button-circle-disabled {
   background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
+  color: rgba(var(--v-text-on-disabled, 252, 252, 252, 1));
 }
 
 .vega-button-circle-variant-secondary.vega-button-circle-disabled {

package/dist/collection/components/vega-button-group/vega-button-group-item/vega-button-group-item.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
 /**
  * Deprecated. Not for use in new websites.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
@@ -19,20 +19,23 @@
   position: relative;
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
   outline-offset: 2px;
+  border-radius: 4px;
+  box-shadow: 0px 0px 0px 6px rgba(var(--v-bg-primary, 252, 252, 252, 1));
   z-index: 1;
-  box-shadow: 0 0 0;
 }
-:host vega-button-link::part(link-border) {
+:host vega-button-link::part(link) {
+  padding-left: 12px;
+  padding-right: 12px;
+  box-sizing: border-box;
+}
+:host vega-button-link::part(link):focus-visible {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
+  outline-offset: 0px;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
-  height: calc(100% + 2px);
-  top: -1px;
-  box-shadow: 0 0 0;
-  visibility: hidden;
+  color: rgba(var(--v-text-link, 19, 98, 226, 1));
 }
 :host vega-button-link::part(label-container) {
   text-decoration: none;
@@ -43,10 +46,6 @@
 :host vega-button::part(button) {
   margin-right: -4px;
 }
-:host vega-button::part(button):focus-visible {
-  margin-right: 0px;
-  margin-left: 4px;
-}
 
 :host(:first-child) vega-tooltip:has(vega-button),
 :host(:first-child) vega-dropdown:has(vega-button) {

package/dist/collection/components/vega-button-group/vega-button-group.css

@@ -25,8 +25,6 @@
 }
 
 .vega-button-group-tertiary > ::slotted(.vega-button-group-item) {
-  padding-left: 12px;
-  padding-right: 12px;
   border-color: rgba(var(--v-border-color-divider-secondary, 199, 217, 229, 1));
   border-left-width: 1px;
   border-top-width: 0px;

package/dist/collection/components/vega-button-link/vega-button-link.css

@@ -15,6 +15,7 @@ a {
   text-decoration: none;
   color: rgba(var(--v-text-link, 19, 98, 226, 1));
   background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
+  display: inline-block;
   outline: none;
 }
 a:visited {
@@ -28,6 +29,18 @@ a:active {
 }
 a:focus-visible {
   color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+}
+a.default:focus-visible, a.large:focus-visible {
+  border-radius: 8px;
+}
+a.small:focus-visible {
+  border-radius: 4px;
+}
+a.icon:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 4px;
 }
 
 a:not(.vega-button-link-danger):visited vega-icon svg *[fill=currentColor] {
@@ -55,11 +68,6 @@ a:not(.vega-button-link-danger):focus-visible vega-icon svg *[stroke=currentColo
   stroke: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }
 
-:host > a:hover .vega-button-link-label,
-:host > a:focus-visible .vega-button-link-label {
-  text-decoration: underline;
-}
-
 a:active {
   text-decoration: none;
 }
@@ -83,6 +91,14 @@ a.vega-button-link-danger:active {
 a.vega-button-link-danger:focus-visible {
   color: rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1));
 }
+a.vega-button-link-danger:focus-visible.default:focus-visible, a.vega-button-link-danger:focus-visible.large:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 4px;
+}
+a.vega-button-link-danger:focus-visible.small:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+}
 
 /* button color css */
 a .vega-button-link-button-container {
@@ -281,32 +297,6 @@ a.vega-button-link-size-large .vega-button-link-label {
   }
 }
 
-/* outer border */
-a:focus-visible > .vega-button-link-outer-border {
-  position: absolute;
-  pointer-events: none;
-  border-radius: 9999px;
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
-  display: inline-block;
-  top: -4px;
-  left: -8px;
-  height: calc(100% + 8px);
-  width: calc(100% + 16px);
-  visibility: visible !important;
-}
-
-a.vega-button-link-left-button:focus > .vega-button-link-outer-border {
-  left: -4px;
-}
-
-a.vega-button-link-right-button:focus > .vega-button-link-outer-border {
-  width: calc(100% + 12px);
-}
-
-a.vega-button-link-danger:focus-visible > .vega-button-link-outer-border {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-danger-focus, 230, 50, 87, 0.25));
-}
-
 /* disabled state css */
 :host(.vega-button-link-disabled) {
   pointer-events: none;
@@ -326,10 +316,4 @@ a.vega-button-link-danger:focus-visible > .vega-button-link-outer-border {
 
 :host(.vega-button-link-disabled) a:focus > .vega-button-link-content {
   color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
-}
-
-:host(.vega-button-link-disabled) a:focus > .vega-button-link-outer-border {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));
 }

package/dist/collection/components/vega-button-link/vega-button-link.js

@@ -117,15 +117,16 @@ export class VegaButtonLink {
     return sanitizeVegaComponent(h(Host, { class: {
         'vega-button-link-disabled': this.disabled,
       } },
-      h("a", { tabIndex: this.disabled ? -1 : 0, role: isEventLink ? 'button' : 'link', "aria-label": this.label.trim() || 'No label defined', href: href, onClick: isEventLink && this.onClick, class: {
+      h("a", { part: "link", tabIndex: this.disabled ? -1 : 0, role: isEventLink ? 'button' : 'link', "aria-label": this.label.trim() || 'No label defined', href: href, onClick: isEventLink && this.onClick, class: {
           'vega-button-link': true,
           [`vega-button-link-size-${this.size}`]: true,
           'vega-button-link-left-button': this.hasIconButton('left'),
           'vega-button-link-right-button': this.hasIconButton('right'),
           'vega-button-link-danger': this.danger,
+          'icon': this.icon ? true : false,
+          [this.size]: true,
         }, rel: "noopener noreferrer", target: this.target },
-        h("div", { class: "vega-button-link-content" }, this.renderContent()),
-        h("div", { class: "vega-button-link-outer-border", part: "link-border" }))), this.host);
+        h("div", { class: "vega-button-link-content" }, this.renderContent()))), this.host);
   }
   hasIconButton(position) {
     return this.icon && this.iconType === 'button' && this.iconAlign === position;
@@ -143,13 +144,13 @@ export class VegaButtonLink {
   }
   getGapByButtonSize() {
     if (this.size === 'large') {
-      return 'size-16';
+      return this.iconType === 'icon' ? 'size-8' : 'size-12';
     }
     if (this.size === 'small') {
-      return 'size-8';
+      return this.iconType === 'icon' ? 'size-4' : 'size-8';
     }
     if (this.size === 'default') {
-      return this.iconType === 'icon' ? 'size-8' : 'size-12';
+      return 'size-8';
     }
   }
   renderLabel() {

package/dist/collection/components/vega-carousel/vega-carousel.css

@@ -27,7 +27,8 @@
 :host .vega-carousel-indicators-container > div:focus {
   border: 2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1));
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 :host .vega-carousel-indicators-container > div:hover {
   border: 2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1));

package/dist/collection/components/vega-checkbox/vega-checkbox.css

@@ -55,9 +55,8 @@
 }
 
 .vega-checkbox-container > input[type=checkbox]:focus-visible + .vega-checkbox-icon {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
-  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
-  outline: none;
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
 }
 
 .vega-checkbox-container > .vega-checkbox-icon:active {
@@ -108,9 +107,8 @@
 }
 
 .vega-checkbox-container.error > input[type=checkbox]:focus-visible + .vega-checkbox-icon {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
-  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
-  outline: none;
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
 }
 
 :host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon:active {

package/dist/collection/components/vega-chip/vega-chip.css

@@ -2260,7 +2260,8 @@
   background-color: rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2));
 }
 :host button.vega-chip-filled-background:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 
 :host button.vega-chip-outlined:hover {
@@ -2273,12 +2274,12 @@
   background-color: rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2));
 }
 :host button.vega-chip-outlined:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 
 :host .vega-chip-close-icon:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
-  outline: 2px solid transparent;
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
   outline-offset: 2px;
 }
 

package/dist/collection/components/vega-color-picker/vega-color-picker.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
 /**
  * Deprecated. Not for use in new websites.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
@@ -18,13 +18,6 @@
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
 }
 
-.color-picker-inline-items:hover {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
-}
-.color-picker-inline-items:focus-within {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
-}
-
 :host(.disabled) .color-picker-inline-items:hover {
   box-shadow: none;
 }
@@ -50,6 +43,19 @@
   align-items: center;
   justify-content: center;
 }
+:host .color-picker-inline-items.selected {
+  border-color: rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1));
+}
+:host .color-picker-inline-items:hover {
+  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+}
+:host .color-picker-inline-items:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+  box-shadow: 0px 0px 0px 1px rgba(var(--v-bg-primary, 252, 252, 252, 1)) inset;
+  border: 1px solid rgba(var(--v-bg-primary, 252, 252, 252, 1));
+}
 
 :host .checkmark-black {
   color: rgba(var(--v-text-black, 32, 54, 69, 1));

package/dist/collection/components/vega-color-picker/vega-color-picker.js

@@ -120,12 +120,15 @@ export class VegaColorPicker {
     this.isInline = false;
     this.renderColorPickerContainer = () => {
       return (h("div", { class: arrayToClassString([!this.isInline ? 'color-picker-inline' : null]), ref: (e) => (this.colorPickerContainerRef = e) },
-        h("vega-flex", { direction: "row", gap: "size-8" }, this.colors.map((color) => (h("div", { id: color, class: "color-picker-inline-items", ref: (e) => (this.colorPickerTouchableAreaRef = e), style: {
-            backgroundColor: color,
-          }, onClick: this.updateValueProp, role: 'button', tabIndex: 0, "aria-label": "color", onKeyDown: createEnterKeyHandlerToTriggerClick() }, this.value === color ? (h("vega-icon", { icon: "checkmark", size: "size-16", class: {
-            'v-text-black': this.isDarkColorCheckmark(this.value),
-            'v-text-white': !this.isDarkColorCheckmark(this.value),
-          } })) : null))))));
+        h("vega-flex", { direction: "row", gap: "size-8", alignItems: "center" }, this.colors.map((color) => {
+          const selected = this.value === color;
+          return (h("div", { id: color, class: { 'color-picker-inline-items': true, 'selected': selected }, ref: (e) => (this.colorPickerTouchableAreaRef = e), style: {
+              backgroundColor: color,
+            }, onClick: this.updateValueProp, role: 'button', tabIndex: 0, "aria-label": "color", onKeyDown: createEnterKeyHandlerToTriggerClick() }, selected ? (h("vega-icon", { icon: "checkmark", size: "size-16", class: {
+              'v-text-black': this.isDarkColorCheckmark(this.value),
+              'v-text-white': !this.isDarkColorCheckmark(this.value),
+            } })) : null));
+        }))));
     };
     this.renderHintMessage = () => {
       return h("vega-text", null, this.hint);

package/dist/collection/components/vega-combo-box/vega-combo-box.css

@@ -32,7 +32,8 @@
 
 .vega-combo-box-container:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 
 .vega-combo-box-container .vega-combo-box-input-container {
@@ -116,7 +117,8 @@ vega-field-label {
 
 .error .vega-combo-box-container:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
 }
 
 :host(.vega-combo-box-disabled) .vega-combo-box-container {

package/dist/collection/components/vega-date-picker/vega-date-picker.css

@@ -66,8 +66,9 @@
 
 :host .vega-input-container.single-mode.error:focus-within,
 :host .vega-input-container.range-mode.error .date-picker-input:focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
   border-radius: 8px;
 }
 
@@ -81,8 +82,9 @@
 
 :host .vega-input-container.single-mode:not(.error):focus-within,
 :host .vega-input-container.range-mode:not(.error) .date-picker-input:focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
   border-radius: 8px;
 }
 

package/dist/collection/components/vega-dropdown/vega-dropdown-content-box/vega-dropdown-content-box.css

@@ -174,9 +174,9 @@
 }
 
 :host .vega-dropdown .vega-dropdown-add-item:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
+  border-radius: 4px;
 }
 
 :host .vega-dropdown .vega-dropdown-clear-icon {

package/dist/collection/components/vega-form/slimmers/controllers/vega-form-nest-state-controller.js

@@ -0,0 +1,31 @@
+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 { MapToComponentField } from 'vega-slimmer/core';
+import { SubStateObserverSlimmer } from '../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
+/**
+ * Sync data from parent vega form
+ */
+export class VegaFormNestStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-form',
+      subStates: [
+        {
+          subStateName: 'disableBlurValidation',
+          parentStateName: 'disableBlurValidation',
+        },
+      ],
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaFormNestStateController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaFormNestStateController.prototype, "disableBlurValidation", void 0);

package/dist/collection/components/vega-form/vega-form.js

@@ -13,7 +13,7 @@ import { isObjectArrayLike } from '../../utils/array';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { isElementVisible, findParent, isParent } from '../../utils/ui';
 import { ImmutableMap } from '../../helpers/immutable/immutable-map';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaFormReset, VegaFormSubmit, VegaValidate, } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -21,6 +21,8 @@ import { ChildNodesNotifyObserverSlimmer, } from '../../helpers/event-manager/sl
 import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalValid } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
+import { VegaFormNestStateController } from './slimmers/controllers/vega-form-nest-state-controller';
 /**
  * @vegaVersion 1.3.0
  */
@@ -30,6 +32,8 @@ export class VegaForm {
     this.submitEventEmitter = createEventEmitSlimmer(VegaForm, VegaFormSubmit);
     this.resetEventEmitter = createEventEmitSlimmer(VegaForm, VegaFormReset);
     this.validateEventEmitter = createEventEmitSlimmer(VegaForm, VegaValidate);
+    this.disableBlurValidationNotifySlimmer = createSubStateNotifySlimmer(VegaForm, 'disableBlurValidation', 'watchDisableBlurValidation');
+    this.stateController = new VegaFormNestStateController();
     this.childEventPrevent = new ChildNodesEventPreventSlimmer([VegaFormSubmit, VegaFormReset], () => this.host.querySelector('vega-form'), {
       customPreventHandle: (e) => {
         e.stopPropagation();
@@ -90,6 +94,18 @@ export class VegaForm {
      * @vegaVersion 1.3.0
      */
     this.isTouched = false;
+    /**
+     * Specifies whether form validation should be disabled on blur events of form elements.
+     *
+     *  - This helps prevent validation on blur when clicking Submit inside an input,
+     *        avoiding error messages that shift the button and block the click.
+     *  - For nested forms, the parent form will override this property
+     *        to ensure consistent validation behavior.
+     *
+     * @vegaVersion 2.47.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.disableBlurValidation = false;
     /**
      * If the element is valid, remove it from the set of
      *    invalid elements. If the element is invalid,
@@ -117,6 +133,9 @@ export class VegaForm {
     this.validateEventEmitter.emit(this.isValid);
     ChangeManager.notify(FORM_ELEMENT_VALIDATE, { host: this.host, detail: this.isValid });
   }
+  watchDisableBlurValidation() {
+    methodPlaceholder();
+  }
   /**
    * When the vegaForm is deleted, it is necessary to notify
    *    the parent's vegaForm to update its isValid status.
@@ -475,6 +494,27 @@ export class VegaForm {
       "attribute": "is-touched",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "disableBlurValidation": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.47.0"
+          }],
+        "text": "Specifies whether form validation should be disabled on blur events of form elements.\n\n - This helps prevent validation on blur when clicking Submit inside an input,\n       avoiding error messages that shift the button and block the click.\n - For nested forms, the parent form will override this property\n       to ensure consistent validation behavior."
+      },
+      "attribute": "disable-blur-validation",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -790,6 +830,9 @@ export class VegaForm {
   static get watchers() { return [{
       "propName": "isValid",
       "methodName": "watchIsValid"
+    }, {
+      "propName": "disableBlurValidation",
+      "methodName": "watchDisableBlurValidation"
     }]; }
 }
 __decorate([
@@ -804,6 +847,12 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaForm.prototype, "validateEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "disableBlurValidationNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "stateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaForm.prototype, "childEventPrevent", void 0);

package/dist/collection/components/vega-image-uploader/vega-image-uploader.css

@@ -50,13 +50,21 @@
   color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
 }
 :host(:not(.disabled)) .vega-image-uploader-select .action-wrapper:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+  border-style: none;
 }
 :host(:not(.disabled)) .vega-image-uploader-select .actions-backdrop:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+  border-style: none;
 }
 :host(:not(.disabled)) .vega-image-uploader-select .error .action-wrapper:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
 :host(.disabled) .vega-image-uploader-select .action-wrapper {
@@ -113,10 +121,6 @@
   color: rgba(var(--v-text-link, 19, 98, 226, 1));
 }
 
-:host(:not(.disabled)) .vega-image-uploader-select:not(.error):focus-within {
-  border-color: rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
-}
-
 :host .image-preview-container {
   display: flex;
   align-items: center;
@@ -296,10 +300,16 @@
   border-color: rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1));
 }
 :host .vega-image-uploader-select.error .action-wrapper:focus-within {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
+  border-style: none;
 }
 :host .vega-image-uploader-select.error .actions-backdrop:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
+  border-style: none;
 }
 
 :host .vega-hidden {