@globalpayments/vega 2.35.0 → 2.37.0

package/dist/esm/{string-input-formatter-slimmer-73fa06e6.js → string-input-formatter-slimmer-0ecbf367.js}

@@ -1,5 +1,9 @@
 import { i as isNonNullable } from './type-guard-158f6d7a.js';
-import { c as MapToComponentField, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-97deb349.js';
+import { a as VegaInternalComponentDidRender } from './vega-internal-event-id-458939b6.js';
+import { a as waitForComponentDidRender } from './index-b2045ad0.js';
 
 /**
  * A class for formatting string with the given mask format
@@ -171,8 +175,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 class StringInputFormatterSlimmer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.inputFlag = true;
-    this.blurFlag = true;
     /**
      * restore input value
      *
@@ -194,7 +196,6 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
      * @param {InputEvent} e - blur event
      */
     this.onBlur = (e) => {
-      this.blurFlag = false;
       if (this.blurFormatStrategy) {
         const target = e.target;
         const rawValue = target.value;
@@ -213,12 +214,11 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
      * @param {InputEvent} e - input event
      */
     this.onKeyDown = (e) => {
-      this.inputFlag = false;
       const target = e.target;
       const rawValue = target.value;
       const caretPosition = target.selectionStart; // selectionStart is nullable, link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-selectionstart
       if (this.inputFormatStrategy) {
-        const maskedValue = this.inputFormatStrategy.format(rawValue, 
+        const maskedValue = this.inputFormatStrategy.format(rawValue.replace(/\s/g, ''), 
         // Paste input is difference with type input, it can set much characters at one time,
         // so we should make caretPosition as undefined to format all value.
         e.inputType === 'insertFromPaste' ? null : caretPosition);
@@ -237,6 +237,12 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
       }
     };
   }
+  /**
+   * Component lifecycle - componentDidRender
+   */
+  componentDidRender() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalComponentDidRender), {});
+  }
   /**
    * The setup function initializes input element event listeners based on input and blur format strategies.
    */
@@ -247,7 +253,7 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
       this.inputElement = inputElement;
       this.inputFormatStrategy = this.getInputModeStrategy();
       this.blurFormatStrategy = this.getBlurModeStrategy();
-      this.onInit();
+      this.formatValueAfterSetup();
       if (this.inputFormatStrategy) {
         this.inputElement.addEventListener('input', this.onKeyDown, { capture: true });
         this.inputElement.addEventListener('paste', this.onPaste, { capture: true });
@@ -274,19 +280,20 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
     }
   }
   /**
-   * The `onInit` function checks for specific feature flags and conditions to format input values
-   * accordingly.
+   * Format the value by input strategy and blur strategy when formatter config change.
    */
-  onInit() {
-    var _a, _b, _c, _d;
-    if (((_b = (_a = this.inputFormatStrategy) === null || _a === void 0 ? void 0 : _a.shouldTriggerAtInit) === null || _b === void 0 ? void 0 : _b.call(_a)) && !this.isOnFocus() && this.inputFlag) {
-      this.inputFlag = false;
-      this.updateInputValueOnInit('input');
-    }
-    if (((_d = (_c = this.blurFormatStrategy) === null || _c === void 0 ? void 0 : _c.shouldTriggerAtInit) === null || _d === void 0 ? void 0 : _d.call(_c)) && !this.isOnFocus() && this.blurFlag) {
-      this.blurFlag = false;
-      this.updateInputValueOnInit('blur');
-    }
+  formatValueAfterSetup() {
+    void waitForComponentDidRender(this.host).then(() => {
+      var _a, _b, _c, _d;
+      const rawValue = this.inputElement.value;
+      if ((_b = (_a = this.inputFormatStrategy) === null || _a === void 0 ? void 0 : _a.shouldTriggerAtInit) === null || _b === void 0 ? void 0 : _b.call(_a)) {
+        this.host['value'] = this.inputFormatStrategy.format(rawValue);
+      }
+      if (((_d = (_c = this.blurFormatStrategy) === null || _c === void 0 ? void 0 : _c.shouldTriggerAtInit) === null || _d === void 0 ? void 0 : _d.call(_c)) && !this.isOnFocus()) {
+        const maskedValue = this.blurFormatStrategy.format(rawValue);
+        this.updateInputValue(rawValue, maskedValue);
+      }
+    });
   }
   /*
    * The below method is e2e-test covered in
@@ -331,26 +338,12 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
       this.inputElement.setSelectionRange(newCaretPosition, newCaretPosition);
     }
   }
-  /**
-   * The function `updateInputValueOnInit` updates the input value based on a specified strategy.
-   *
-   * @param {string} strategy - The `strategy` parameter is a string that determines which formatting
-   * strategy to use when updating the input value. It can have two possible values: 'input' or any other
-   * value.
-   */
-  updateInputValueOnInit(strategy) {
-    const rawValue = this.inputElement.value;
-    const maskedValue = strategy === 'input'
-      ? // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        this.inputFormatStrategy.format(rawValue)
-      : // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        this.blurFormatStrategy.format(rawValue);
-    this.updateInputValue(rawValue, maskedValue);
-    strategy === 'input' && (this.host['value'] = maskedValue);
-  }
 }
 __decorate([
   MapToComponentField()
 ], StringInputFormatterSlimmer.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], StringInputFormatterSlimmer.prototype, "componentDidRender", null);
 
 export { StringInputFormatterSlimmer as S, StringMaskStrategy as a };

package/dist/esm/{style-formatter-f91471e8.js → style-formatter-4b857992.js}

@@ -1,5 +1,5 @@
 import { i as isNonNullable } from './type-guard-158f6d7a.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-c2ab9c87.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-661193d7.js';
 
 /**
  * Fomatter flex styles.

package/dist/esm/{sub-state-notify-slimmer-48bad548.js → sub-state-notify-slimmer-4a201088.js}

@@ -1,8 +1,9 @@
 import { V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
-import { h as VegaInternalSubStatePull, g as VegaInternalSubStatePush } from './vega-internal-event-id-4af5c6e9.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { h as VegaInternalSubStatePull, g as VegaInternalSubStatePush } from './vega-internal-event-id-458939b6.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-97deb349.js';
 
 /**
  * Sub state notify slimmer

package/dist/esm/{sub-state-observer-slimmer-403cc4e7.js → sub-state-observer-slimmer-0d6da563.js}

@@ -1,8 +1,9 @@
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
+import { O as Observer } from './observer-3959f9dd.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { f as findParent } from './ui-62e4be97.js';
-import { g as VegaInternalSubStatePush, h as VegaInternalSubStatePull } from './vega-internal-event-id-4af5c6e9.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-97deb349.js';
+import { g as VegaInternalSubStatePush, h as VegaInternalSubStatePull } from './vega-internal-event-id-458939b6.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/{translation-a98970d8.js → translation-c08f2274.js}

@@ -1,6 +1,6 @@
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { U as UPDATE_TRANSLATION } from './static-subject-title-e06a3840.js';
+import { U as UPDATE_TRANSLATION } from './static-subject-title-8268945e.js';
 import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer } from './create-public-api-runtime-metrics-slimmer-9ab05523.js';
 
 /* eslint-disable @typescript-eslint/naming-convention */

package/dist/esm/{translation-slimmer-5ee9912b.js → translation-slimmer-7974f30b.js}

@@ -1,5 +1,5 @@
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { V as VegaInternalTranslation } from './translation-a98970d8.js';
+import { V as VegaInternalTranslation } from './translation-c08f2274.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/vega-accordion.entry.js

@@ -3,19 +3,20 @@ import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod,
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
-import { f as formatAndValidResponsiveToken } from './design-token-d06bc718.js';
+import { f as formatAndValidResponsiveToken } from './design-token-e14b622b.js';
 import { a as arrayToClassString } from './ui-62e4be97.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
-import { a as VegaClick, O as Observer, V as VegaExpand } from './dom-node-subject-factory-5831cdd4.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
+import { a as VegaClick, V as VegaExpand } from './dom-node-subject-factory-97deb349.js';
 import { c as chevronUp } from './chevron-up-b1989751.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
+import { O as Observer } from './observer-3959f9dd.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { A as ACCORDION_EXPAND_TOPIC } from './static-subject-title-e06a3840.js';
+import { A as ACCORDION_EXPAND_TOPIC } from './static-subject-title-8268945e.js';
 import { M as isAccordionObserverPayload } from './type-guard-158f6d7a.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
 import './breakpoints-d9faf11c.js';
-import './responsive-format-facade-c2ab9c87.js';
+import './responsive-format-facade-661193d7.js';
 import './breakpoints-91116111.js';
 import './ui-8424715a.js';
 import './number-4398f2e1.js';
@@ -26,7 +27,7 @@ import './icon-manager-b889176b.js';
 import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
 import './dynamic-slimmer-90b8af32.js';
 import './regex-dfe11abf.js';
-import './internal-vega-event-manager-07e1b3d9.js';
+import './internal-vega-event-manager-0a01ba12.js';
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/vega-app-header-button.entry.js

@@ -1,19 +1,19 @@
 import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-187f71d1.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { a as arrayToClassString } from './ui-62e4be97.js';
