@globalpayments/vega 2.45.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/slimmers/controllers/vega-dropdown-scrollable-controller.js

@@ -41,6 +41,19 @@ export class VegaDropdownScrollableController extends VegaSlimmer {
       await this.scrollToSelectedIndex();
     }
   }
+  /**
+   * While resettable, we should listen selected key to decide adjust max height of list container.
+   *
+   * @param {string[] | string} newValue - new value.
+   * @param {string[] | string} oldValue - old value.
+   */
+  watchSelectedSourceKey(newValue, oldValue) {
+    if (this.resettable &&
+      ((newValue && newValue.length > 0 && (!oldValue || oldValue.length === 0)) ||
+        ((!newValue || newValue.length === 0) && oldValue && oldValue.length > 0))) {
+      this.adjustListContainerMaxHeight();
+    }
+  }
   /**
    * The function scrollToSelected asynchronously scrolls to a selected index based on the render mode.
    */
@@ -74,7 +87,7 @@ export class VegaDropdownScrollableController extends VegaSlimmer {
       const ul = dropdownContent.shadowRoot.querySelector('ul');
       const ulRect = ul.getBoundingClientRect();
       const itemRect = selectedItem.getBoundingClientRect();
-      ul.scrollTop = itemRect.top - ulRect.top;
+      ul.scrollTop = itemRect.top - ulRect.top + ul.scrollTop;
     }
   }
   /**
@@ -103,11 +116,19 @@ export class VegaDropdownScrollableController extends VegaSlimmer {
    */
   adjustListContainerMaxHeight() {
     const dropdownRef = this.renderer.getDropdownContentBoxRef();
+    if (!dropdownRef)
+      return;
     const dropdownMaxHeight = extractNumberFromString(dropdownRef.style.maxHeight);
-    const excludeTop = this.searchable ? 59 : 8;
-    const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
-    const height = dropdownMaxHeight - excludeTop - 8 - paddingSpace;
-    dropdownRef.style.maxHeight = 'unset';
+    const searchActionContentHeight = this.searchable
+      ? VegaDropdownScrollableController.actionButtonContentHeight
+      : 0;
+    const resetActionContentHeight = this.resettable && this.selectedSourceKey.length > 0
+      ? VegaDropdownScrollableController.actionButtonContentHeight
+      : 0;
+    const layoutSpaceSpace = dropdownRef.classList.contains('vega-placement-top')
+      ? 0
+      : VegaDropdownScrollableController.dropdownLayoutSpaceHeight;
+    const height = dropdownMaxHeight - searchActionContentHeight - layoutSpaceSpace - resetActionContentHeight;
     if (height <= 40) {
       this.setItemsContainerMaxHeight(40);
       LogUtility.error("There have no space on the bottom to display dropdown, if you want to adjust position, you should make 'match-container-height' as false.");
@@ -134,6 +155,8 @@ export class VegaDropdownScrollableController extends VegaSlimmer {
     }
   }
 }
+VegaDropdownScrollableController.actionButtonContentHeight = 49; // actionHeight(40) + dividerHeight(paddingY + dividerHeight = 9);
+VegaDropdownScrollableController.dropdownLayoutSpaceHeight = 10; // paddingY + borderY;
 __decorate([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "isDropdownShow", void 0);
@@ -158,6 +181,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "resettable", void 0);
 __decorate([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownScrollableController.prototype, "watchIsDropdownShow", null);
+__decorate([
+  MapToComponentMethod('watchSelectedSourceKey')
+], VegaDropdownScrollableController.prototype, "watchSelectedSourceKey", null);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-selected-controller.js

@@ -111,6 +111,16 @@ export class VegaDropdownSelectedController extends VegaSlimmer {
     }
     this.dropdownClickEventEmitter.emit(key);
   }
+  /**
+   * The reset action.
+   */
+  reset() {
+    this.selectedSourceKey = this.selectType === 'multiple' ? [] : '';
+    if (this.selectType !== 'multiple') {
+      this.appenderController.hide();
+    }
+    this.resetEventEmitter.emit();
+  }
   /**
    * The function checks if the given item belongs to the current dropdown.
    * There have two cases:
@@ -217,6 +227,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "resetEventEmitter", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-renderer.js

@@ -58,11 +58,9 @@ export class VegaDropdownRenderer extends VegaSlimmer {
   renderDropdown() {
     const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
     return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, "data-vega-no-event-prevent": eventPreventFlag },
-      h("div", { ref: (e) => (this.dropdownRef = e), class: {
-          'vega-dropdown': true,
-          'vega-dropdown-with-searchable': this.searchable,
-        } },
+      h("div", { ref: (e) => (this.dropdownRef = e), class: "vega-dropdown" },
         h("div", { class: "vega-dropdown-actions" },
+          this.resetRenderer.render(),
           this.searchRenderer.render(),
           this.createRenderer.render()),
         h("div", null,
@@ -132,6 +130,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "resetRenderer", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaDropdownRenderer.prototype, "componentDidRender", null);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-reset-renderer.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 { Fragment, h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+export class VegaDropdownResetRenderer extends VegaSlimmer {
+  render() {
+    return (this.resettable &&
+      this.selectedSourceKey.length > 0 && (h(Fragment, null,
+      h("vega-font", { variant: "font-field-value", color: "text-link", class: "vega-dropdown-reset", 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onClick: () => this.selectedController.reset(), tabIndex: 0, role: "button", "aria-label": "Reset", onKeyDown: createEnterKeyHandlerToTriggerClick() }, this.translationSlimmer.t('Reset Selection')),
+      h("vega-divider", { margin: { y: 'size-4' } }))));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "resettable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "selectedController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "selectedSourceKey", void 0);