-import { d as formatAndValidBackgroundColor, i as formatAndValidTextColor } from './design-token-d06bc718.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-c2ab9c87.js';
-import { c as MapToComponentField, V as VegaSlimmer, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { d as formatAndValidBackgroundColor, i as formatAndValidTextColor } from './design-token-e14b622b.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-661193d7.js';
+import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { g as getCurrentBreakpoint } from './breakpoints-91116111.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-97aae8a8.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
-import { a as VegaClick, b as VegaDropdownClick, m as VegaDropdownShow, n as VegaDropdownHide } from './dom-node-subject-factory-5831cdd4.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-3220fa5b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
+import { m as VegaDropdownShow, n as VegaDropdownHide, b as VegaDropdownClick, a as VegaClick } from './dom-node-subject-factory-97deb349.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
 import { c as chevronUp } from './chevron-up-b1989751.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
 import './type-guard-158f6d7a.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
@@ -22,7 +22,7 @@ import './typography-396de03f.js';
 import './state-background-color-formatter-121ae7d3.js';
 import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
-import './internal-vega-event-manager-07e1b3d9.js';
+import './internal-vega-event-manager-0a01ba12.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-4b3fe6f8.js';
 import './index-44c794b4.js';
@@ -31,8 +31,9 @@ import './dynamic-slimmer-90b8af32.js';
 import './change-manager-6a7eb88c.js';
 import './icon-manager-b889176b.js';
 import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
+import './observer-3959f9dd.js';
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (undefined && undefined.__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;
@@ -50,10 +51,131 @@ class VegaMenuArrowIconRenderer extends VegaSlimmer {
     'chevron-down': chevronDown,
   });
 })();
-__decorate$1([
+__decorate$2([
   MapToComponentField()
 ], VegaMenuArrowIconRenderer.prototype, "isDropdownShow", void 0);
 
+var __decorate$1 = (undefined && undefined.__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;
+};
+/**
+ * Renderer class for the Vega App Header Button Dropdown.
+ * This class extends the VegaSlimmer and is responsible for rendering the dropdown component and managing its state and events.
+ */
+class VegaAppHeaderButtonDropdownRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * emit dropdown click event when component get dropdown item click
+     *
+     * @param {NotifyObserverPayload<string>} input the click detail
+     */
+    this.triggerDropdownClickEvent = (input) => {
+      this.dropdownClickEventEmitter.emit(input.detail);
+    };
+    /**
+     * Shows the dropdown component.
+     */
+    this.onDropdownShow = () => {
+      this.isDropdownShow = true;
+    };
+    /**
+     * Hides the dropdown component.
+     */
+    this.onDropdownHide = () => {
+      this.isDropdownShow = false;
+    };
+  }
+  connectedCallback() {
+    this.isTemplateMode = this.hasSlotItems();
+  }
+  /**
+   * The function appends host items to a dropdown element.
+   */
+  appendHostItemsToDropdown() {
+    const items = this.host.querySelector('[slot=items]');
+    if (items && this.itemsSlotRef && this.dropdownRef) {
+      this.itemsSlotRef.remove();
+      this.dropdownRef.append(items);
+    }
+  }
+  /**
+   * Determines if the dropdown should be rendered based on the presence of the dropdown configuration.
+   *
+   * @returns {boolean} True if the dropdown configuration is present, otherwise false.
+   */
+  shouldRenderDropdown() {
+    return !!((this.dropdown && this.dropdown.source && this.dropdown.source.length) ||
+      this.isTemplateMode);
+  }
+  getDropdownRef() {
+    return this.dropdownRef;
+  }
+  /**
+   * Renders the dropdown component with the provided children.
+   *
+   * @param {HTMLElement} children HTML element children to be rendered inside the dropdown.
+   * @returns {HTMLElement} The rendered dropdown component.
+   */
+  render(children) {
+    return (h("vega-dropdown", Object.assign({ trigger: "click" }, this.dropdown, { ref: (ref) => {
+        this.dropdownRef = ref;
+        this.dropdownEventPrevent.setup();
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownShow, () => {
+          this.onDropdownShow();
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownHide, () => {
+          this.onDropdownHide();
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, this.triggerDropdownClickEvent);
+      } }),
+      children,
+      this.renderItemsSlot()));
+  }
+  /**
+   * Renders the items slot.
+   *
+   * @returns {Nullable<HTMLElement>} The rendered items slot.
+   */
+  renderItemsSlot() {
+    return (this.isTemplateMode && (h("div", { slot: "items", ref: (ref) => {
+        this.itemsSlotRef = ref;
+      } })));
+  }
+  /**
+   * Checks if the dropdown has items.
+   *
+   * @returns {boolean} True if the dropdown has items, otherwise false.
+   */
+  hasSlotItems() {
+    return !!this.host.querySelector('[slot=items]');
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "dropdown", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaAppHeaderButtonDropdownRenderer.prototype, "isDropdownShow", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "dropdownEventPrevent", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$1([
+  MapToComponentMethod('connectedCallback')
+], VegaAppHeaderButtonDropdownRenderer.prototype, "connectedCallback", null);
+__decorate$1([
+  MapToComponentMethod('componentDidLoad')
+], VegaAppHeaderButtonDropdownRenderer.prototype, "appendHostItemsToDropdown", null);
+
 const vegaAppHeaderButtonCss = ":host(.v-bg-brand),.v-bg-brand{background-color:rgba(var(--v-bg-brand, 51, 57, 61, 1))}:host(.v-bg-page),.v-bg-page{background-color:rgba(var(--v-bg-page, 240, 243, 247, 1))}:host(.v-bg-primary),.v-bg-primary{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host(.v-bg-secondary),.v-bg-secondary{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-bg-tertiary),.v-bg-tertiary{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}:host(.v-bg-quaternary),.v-bg-quaternary{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host(.v-bg-inverted-primary),.v-bg-inverted-primary{background-color:rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))}:host(.v-bg-inverted-secondary),.v-bg-inverted-secondary{background-color:rgba(var(--v-bg-inverted-secondary, 18, 18, 39, 1))}:host(.v-bg-inverted-tertiary),.v-bg-inverted-tertiary{background-color:rgba(var(--v-bg-inverted-tertiary, 24, 24, 48, 1))}:host(.v-bg-inverted-quaternary),.v-bg-inverted-quaternary{background-color:rgba(var(--v-bg-inverted-quaternary, 70, 71, 101, 1))}:host(.v-bg-action),.v-bg-action{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.v-bg-action-hover),.v-bg-action-hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(.v-bg-action-focus),.v-bg-action-focus{background-color:rgba(var(--v-bg-action-focus, 19, 98, 226, 1))}:host(.v-bg-action-active),.v-bg-action-active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(.v-bg-action-quaternary),.v-bg-action-quaternary{background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}:host(.v-bg-action-quaternary-hover),.v-bg-action-quaternary-hover{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(.v-bg-action-quaternary-active),.v-bg-action-quaternary-active{background-color:rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))}:host(.v-bg-action-secondary),.v-bg-action-secondary{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}:host(.v-bg-action-secondary-hover),.v-bg-action-secondary-hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}:host(.v-bg-action-secondary-active),.v-bg-action-secondary-active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host(.v-bg-action-tertiary),.v-bg-action-tertiary{background-color:rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0))}:host(.v-bg-action-tertiary-hover),.v-bg-action-tertiary-hover{background-color:rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))}:host(.v-bg-action-tertiary-active),.v-bg-action-tertiary-active{background-color:rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1))}:host(.v-bg-app-header),.v-bg-app-header{background-color:rgba(var(--v-bg-app-header, 240, 243, 247, 0.88))}:host(.v-bg-backdrop-modal),.v-bg-backdrop-modal{background-color:rgba(var(--v-bg-backdrop-modal, 18, 18, 39, 0.85))}:host(.v-bg-backdrop-popover),.v-bg-backdrop-popover{background-color:rgba(var(--v-bg-backdrop-popover, 32, 54, 69, 0.16))}:host(.v-bg-backdrop-sidebar),.v-bg-backdrop-sidebar{background-color:rgba(var(--v-bg-backdrop-sidebar, 18, 18, 39, 0.85))}:host(.v-bg-chip),.v-bg-chip{background-color:rgba(var(--v-bg-chip, 32, 54, 69, 0.06))}:host(.v-bg-chip-hover),.v-bg-chip-hover{background-color:rgba(var(--v-bg-chip-hover, 32, 54, 69, 0.12))}:host(.v-bg-chip-active),.v-bg-chip-active{background-color:rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2))}:host(.v-bg-danger),.v-bg-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}:host(.v-bg-danger-hover),.v-bg-danger-hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}:host(.v-bg-danger-focus),.v-bg-danger-focus{background-color:rgba(var(--v-bg-danger-focus, 189, 41, 71, 1))}:host(.v-bg-danger-active),.v-bg-danger-active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}:host(.v-bg-danger-tertiary),.v-bg-danger-tertiary{background-color:rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0))}:host(.v-bg-danger-tertiary-hover),.v-bg-danger-tertiary-hover{background-color:rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2))}:host(.v-bg-danger-tertiary-active),.v-bg-danger-tertiary-active{background-color:rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))}:host(.v-bg-disabled),.v-bg-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.v-bg-divider),.v-bg-divider{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}:host(.v-bg-divider-secondary),.v-bg-divider-secondary{background-color:rgba(var(--v-bg-divider-secondary, 199, 217, 229, 1))}:host(.v-bg-keypad-btn-active),.v-bg-keypad-btn-active{background-color:rgba(var(--v-bg-keypad-btn-active, 229, 239, 255, 1))}:host(.v-bg-loading-progress),.v-bg-loading-progress{background-color:rgba(var(--v-bg-loading-progress, 153, 192, 255, 1))}:host(.v-bg-loading-track),.v-bg-loading-track{background-color:rgba(var(--v-bg-loading-track, 229, 239, 255, 1))}:host(.v-bg-segment-hover),.v-bg-segment-hover{background-color:rgba(var(--v-bg-segment-hover, 205, 209, 211, 1))}:host(.v-bg-segment-control),.v-bg-segment-control{background-color:rgba(var(--v-bg-segment-control, 89, 96, 99, 0.1))}:host(.v-bg-selected),.v-bg-selected{background-color:rgba(var(--v-bg-selected, 0, 151, 255, 0.3))}:host(.v-bg-sidebar),.v-bg-sidebar{background-color:rgba(var(--v-bg-sidebar, 18, 18, 39, 1))}:host(.v-bg-sidebar-icon),.v-bg-sidebar-icon{background-color:rgba(var(--v-bg-sidebar-icon, 188, 186, 213, 1))}:host(.v-bg-sidebar-icon-hover),.v-bg-sidebar-icon-hover{background-color:rgba(var(--v-bg-sidebar-icon-hover, 18, 18, 39, 1))}:host(.v-bg-sidebar-icon-selected),.v-bg-sidebar-icon-selected{background-color:rgba(var(--v-bg-sidebar-icon-selected, 252, 252, 252, 1))}:host(.v-bg-sidebar-item-hover),.v-bg-sidebar-item-hover{background-color:rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1))}:host(.v-bg-sidebar-item-selected),.v-bg-sidebar-item-selected{background-color:rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))}:host(.v-bg-site-footer),.v-bg-site-footer{background-color:rgba(var(--v-bg-site-footer, 51, 57, 61, 1))}:host(.v-bg-site-footer-action),.v-bg-site-footer-action{background-color:rgba(var(--v-bg-site-footer-action, 171, 198, 216, 1))}:host(.v-bg-site-footer-action-hover),.v-bg-site-footer-action-hover{background-color:rgba(var(--v-bg-site-footer-action-hover, 199, 217, 229, 1))}:host(.v-bg-site-footer-action-active),.v-bg-site-footer-action-active{background-color:rgba(var(--v-bg-site-footer-action-active, 143, 179, 203, 1))}:host(.v-bg-site-footer-field),.v-bg-site-footer-field{background-color:rgba(var(--v-bg-site-footer-field, 89, 96, 99, 1))}:host(.v-bg-slider-handle),.v-bg-slider-handle{background-color:rgba(var(--v-bg-slider-handle, 252, 252, 252, 1))}:host(.v-bg-status-error),.v-bg-status-error{background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1))}:host(.v-bg-status-info),.v-bg-status-info{background-color:rgba(var(--v-bg-status-info, 205, 209, 211, 1))}:host(.v-bg-status-success),.v-bg-status-success{background-color:rgba(var(--v-bg-status-success, 160, 233, 167, 1))}:host(.v-bg-status-warning),.v-bg-status-warning{background-color:rgba(var(--v-bg-status-warning, 255, 220, 131, 1))}:host(.v-bg-tab),.v-bg-tab{background-color:rgba(var(--v-bg-tab, 240, 243, 247, 1))}:host(.v-bg-tab-hover),.v-bg-tab-hover{background-color:rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))}:host(.v-bg-tab-selected),.v-bg-tab-selected{background-color:rgba(var(--v-bg-tab-selected, 32, 54, 69, 1))}:host(.v-bg-table-alt-row),.v-bg-table-alt-row{background-color:rgba(var(--v-bg-table-alt-row, 245, 247, 247, 1))}:host(.v-bg-table-header),.v-bg-table-header{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1))}:host(.v-bg-table-row-hover),.v-bg-table-row-hover{background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}:host(.v-bg-table-row-selected-expanded),.v-bg-table-row-selected-expanded{background-color:rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))}:host(.v-bg-table-selected-row),.v-bg-table-selected-row{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:host(.v-bg-textarea-count),.v-bg-textarea-count{background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}:host(.v-bg-tile),.v-bg-tile{background-color:rgba(var(--v-bg-tile, 252, 252, 252, 1))}:host(.v-bg-tile-hover),.v-bg-tile-hover{background-color:rgba(var(--v-bg-tile-hover, 245, 247, 247, 1))}:host(.v-bg-tile-selected),.v-bg-tile-selected{background-color:rgba(var(--v-bg-tile-selected, 242, 247, 255, 1))}:host(.v-bg-tile-selected-hover),.v-bg-tile-selected-hover{background-color:rgba(var(--v-bg-tile-selected-hover, 229, 239, 255, 1))}:host(.v-bg-toggle-switch),.v-bg-toggle-switch{background-color:rgba(var(--v-bg-toggle-switch, 107, 116, 125, 0.7))}:host(.v-bg-toggle-switch-hover),.v-bg-toggle-switch-hover{background-color:rgba(var(--v-bg-toggle-switch-hover, 107, 116, 125, 1))}:host(.v-bg-toggle-switch-selected-disabled),.v-bg-toggle-switch-selected-disabled{background-color:rgba(var(--v-bg-toggle-switch-selected-disabled, 153, 192, 255, 1))}:host(.v-bg-transparent),.v-bg-transparent{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}:host(.v-bg-accent1-primary),.v-bg-accent1-primary{background-color:rgba(var(--v-bg-accent1-primary, 115, 230, 220, 1))}:host(.v-bg-accent1-secondary),.v-bg-accent1-secondary{background-color:rgba(var(--v-bg-accent1-secondary, 193, 244, 239, 1))}:host(.v-bg-accent1-tertiary),.v-bg-accent1-tertiary{background-color:rgba(var(--v-bg-accent1-tertiary, 224, 249, 247, 1))}:host(.v-bg-accent2-primary),.v-bg-accent2-primary{background-color:rgba(var(--v-bg-accent2-primary, 128, 107, 255, 1))}:host(.v-bg-accent2-secondary),.v-bg-accent2-secondary{background-color:rgba(var(--v-bg-accent2-secondary, 199, 189, 255, 1))}:host(.v-bg-accent2-tertiary),.v-bg-accent2-tertiary{background-color:rgba(var(--v-bg-accent2-tertiary, 227, 222, 255, 1))}:host(.v-bg-accent3-primary),.v-bg-accent3-primary{background-color:rgba(var(--v-bg-accent3-primary, 255, 220, 131, 1))}:host(.v-bg-accent3-secondary),.v-bg-accent3-secondary{background-color:rgba(var(--v-bg-accent3-secondary, 255, 239, 200, 1))}:host(.v-bg-accent3-tertiary),.v-bg-accent3-tertiary{background-color:rgba(var(--v-bg-accent3-tertiary, 255, 247, 227, 1))}:host(.v-bg-accent4-primary),.v-bg-accent4-primary{background-color:rgba(var(--v-bg-accent4-primary, 255, 149, 113, 1))}:host(.v-bg-accent4-secondary),.v-bg-accent4-secondary{background-color:rgba(var(--v-bg-accent4-secondary, 255, 208, 192, 1))}:host(.v-bg-accent4-tertiary),.v-bg-accent4-tertiary{background-color:rgba(var(--v-bg-accent4-tertiary, 255, 231, 223, 1))}:host(.v-bg-accent5-primary),.v-bg-accent5-primary{background-color:rgba(var(--v-bg-accent5-primary, 0, 187, 255, 1))}:host(.v-bg-accent5-secondary),.v-bg-accent5-secondary{background-color:rgba(var(--v-bg-accent5-secondary, 142, 223, 249, 1))}:host(.v-bg-accent5-tertiary),.v-bg-accent5-tertiary{background-color:rgba(var(--v-bg-accent5-tertiary, 227, 247, 253, 1))}:host(.v-bg-accent6-primary),.v-bg-accent6-primary{background-color:rgba(var(--v-bg-accent6-primary, 255, 130, 201, 1))}:host(.v-bg-accent6-secondary),.v-bg-accent6-secondary{background-color:rgba(var(--v-bg-accent6-secondary, 255, 199, 231, 1))}:host(.v-bg-accent6-tertiary),.v-bg-accent6-tertiary{background-color:rgba(var(--v-bg-accent6-tertiary, 255, 227, 243, 1))}:host(.v-bg-accent7-primary),.v-bg-accent7-primary{background-color:rgba(var(--v-bg-accent7-primary, 37, 159, 159, 1))}:host(.v-bg-accent7-secondary),.v-bg-accent7-secondary{background-color:rgba(var(--v-bg-accent7-secondary, 155, 212, 214, 1))}:host(.v-bg-accent7-tertiary),.v-bg-accent7-tertiary{background-color:rgba(var(--v-bg-accent7-tertiary, 208, 239, 239, 1))}:host(.v-bg-accent8-primary),.v-bg-accent8-primary{background-color:rgba(var(--v-bg-accent8-primary, 86, 61, 130, 1))}:host(.v-bg-accent8-secondary),.v-bg-accent8-secondary{background-color:rgba(var(--v-bg-accent8-secondary, 199, 162, 204, 1))}:host(.v-bg-accent8-tertiary),.v-bg-accent8-tertiary{background-color:rgba(var(--v-bg-accent8-tertiary, 230, 214, 234, 1))}:host(.v-bg-accent9-primary),.v-bg-accent9-primary{background-color:rgba(var(--v-bg-accent9-primary, 255, 191, 63, 1))}:host(.v-bg-accent9-secondary),.v-bg-accent9-secondary{background-color:rgba(var(--v-bg-accent9-secondary, 254, 215, 142, 1))}:host(.v-bg-accent9-tertiary),.v-bg-accent9-tertiary{background-color:rgba(var(--v-bg-accent9-tertiary, 251, 226, 185, 1))}:host(.v-bg-accent10-primary),.v-bg-accent10-primary{background-color:rgba(var(--v-bg-accent10-primary, 237, 122, 35, 1))}:host(.v-bg-accent10-secondary),.v-bg-accent10-secondary{background-color:rgba(var(--v-bg-accent10-secondary, 241, 146, 85, 1))}:host(.v-bg-accent10-tertiary),.v-bg-accent10-tertiary{background-color:rgba(var(--v-bg-accent10-tertiary, 245, 187, 148, 1))}:host(.v-bg-date-picker-range),.v-bg-date-picker-range{background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}:host(.v-fill-bg-brand),.v-fill-bg-brand{background-color:rgba(var(--v-bg-brand, 51, 57, 61, 1))}:host(.v-fill-bg-page),.v-fill-bg-page{background-color:rgba(var(--v-bg-page, 240, 243, 247, 1))}:host(.v-fill-bg-primary),.v-fill-bg-primary{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host(.v-fill-bg-secondary),.v-fill-bg-secondary{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-fill-bg-tertiary),.v-fill-bg-tertiary{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}:host(.v-fill-bg-quaternary),.v-fill-bg-quaternary{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host(.v-fill-bg-inverted-primary),.v-fill-bg-inverted-primary{background-color:rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))}:host(.v-fill-bg-inverted-secondary),.v-fill-bg-inverted-secondary{background-color:rgba(var(--v-bg-inverted-secondary, 18, 18, 39, 1))}:host(.v-fill-bg-inverted-tertiary),.v-fill-bg-inverted-tertiary{background-color:rgba(var(--v-bg-inverted-tertiary, 24, 24, 48, 1))}:host(.v-fill-bg-inverted-quaternary),.v-fill-bg-inverted-quaternary{background-color:rgba(var(--v-bg-inverted-quaternary, 70, 71, 101, 1))}:host(.v-fill-bg-action),.v-fill-bg-action{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.v-fill-bg-action-hover),.v-fill-bg-action-hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(.v-fill-bg-action-focus),.v-fill-bg-action-focus{background-color:rgba(var(--v-bg-action-focus, 19, 98, 226, 1))}:host(.v-fill-bg-action-active),.v-fill-bg-action-active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(.v-fill-bg-action-quaternary),.v-fill-bg-action-quaternary{background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}:host(.v-fill-bg-action-quaternary-hover),.v-fill-bg-action-quaternary-hover{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(.v-fill-bg-action-quaternary-active),.v-fill-bg-action-quaternary-active{background-color:rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))}:host(.v-fill-bg-action-secondary),.v-fill-bg-action-secondary{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}:host(.v-fill-bg-action-secondary-hover),.v-fill-bg-action-secondary-hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}:host(.v-fill-bg-action-secondary-active),.v-fill-bg-action-secondary-active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host(.v-fill-bg-action-tertiary),.v-fill-bg-action-tertiary{background-color:rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0))}:host(.v-fill-bg-action-tertiary-hover),.v-fill-bg-action-tertiary-hover{background-color:rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))}:host(.v-fill-bg-action-tertiary-active),.v-fill-bg-action-tertiary-active{background-color:rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1))}:host(.v-fill-bg-app-header),.v-fill-bg-app-header{background-color:rgba(var(--v-bg-app-header, 240, 243, 247, 0.88))}:host(.v-fill-bg-backdrop-modal),.v-fill-bg-backdrop-modal{background-color:rgba(var(--v-bg-backdrop-modal, 18, 18, 39, 0.85))}:host(.v-fill-bg-backdrop-popover),.v-fill-bg-backdrop-popover{background-color:rgba(var(--v-bg-backdrop-popover, 32, 54, 69, 0.16))}:host(.v-fill-bg-backdrop-sidebar),.v-fill-bg-backdrop-sidebar{background-color:rgba(var(--v-bg-backdrop-sidebar, 18, 18, 39, 0.85))}:host(.v-fill-bg-chip),.v-fill-bg-chip{background-color:rgba(var(--v-bg-chip, 32, 54, 69, 0.06))}:host(.v-fill-bg-chip-hover),.v-fill-bg-chip-hover{background-color:rgba(var(--v-bg-chip-hover, 32, 54, 69, 0.12))}:host(.v-fill-bg-chip-active),.v-fill-bg-chip-active{background-color:rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2))}:host(.v-fill-bg-danger),.v-fill-bg-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}:host(.v-fill-bg-danger-hover),.v-fill-bg-danger-hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}:host(.v-fill-bg-danger-focus),.v-fill-bg-danger-focus{background-color:rgba(var(--v-bg-danger-focus, 189, 41, 71, 1))}:host(.v-fill-bg-danger-active),.v-fill-bg-danger-active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}:host(.v-fill-bg-danger-tertiary),.v-fill-bg-danger-tertiary{background-color:rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0))}:host(.v-fill-bg-danger-tertiary-hover),.v-fill-bg-danger-tertiary-hover{background-color:rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2))}:host(.v-fill-bg-danger-tertiary-active),.v-fill-bg-danger-tertiary-active{background-color:rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))}:host(.v-fill-bg-disabled),.v-fill-bg-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.v-fill-bg-divider),.v-fill-bg-divider{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}:host(.v-fill-bg-divider-secondary),.v-fill-bg-divider-secondary{background-color:rgba(var(--v-bg-divider-secondary, 199, 217, 229, 1))}:host(.v-fill-bg-keypad-btn-active),.v-fill-bg-keypad-btn-active{background-color:rgba(var(--v-bg-keypad-btn-active, 229, 239, 255, 1))}:host(.v-fill-bg-loading-progress),.v-fill-bg-loading-progress{background-color:rgba(var(--v-bg-loading-progress, 153, 192, 255, 1))}:host(.v-fill-bg-loading-track),.v-fill-bg-loading-track{background-color:rgba(var(--v-bg-loading-track, 229, 239, 255, 1))}:host(.v-fill-bg-segment-hover),.v-fill-bg-segment-hover{background-color:rgba(var(--v-bg-segment-hover, 205, 209, 211, 1))}:host(.v-fill-bg-segment-control),.v-fill-bg-segment-control{background-color:rgba(var(--v-bg-segment-control, 89, 96, 99, 0.1))}:host(.v-fill-bg-selected),.v-fill-bg-selected{background-color:rgba(var(--v-bg-selected, 0, 151, 255, 0.3))}:host(.v-fill-bg-sidebar),.v-fill-bg-sidebar{background-color:rgba(var(--v-bg-sidebar, 18, 18, 39, 1))}:host(.v-fill-bg-sidebar-icon),.v-fill-bg-sidebar-icon{background-color:rgba(var(--v-bg-sidebar-icon, 188, 186, 213, 1))}:host(.v-fill-bg-sidebar-icon-hover),.v-fill-bg-sidebar-icon-hover{background-color:rgba(var(--v-bg-sidebar-icon-hover, 18, 18, 39, 1))}:host(.v-fill-bg-sidebar-icon-selected),.v-fill-bg-sidebar-icon-selected{background-color:rgba(var(--v-bg-sidebar-icon-selected, 252, 252, 252, 1))}:host(.v-fill-bg-sidebar-item-hover),.v-fill-bg-sidebar-item-hover{background-color:rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1))}:host(.v-fill-bg-sidebar-item-selected),.v-fill-bg-sidebar-item-selected{background-color:rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))}:host(.v-fill-bg-site-footer),.v-fill-bg-site-footer{background-color:rgba(var(--v-bg-site-footer, 51, 57, 61, 1))}:host(.v-fill-bg-site-footer-action),.v-fill-bg-site-footer-action{background-color:rgba(var(--v-bg-site-footer-action, 171, 198, 216, 1))}:host(.v-fill-bg-site-footer-action-hover),.v-fill-bg-site-footer-action-hover{background-color:rgba(var(--v-bg-site-footer-action-hover, 199, 217, 229, 1))}:host(.v-fill-bg-site-footer-action-active),.v-fill-bg-site-footer-action-active{background-color:rgba(var(--v-bg-site-footer-action-active, 143, 179, 203, 1))}:host(.v-fill-bg-site-footer-field),.v-fill-bg-site-footer-field{background-color:rgba(var(--v-bg-site-footer-field, 89, 96, 99, 1))}:host(.v-fill-bg-slider-handle),.v-fill-bg-slider-handle{background-color:rgba(var(--v-bg-slider-handle, 252, 252, 252, 1))}:host(.v-fill-bg-status-error),.v-fill-bg-status-error{background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1))}:host(.v-fill-bg-status-info),.v-fill-bg-status-info{background-color:rgba(var(--v-bg-status-info, 205, 209, 211, 1))}:host(.v-fill-bg-status-success),.v-fill-bg-status-success{background-color:rgba(var(--v-bg-status-success, 160, 233, 167, 1))}:host(.v-fill-bg-status-warning),.v-fill-bg-status-warning{background-color:rgba(var(--v-bg-status-warning, 255, 220, 131, 1))}:host(.v-fill-bg-tab),.v-fill-bg-tab{background-color:rgba(var(--v-bg-tab, 240, 243, 247, 1))}:host(.v-fill-bg-tab-hover),.v-fill-bg-tab-hover{background-color:rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))}:host(.v-fill-bg-tab-selected),.v-fill-bg-tab-selected{background-color:rgba(var(--v-bg-tab-selected, 32, 54, 69, 1))}:host(.v-fill-bg-table-alt-row),.v-fill-bg-table-alt-row{background-color:rgba(var(--v-bg-table-alt-row, 245, 247, 247, 1))}:host(.v-fill-bg-table-header),.v-fill-bg-table-header{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1))}:host(.v-fill-bg-table-row-hover),.v-fill-bg-table-row-hover{background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}:host(.v-fill-bg-table-row-selected-expanded),.v-fill-bg-table-row-selected-expanded{background-color:rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))}:host(.v-fill-bg-table-selected-row),.v-fill-bg-table-selected-row{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:host(.v-fill-bg-textarea-count),.v-fill-bg-textarea-count{background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}:host(.v-fill-bg-tile),.v-fill-bg-tile{background-color:rgba(var(--v-bg-tile, 252, 252, 252, 1))}:host(.v-fill-bg-tile-hover),.v-fill-bg-tile-hover{background-color:rgba(var(--v-bg-tile-hover, 245, 247, 247, 1))}:host(.v-fill-bg-tile-selected),.v-fill-bg-tile-selected{background-color:rgba(var(--v-bg-tile-selected, 242, 247, 255, 1))}:host(.v-fill-bg-tile-selected-hover),.v-fill-bg-tile-selected-hover{background-color:rgba(var(--v-bg-tile-selected-hover, 229, 239, 255, 1))}:host(.v-fill-bg-toggle-switch),.v-fill-bg-toggle-switch{background-color:rgba(var(--v-bg-toggle-switch, 107, 116, 125, 0.7))}:host(.v-fill-bg-toggle-switch-hover),.v-fill-bg-toggle-switch-hover{background-color:rgba(var(--v-bg-toggle-switch-hover, 107, 116, 125, 1))}:host(.v-fill-bg-toggle-switch-selected-disabled),.v-fill-bg-toggle-switch-selected-disabled{background-color:rgba(var(--v-bg-toggle-switch-selected-disabled, 153, 192, 255, 1))}:host(.v-fill-bg-transparent),.v-fill-bg-transparent{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}:host(.v-fill-bg-accent1-primary),.v-fill-bg-accent1-primary{background-color:rgba(var(--v-bg-accent1-primary, 115, 230, 220, 1))}:host(.v-fill-bg-accent1-secondary),.v-fill-bg-accent1-secondary{background-color:rgba(var(--v-bg-accent1-secondary, 193, 244, 239, 1))}:host(.v-fill-bg-accent1-tertiary),.v-fill-bg-accent1-tertiary{background-color:rgba(var(--v-bg-accent1-tertiary, 224, 249, 247, 1))}:host(.v-fill-bg-accent2-primary),.v-fill-bg-accent2-primary{background-color:rgba(var(--v-bg-accent2-primary, 128, 107, 255, 1))}:host(.v-fill-bg-accent2-secondary),.v-fill-bg-accent2-secondary{background-color:rgba(var(--v-bg-accent2-secondary, 199, 189, 255, 1))}:host(.v-fill-bg-accent2-tertiary),.v-fill-bg-accent2-tertiary{background-color:rgba(var(--v-bg-accent2-tertiary, 227, 222, 255, 1))}:host(.v-fill-bg-accent3-primary),.v-fill-bg-accent3-primary{background-color:rgba(var(--v-bg-accent3-primary, 255, 220, 131, 1))}:host(.v-fill-bg-accent3-secondary),.v-fill-bg-accent3-secondary{background-color:rgba(var(--v-bg-accent3-secondary, 255, 239, 200, 1))}:host(.v-fill-bg-accent3-tertiary),.v-fill-bg-accent3-tertiary{background-color:rgba(var(--v-bg-accent3-tertiary, 255, 247, 227, 1))}:host(.v-fill-bg-accent4-primary),.v-fill-bg-accent4-primary{background-color:rgba(var(--v-bg-accent4-primary, 255, 149, 113, 1))}:host(.v-fill-bg-accent4-secondary),.v-fill-bg-accent4-secondary{background-color:rgba(var(--v-bg-accent4-secondary, 255, 208, 192, 1))}:host(.v-fill-bg-accent4-tertiary),.v-fill-bg-accent4-tertiary{background-color:rgba(var(--v-bg-accent4-tertiary, 255, 231, 223, 1))}:host(.v-fill-bg-accent5-primary),.v-fill-bg-accent5-primary{background-color:rgba(var(--v-bg-accent5-primary, 0, 187, 255, 1))}:host(.v-fill-bg-accent5-secondary),.v-fill-bg-accent5-secondary{background-color:rgba(var(--v-bg-accent5-secondary, 142, 223, 249, 1))}:host(.v-fill-bg-accent5-tertiary),.v-fill-bg-accent5-tertiary{background-color:rgba(var(--v-bg-accent5-tertiary, 227, 247, 253, 1))}:host(.v-fill-bg-accent6-primary),.v-fill-bg-accent6-primary{background-color:rgba(var(--v-bg-accent6-primary, 255, 130, 201, 1))}:host(.v-fill-bg-accent6-secondary),.v-fill-bg-accent6-secondary{background-color:rgba(var(--v-bg-accent6-secondary, 255, 199, 231, 1))}:host(.v-fill-bg-accent6-tertiary),.v-fill-bg-accent6-tertiary{background-color:rgba(var(--v-bg-accent6-tertiary, 255, 227, 243, 1))}:host(.v-fill-bg-accent7-primary),.v-fill-bg-accent7-primary{background-color:rgba(var(--v-bg-accent7-primary, 37, 159, 159, 1))}:host(.v-fill-bg-accent7-secondary),.v-fill-bg-accent7-secondary{background-color:rgba(var(--v-bg-accent7-secondary, 155, 212, 214, 1))}:host(.v-fill-bg-accent7-tertiary),.v-fill-bg-accent7-tertiary{background-color:rgba(var(--v-bg-accent7-tertiary, 208, 239, 239, 1))}:host(.v-fill-bg-accent8-primary),.v-fill-bg-accent8-primary{background-color:rgba(var(--v-bg-accent8-primary, 86, 61, 130, 1))}:host(.v-fill-bg-accent8-secondary),.v-fill-bg-accent8-secondary{background-color:rgba(var(--v-bg-accent8-secondary, 199, 162, 204, 1))}:host(.v-fill-bg-accent8-tertiary),.v-fill-bg-accent8-tertiary{background-color:rgba(var(--v-bg-accent8-tertiary, 230, 214, 234, 1))}:host(.v-fill-bg-accent9-primary),.v-fill-bg-accent9-primary{background-color:rgba(var(--v-bg-accent9-primary, 255, 191, 63, 1))}:host(.v-fill-bg-accent9-secondary),.v-fill-bg-accent9-secondary{background-color:rgba(var(--v-bg-accent9-secondary, 254, 215, 142, 1))}:host(.v-fill-bg-accent9-tertiary),.v-fill-bg-accent9-tertiary{background-color:rgba(var(--v-bg-accent9-tertiary, 251, 226, 185, 1))}:host(.v-fill-bg-accent10-primary),.v-fill-bg-accent10-primary{background-color:rgba(var(--v-bg-accent10-primary, 237, 122, 35, 1))}:host(.v-fill-bg-accent10-secondary),.v-fill-bg-accent10-secondary{background-color:rgba(var(--v-bg-accent10-secondary, 241, 146, 85, 1))}:host(.v-fill-bg-accent10-tertiary),.v-fill-bg-accent10-tertiary{background-color:rgba(var(--v-bg-accent10-tertiary, 245, 187, 148, 1))}:host(.v-fill-bg-date-picker-range),.v-fill-bg-date-picker-range{background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}:host(.v-stroke-bg-brand),.v-stroke-bg-brand{background-color:rgba(var(--v-bg-brand, 51, 57, 61, 1))}:host(.v-stroke-bg-page),.v-stroke-bg-page{background-color:rgba(var(--v-bg-page, 240, 243, 247, 1))}:host(.v-stroke-bg-primary),.v-stroke-bg-primary{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host(.v-stroke-bg-secondary),.v-stroke-bg-secondary{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-stroke-bg-tertiary),.v-stroke-bg-tertiary{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}:host(.v-stroke-bg-quaternary),.v-stroke-bg-quaternary{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host(.v-stroke-bg-inverted-primary),.v-stroke-bg-inverted-primary{background-color:rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))}:host(.v-stroke-bg-inverted-secondary),.v-stroke-bg-inverted-secondary{background-color:rgba(var(--v-bg-inverted-secondary, 18, 18, 39, 1))}:host(.v-stroke-bg-inverted-tertiary),.v-stroke-bg-inverted-tertiary{background-color:rgba(var(--v-bg-inverted-tertiary, 24, 24, 48, 1))}:host(.v-stroke-bg-inverted-quaternary),.v-stroke-bg-inverted-quaternary{background-color:rgba(var(--v-bg-inverted-quaternary, 70, 71, 101, 1))}:host(.v-stroke-bg-action),.v-stroke-bg-action{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.v-stroke-bg-action-hover),.v-stroke-bg-action-hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}:host(.v-stroke-bg-action-focus),.v-stroke-bg-action-focus{background-color:rgba(var(--v-bg-action-focus, 19, 98, 226, 1))}:host(.v-stroke-bg-action-active),.v-stroke-bg-action-active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(.v-stroke-bg-action-quaternary),.v-stroke-bg-action-quaternary{background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}:host(.v-stroke-bg-action-quaternary-hover),.v-stroke-bg-action-quaternary-hover{background-color:rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))}:host(.v-stroke-bg-action-quaternary-active),.v-stroke-bg-action-quaternary-active{background-color:rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))}:host(.v-stroke-bg-action-secondary),.v-stroke-bg-action-secondary{background-color:rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))}:host(.v-stroke-bg-action-secondary-hover),.v-stroke-bg-action-secondary-hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}:host(.v-stroke-bg-action-secondary-active),.v-stroke-bg-action-secondary-active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host(.v-stroke-bg-action-tertiary),.v-stroke-bg-action-tertiary{background-color:rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0))}:host(.v-stroke-bg-action-tertiary-hover),.v-stroke-bg-action-tertiary-hover{background-color:rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))}:host(.v-stroke-bg-action-tertiary-active),.v-stroke-bg-action-tertiary-active{background-color:rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1))}:host(.v-stroke-bg-app-header),.v-stroke-bg-app-header{background-color:rgba(var(--v-bg-app-header, 240, 243, 247, 0.88))}:host(.v-stroke-bg-backdrop-modal),.v-stroke-bg-backdrop-modal{background-color:rgba(var(--v-bg-backdrop-modal, 18, 18, 39, 0.85))}:host(.v-stroke-bg-backdrop-popover),.v-stroke-bg-backdrop-popover{background-color:rgba(var(--v-bg-backdrop-popover, 32, 54, 69, 0.16))}:host(.v-stroke-bg-backdrop-sidebar),.v-stroke-bg-backdrop-sidebar{background-color:rgba(var(--v-bg-backdrop-sidebar, 18, 18, 39, 0.85))}:host(.v-stroke-bg-chip),.v-stroke-bg-chip{background-color:rgba(var(--v-bg-chip, 32, 54, 69, 0.06))}:host(.v-stroke-bg-chip-hover),.v-stroke-bg-chip-hover{background-color:rgba(var(--v-bg-chip-hover, 32, 54, 69, 0.12))}:host(.v-stroke-bg-chip-active),.v-stroke-bg-chip-active{background-color:rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2))}:host(.v-stroke-bg-danger),.v-stroke-bg-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}:host(.v-stroke-bg-danger-hover),.v-stroke-bg-danger-hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}:host(.v-stroke-bg-danger-focus),.v-stroke-bg-danger-focus{background-color:rgba(var(--v-bg-danger-focus, 189, 41, 71, 1))}:host(.v-stroke-bg-danger-active),.v-stroke-bg-danger-active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}:host(.v-stroke-bg-danger-tertiary),.v-stroke-bg-danger-tertiary{background-color:rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0))}:host(.v-stroke-bg-danger-tertiary-hover),.v-stroke-bg-danger-tertiary-hover{background-color:rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2))}:host(.v-stroke-bg-danger-tertiary-active),.v-stroke-bg-danger-tertiary-active{background-color:rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))}:host(.v-stroke-bg-disabled),.v-stroke-bg-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.v-stroke-bg-divider),.v-stroke-bg-divider{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}:host(.v-stroke-bg-divider-secondary),.v-stroke-bg-divider-secondary{background-color:rgba(var(--v-bg-divider-secondary, 199, 217, 229, 1))}:host(.v-stroke-bg-keypad-btn-active),.v-stroke-bg-keypad-btn-active{background-color:rgba(var(--v-bg-keypad-btn-active, 229, 239, 255, 1))}:host(.v-stroke-bg-loading-progress),.v-stroke-bg-loading-progress{background-color:rgba(var(--v-bg-loading-progress, 153, 192, 255, 1))}:host(.v-stroke-bg-loading-track),.v-stroke-bg-loading-track{background-color:rgba(var(--v-bg-loading-track, 229, 239, 255, 1))}:host(.v-stroke-bg-segment-hover),.v-stroke-bg-segment-hover{background-color:rgba(var(--v-bg-segment-hover, 205, 209, 211, 1))}:host(.v-stroke-bg-segment-control),.v-stroke-bg-segment-control{background-color:rgba(var(--v-bg-segment-control, 89, 96, 99, 0.1))}:host(.v-stroke-bg-selected),.v-stroke-bg-selected{background-color:rgba(var(--v-bg-selected, 0, 151, 255, 0.3))}:host(.v-stroke-bg-sidebar),.v-stroke-bg-sidebar{background-color:rgba(var(--v-bg-sidebar, 18, 18, 39, 1))}:host(.v-stroke-bg-sidebar-icon),.v-stroke-bg-sidebar-icon{background-color:rgba(var(--v-bg-sidebar-icon, 188, 186, 213, 1))}:host(.v-stroke-bg-sidebar-icon-hover),.v-stroke-bg-sidebar-icon-hover{background-color:rgba(var(--v-bg-sidebar-icon-hover, 18, 18, 39, 1))}:host(.v-stroke-bg-sidebar-icon-selected),.v-stroke-bg-sidebar-icon-selected{background-color:rgba(var(--v-bg-sidebar-icon-selected, 252, 252, 252, 1))}:host(.v-stroke-bg-sidebar-item-hover),.v-stroke-bg-sidebar-item-hover{background-color:rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1))}:host(.v-stroke-bg-sidebar-item-selected),.v-stroke-bg-sidebar-item-selected{background-color:rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))}:host(.v-stroke-bg-site-footer),.v-stroke-bg-site-footer{background-color:rgba(var(--v-bg-site-footer, 51, 57, 61, 1))}:host(.v-stroke-bg-site-footer-action),.v-stroke-bg-site-footer-action{background-color:rgba(var(--v-bg-site-footer-action, 171, 198, 216, 1))}:host(.v-stroke-bg-site-footer-action-hover),.v-stroke-bg-site-footer-action-hover{background-color:rgba(var(--v-bg-site-footer-action-hover, 199, 217, 229, 1))}:host(.v-stroke-bg-site-footer-action-active),.v-stroke-bg-site-footer-action-active{background-color:rgba(var(--v-bg-site-footer-action-active, 143, 179, 203, 1))}:host(.v-stroke-bg-site-footer-field),.v-stroke-bg-site-footer-field{background-color:rgba(var(--v-bg-site-footer-field, 89, 96, 99, 1))}:host(.v-stroke-bg-slider-handle),.v-stroke-bg-slider-handle{background-color:rgba(var(--v-bg-slider-handle, 252, 252, 252, 1))}:host(.v-stroke-bg-status-error),.v-stroke-bg-status-error{background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1))}:host(.v-stroke-bg-status-info),.v-stroke-bg-status-info{background-color:rgba(var(--v-bg-status-info, 205, 209, 211, 1))}:host(.v-stroke-bg-status-success),.v-stroke-bg-status-success{background-color:rgba(var(--v-bg-status-success, 160, 233, 167, 1))}:host(.v-stroke-bg-status-warning),.v-stroke-bg-status-warning{background-color:rgba(var(--v-bg-status-warning, 255, 220, 131, 1))}:host(.v-stroke-bg-tab),.v-stroke-bg-tab{background-color:rgba(var(--v-bg-tab, 240, 243, 247, 1))}:host(.v-stroke-bg-tab-hover),.v-stroke-bg-tab-hover{background-color:rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))}:host(.v-stroke-bg-tab-selected),.v-stroke-bg-tab-selected{background-color:rgba(var(--v-bg-tab-selected, 32, 54, 69, 1))}:host(.v-stroke-bg-table-alt-row),.v-stroke-bg-table-alt-row{background-color:rgba(var(--v-bg-table-alt-row, 245, 247, 247, 1))}:host(.v-stroke-bg-table-header),.v-stroke-bg-table-header{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1))}:host(.v-stroke-bg-table-row-hover),.v-stroke-bg-table-row-hover{background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}:host(.v-stroke-bg-table-row-selected-expanded),.v-stroke-bg-table-row-selected-expanded{background-color:rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))}:host(.v-stroke-bg-table-selected-row),.v-stroke-bg-table-selected-row{background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:host(.v-stroke-bg-textarea-count),.v-stroke-bg-textarea-count{background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}:host(.v-stroke-bg-tile),.v-stroke-bg-tile{background-color:rgba(var(--v-bg-tile, 252, 252, 252, 1))}:host(.v-stroke-bg-tile-hover),.v-stroke-bg-tile-hover{background-color:rgba(var(--v-bg-tile-hover, 245, 247, 247, 1))}:host(.v-stroke-bg-tile-selected),.v-stroke-bg-tile-selected{background-color:rgba(var(--v-bg-tile-selected, 242, 247, 255, 1))}:host(.v-stroke-bg-tile-selected-hover),.v-stroke-bg-tile-selected-hover{background-color:rgba(var(--v-bg-tile-selected-hover, 229, 239, 255, 1))}:host(.v-stroke-bg-toggle-switch),.v-stroke-bg-toggle-switch{background-color:rgba(var(--v-bg-toggle-switch, 107, 116, 125, 0.7))}:host(.v-stroke-bg-toggle-switch-hover),.v-stroke-bg-toggle-switch-hover{background-color:rgba(var(--v-bg-toggle-switch-hover, 107, 116, 125, 1))}:host(.v-stroke-bg-toggle-switch-selected-disabled),.v-stroke-bg-toggle-switch-selected-disabled{background-color:rgba(var(--v-bg-toggle-switch-selected-disabled, 153, 192, 255, 1))}:host(.v-stroke-bg-transparent),.v-stroke-bg-transparent{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}:host(.v-stroke-bg-accent1-primary),.v-stroke-bg-accent1-primary{background-color:rgba(var(--v-bg-accent1-primary, 115, 230, 220, 1))}:host(.v-stroke-bg-accent1-secondary),.v-stroke-bg-accent1-secondary{background-color:rgba(var(--v-bg-accent1-secondary, 193, 244, 239, 1))}:host(.v-stroke-bg-accent1-tertiary),.v-stroke-bg-accent1-tertiary{background-color:rgba(var(--v-bg-accent1-tertiary, 224, 249, 247, 1))}:host(.v-stroke-bg-accent2-primary),.v-stroke-bg-accent2-primary{background-color:rgba(var(--v-bg-accent2-primary, 128, 107, 255, 1))}:host(.v-stroke-bg-accent2-secondary),.v-stroke-bg-accent2-secondary{background-color:rgba(var(--v-bg-accent2-secondary, 199, 189, 255, 1))}:host(.v-stroke-bg-accent2-tertiary),.v-stroke-bg-accent2-tertiary{background-color:rgba(var(--v-bg-accent2-tertiary, 227, 222, 255, 1))}:host(.v-stroke-bg-accent3-primary),.v-stroke-bg-accent3-primary{background-color:rgba(var(--v-bg-accent3-primary, 255, 220, 131, 1))}:host(.v-stroke-bg-accent3-secondary),.v-stroke-bg-accent3-secondary{background-color:rgba(var(--v-bg-accent3-secondary, 255, 239, 200, 1))}:host(.v-stroke-bg-accent3-tertiary),.v-stroke-bg-accent3-tertiary{background-color:rgba(var(--v-bg-accent3-tertiary, 255, 247, 227, 1))}:host(.v-stroke-bg-accent4-primary),.v-stroke-bg-accent4-primary{background-color:rgba(var(--v-bg-accent4-primary, 255, 149, 113, 1))}:host(.v-stroke-bg-accent4-secondary),.v-stroke-bg-accent4-secondary{background-color:rgba(var(--v-bg-accent4-secondary, 255, 208, 192, 1))}:host(.v-stroke-bg-accent4-tertiary),.v-stroke-bg-accent4-tertiary{background-color:rgba(var(--v-bg-accent4-tertiary, 255, 231, 223, 1))}:host(.v-stroke-bg-accent5-primary),.v-stroke-bg-accent5-primary{background-color:rgba(var(--v-bg-accent5-primary, 0, 187, 255, 1))}:host(.v-stroke-bg-accent5-secondary),.v-stroke-bg-accent5-secondary{background-color:rgba(var(--v-bg-accent5-secondary, 142, 223, 249, 1))}:host(.v-stroke-bg-accent5-tertiary),.v-stroke-bg-accent5-tertiary{background-color:rgba(var(--v-bg-accent5-tertiary, 227, 247, 253, 1))}:host(.v-stroke-bg-accent6-primary),.v-stroke-bg-accent6-primary{background-color:rgba(var(--v-bg-accent6-primary, 255, 130, 201, 1))}:host(.v-stroke-bg-accent6-secondary),.v-stroke-bg-accent6-secondary{background-color:rgba(var(--v-bg-accent6-secondary, 255, 199, 231, 1))}:host(.v-stroke-bg-accent6-tertiary),.v-stroke-bg-accent6-tertiary{background-color:rgba(var(--v-bg-accent6-tertiary, 255, 227, 243, 1))}:host(.v-stroke-bg-accent7-primary),.v-stroke-bg-accent7-primary{background-color:rgba(var(--v-bg-accent7-primary, 37, 159, 159, 1))}:host(.v-stroke-bg-accent7-secondary),.v-stroke-bg-accent7-secondary{background-color:rgba(var(--v-bg-accent7-secondary, 155, 212, 214, 1))}:host(.v-stroke-bg-accent7-tertiary),.v-stroke-bg-accent7-tertiary{background-color:rgba(var(--v-bg-accent7-tertiary, 208, 239, 239, 1))}:host(.v-stroke-bg-accent8-primary),.v-stroke-bg-accent8-primary{background-color:rgba(var(--v-bg-accent8-primary, 86, 61, 130, 1))}:host(.v-stroke-bg-accent8-secondary),.v-stroke-bg-accent8-secondary{background-color:rgba(var(--v-bg-accent8-secondary, 199, 162, 204, 1))}:host(.v-stroke-bg-accent8-tertiary),.v-stroke-bg-accent8-tertiary{background-color:rgba(var(--v-bg-accent8-tertiary, 230, 214, 234, 1))}:host(.v-stroke-bg-accent9-primary),.v-stroke-bg-accent9-primary{background-color:rgba(var(--v-bg-accent9-primary, 255, 191, 63, 1))}:host(.v-stroke-bg-accent9-secondary),.v-stroke-bg-accent9-secondary{background-color:rgba(var(--v-bg-accent9-secondary, 254, 215, 142, 1))}:host(.v-stroke-bg-accent9-tertiary),.v-stroke-bg-accent9-tertiary{background-color:rgba(var(--v-bg-accent9-tertiary, 251, 226, 185, 1))}:host(.v-stroke-bg-accent10-primary),.v-stroke-bg-accent10-primary{background-color:rgba(var(--v-bg-accent10-primary, 237, 122, 35, 1))}:host(.v-stroke-bg-accent10-secondary),.v-stroke-bg-accent10-secondary{background-color:rgba(var(--v-bg-accent10-secondary, 241, 146, 85, 1))}:host(.v-stroke-bg-accent10-tertiary),.v-stroke-bg-accent10-tertiary{background-color:rgba(var(--v-bg-accent10-tertiary, 245, 187, 148, 1))}:host(.v-stroke-bg-date-picker-range),.v-stroke-bg-date-picker-range{background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}:host(.v-text-primary),.v-text-primary{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host(.v-text-secondary),.v-text-secondary{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.v-text-inverted-primary),.v-text-inverted-primary{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host(.v-text-inverted-secondary),.v-text-inverted-secondary{color:rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))}:host(.v-text-black),.v-text-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}:host(.v-text-white),.v-text-white{color:rgba(var(--v-text-white, 252, 252, 252, 1))}:host(.v-text-brand),.v-text-brand{color:rgba(var(--v-text-brand, 51, 57, 61, 1))}:host(.v-text-danger-link),.v-text-danger-link{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host(.v-text-danger-link-hover),.v-text-danger-link-hover{color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}:host(.v-text-danger-link-active),.v-text-danger-link-active{color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))}:host(.v-text-danger-link-focus),.v-text-danger-link-focus{color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}:host(.v-text-danger-link-visited),.v-text-danger-link-visited{color:rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))}:host(.v-text-disabled),.v-text-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.v-text-error),.v-text-error{color:rgba(var(--v-text-error, 189, 41, 71, 1))}:host(.v-text-input-disabled),.v-text-input-disabled{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host(.v-text-input-placeholder),.v-text-input-placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}:host(.v-text-link),.v-text-link{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(.v-text-link-hover),.v-text-link-hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(.v-text-link-active),.v-text-link-active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(.v-text-link-focus),.v-text-link-focus{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}:host(.v-text-link-visited),.v-text-link-visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host(.v-text-on-action),.v-text-on-action{color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}:host(.v-text-on-danger),.v-text-on-danger{color:rgba(var(--v-text-on-danger, 252, 252, 252, 1))}:host(.v-text-on-disabled),.v-text-on-disabled{color:rgba(var(--v-text-on-disabled, 252, 252, 252, 1))}:host(.v-text-sidebar-link),.v-text-sidebar-link{color:rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))}:host(.v-text-sidebar-link-hover),.v-text-sidebar-link-hover{color:rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))}:host(.v-text-sidebar-link-selected),.v-text-sidebar-link-selected{color:rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))}:host(.v-text-site-footer-link),.v-text-site-footer-link{color:rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))}:host(.v-text-site-footer-link-hover),.v-text-site-footer-link-hover{color:rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))}:host(.v-text-site-footer-link-active),.v-text-site-footer-link-active{color:rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))}:host(.v-text-success),.v-text-success{color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.v-text-inverted-success),.v-text-inverted-success{color:rgba(var(--v-text-inverted-success, 89, 217, 119, 1))}:host(.v-text-accent1-primary),.v-text-accent1-primary{color:rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))}:host(.v-text-accent2-primary),.v-text-accent2-primary{color:rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))}:host(.v-text-accent3-primary),.v-text-accent3-primary{color:rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))}:host(.v-text-accent4-primary),.v-text-accent4-primary{color:rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))}:host(.v-text-accent5-primary),.v-text-accent5-primary{color:rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))}:host(.v-text-accent6-primary),.v-text-accent6-primary{color:rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))}:host(.v-text-accent7-primary),.v-text-accent7-primary{color:rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))}:host(.v-text-accent8-primary),.v-text-accent8-primary{color:rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))}:host(.v-text-accent9-primary),.v-text-accent9-primary{color:rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))}:host(.v-text-accent10-primary),.v-text-accent10-primary{color:rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))}:host{display:inline-block;border-radius:9999px;vertical-align:middle}:host vega-dropdown,:host vega-tooltip{border-radius:9999px}:host .vega-app-header-button-container{padding:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:9999px;border-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box;gap:8px;outline:none}:host(.default) .vega-app-header-button-container{min-height:52px}:host(.small) .vega-app-header-button-container{gap:4px;min-height:44px}:host .vega-app-header-button-container:hover{background-color:rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))}:host .vega-app-header-button-container:active{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}:host .vega-app-header-button-container:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host .vega-app-header-button-container.icon{padding:16px}:host(.small) .vega-app-header-button-container.icon{padding:12px}:host .vega-app-header-button-container .label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));display:flex;align-items:center}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-app-header-button-container .label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-app-header-button-container .label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-app-header-button-container .label{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}:host .vega-app-header-button-container .vega-avatar{border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;width:36px;height:36px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-app-header-button-container .vega-avatar{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-app-header-button-container .vega-avatar{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-app-header-button-container .vega-avatar{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host .vega-app-header-button-container .vega-avatar.profile{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}:host.default .vega-app-header-button-container .vega-avatar{width:36px;height:36px}:host(.small) .vega-app-header-button-container .vega-avatar{width:28px;height:28px}:host .vega-app-header-button-container .toggle-icon-wrapper{display:flex;justify-content:center;align-items:center;padding:4px}:host .vega-app-header-button-container.icon .toggle-icon-wrapper{margin-right:0px}:host .vega-app-header-button-container .right-container{display:flex;gap:8px}:host .vega-app-header-button-container .avatar-icon-wrapper{display:flex;align-items:center;justify-content:center;width:20px;height:20px}:host .vega-app-header-button-container .toggle-icon-wrapper vega-icon,:host .vega-app-header-button-container .avatar-icon-wrapper vega-icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host .vega-app-header-button-container.with-border{border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1))}:host .vega-app-header-button-container:not(.icon) .right-container span:not(.vega-avatar):last-child{margin-right:8px}:host(.small) .vega-app-header-button-container:not(.icon) .right-container span:not(.vega-avatar):last-child{margin-right:4px}:host(.selected) .vega-app-header-button-container{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host(.selected) .vega-app-header-button-container .toggle-icon-wrapper vega-icon,:host(.selected) .vega-app-header-button-container .avatar-icon-wrapper vega-icon,:host(.selected) .vega-app-header-button-container .label{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(.selected) .vega-app-header-button-container:hover .toggle-icon-wrapper vega-icon,:host(.selected) .vega-app-header-button-container:hover .avatar-icon-wrapper vega-icon,:host(.selected) .vega-app-header-button-container:hover .label{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(.selected) .vega-app-header-button-container:active .toggle-icon-wrapper vega-icon,:host(.selected) .vega-app-header-button-container:active .avatar-icon-wrapper vega-icon,:host(.selected) .vega-app-header-button-container:active .label{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(.selected) .vega-app-header-button-container:focus-visible .toggle-icon-wrapper vega-icon,:host(.selected) .vega-app-header-button-container:focus-visible .avatar-icon-wrapper vega-icon,:host(.selected) .vega-app-header-button-container:focus-visible .label{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(.selected) .vega-app-header-button-container:focus-visible{border-color:rgba(var(--v-border-color-action, 19, 98, 226, 1));border-style:solid;border-width:1px}:host .vega-app-header-button-container .vega-avatar.v-bg-accent3-primary{background-color:rgba(var(--v-bg-accent3-primary, 255, 220, 131, 1))}:host .vega-app-header-button-container .vega-avatar.v-text-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -79,7 +201,7 @@ const VegaAppHeaderButton = class {
      * @see{module:vega-app-header-button-resize-e2e}
      */
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
-    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick], () => this.dropdownRef, {
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick], () => this.dropdownRenderer.getDropdownRef(), {
       customPreventHandle: (e) => {
         e.stopPropagation();
       },
@@ -88,6 +210,7 @@ const VegaAppHeaderButton = class {
     this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaDropdownClick);
     this.vegaMenuArrowIconRenderer = new VegaMenuArrowIconRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.dropdownRenderer = new VegaAppHeaderButtonDropdownRenderer();
     /**
      * Used to determine whether the avatar image is loaded or not.
      */
@@ -215,23 +338,9 @@ const VegaAppHeaderButton = class {
       return (h("span", { class: "avatar-icon-wrapper" }, h("vega-icon", { icon: this.avatar.icon, size: iconSize })));
     };
     this.renderDropdownContainer = (children) => {
-      return this.dropdown ? (h("vega-dropdown", Object.assign({ trigger: "click" }, this.dropdown, { ref: (ref) => {
-          this.dropdownRef = ref;
-          this.dropdownEventPrevent.setup();
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownShow, () => {
-            this.onDropdownShow();
-          });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownHide, () => {
-            this.onDropdownHide();
-          });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, this.triggerDropdownClickEvent);
-        } }), children)) : (children);
-    };
-    this.onDropdownShow = () => {
-      this.isDropdownShow = true;
-    };
-    this.onDropdownHide = () => {
-      this.isDropdownShow = false;
+      return this.dropdownRenderer.shouldRenderDropdown()
+        ? this.dropdownRenderer.render(children)
+        : children;
     };
     /**
      * The below method is e2e-test covered in
@@ -250,14 +359,6 @@ const VegaAppHeaderButton = class {
       this.setAvatarImgLoaded(false);
       forceUpdate(this.host);
     };
-    /**
-     * emit dropdown click event when component get dropdown item click
-     *
-     * @param {NotifyObserverPayload<string>} input the click detail
-     */
-    this.triggerDropdownClickEvent = (input) => {
-      this.dropdownClickEventEmitter.emit(input.detail);
-    };
   }
   /**
    * The below method is e2e-test covered in
@@ -271,8 +372,7 @@ const VegaAppHeaderButton = class {
     }
   }
   render() {
-    var _a;
-    const arrowDownIconVisible = this.showMenuArrowIcon && ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.source.length) > 0;
+    const arrowDownIconVisible = this.showMenuArrowIcon && this.dropdownRenderer.shouldRenderDropdown();
     const labelVisible = this.label && this.showLabel;
     const withTooltip = this.label && !this.showLabel;
     const classNames = arrayToClassString([
@@ -307,6 +407,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaAppHeaderButton.prototype, "dropdownRenderer", void 0);
 VegaAppHeaderButton.style = vegaAppHeaderButtonCss;
 
 export { VegaAppHeaderButton as vega_app_header_button };

package/dist/esm/vega-banner.entry.js

@@ -5,17 +5,18 @@ import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { g as getDeviceType, D as DeviceType, a as arrayToClassString } from './ui-62e4be97.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
-import { a as VegaClick, c as VegaClose, e as VegaActionButtonClick } from './dom-node-subject-factory-5831cdd4.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
+import { a as VegaClick, c as VegaClose, e as VegaActionButtonClick } from './dom-node-subject-factory-97deb349.js';
 import { F as FeatureFlag } from './feature-flag-controller-4b3fe6f8.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
 import './icon-manager-b889176b.js';
 import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
 import './dynamic-slimmer-90b8af32.js';
 import './change-manager-6a7eb88c.js';
+import './observer-3959f9dd.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
-import './internal-vega-event-manager-07e1b3d9.js';
+import './internal-vega-event-manager-0a01ba12.js';
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/vega-box.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-187f71d1.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
-import { j as formatAndValidStateToken, f as formatAndValidResponsiveToken, k as formatAndValidBorderStyle } from './design-token-d06bc718.js';
+import { j as formatAndValidStateToken, f as formatAndValidResponsiveToken, k as formatAndValidBorderStyle } from './design-token-e14b622b.js';
 import { a as arrayToClassString } from './ui-62e4be97.js';
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-c2ab9c87.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-661193d7.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
-import { f as formatFlexStyles } from './style-formatter-f91471e8.js';
+import { f as formatFlexStyles } from './style-formatter-4b857992.js';
 import './type-guard-158f6d7a.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';