@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

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

@@ -6,15 +6,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Host, h, Element, Prop, Watch, State } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { InjectElementAppender } from '../../decorators/property-decorators/injectElementAppender';
 import { InjectKeyboardManager } from '../../decorators/property-decorators/injectKeyboardManager';
-import { InjectVegaGlobalSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaTooltipElementAppenderController } from './slimmers/controllers/vega-tooltip-element-appender-controller';
+import { VegaTooltipContentBoxRenderer } from './slimmers/renderers/vega-tooltip-content-box-renderer';
 export class VegaTooltip {
   constructor() {
     this.globalSlimmers = {};
+    this.vegaTooltipElementAppenderController = new VegaTooltipElementAppenderController();
+    this.vegaTooltipContentBoxRenderer = new VegaTooltipContentBoxRenderer();
     this.isTooltipShow = false;
     /**
      * Specifies the trigger mode for the tooltip.
+     * - click: means the tooltip show/hide by click.
+     * - hover: means the tooltip show/hide by hover.
+     * - none: means tooltip is not displayed regardless of hover or click.
      */
     this.trigger = 'hover';
     /**
@@ -27,19 +33,21 @@ export class VegaTooltip {
      *    within its container or relative to a reference point.
      */
     this.alignment = 'center';
+    /**
+     * The tooltip is interactive by default.
+     * Set `disableInteractive` to `true` to deactivate this feature, causing the tooltip to close upon hover.
+     */
+    this.disableInteractive = false;
   }
   watchPlacement() {
     if (this.isTooltipShow) {
-      this.elementAppender.show();
+      this.vegaTooltipElementAppenderController.show();
     }
   }
   render() {
     return sanitizeVegaComponent(h(Host, null,
       h("slot", null),
-      this.renderTooltip()), this.el);
-  }
-  renderTooltip() {
-    return (h("vega-tooltip-content-box", { ref: (e) => (this.tooltipContentBox = e), content: this.content }));
+      this.vegaTooltipContentBoxRenderer.render()), this.el);
   }
   static get is() { return "vega-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -132,15 +140,15 @@ export class VegaTooltip {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'hover' | 'click'",
-        "resolved": "\"click\" | \"hover\"",
+        "original": "'hover' | 'click' | 'none'",
+        "resolved": "\"click\" | \"hover\" | \"none\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the trigger mode for the tooltip."
+        "text": "Specifies the trigger mode for the tooltip.\n- click: means the tooltip show/hide by click.\n- hover: means the tooltip show/hide by hover.\n- none: means tooltip is not displayed regardless of hover or click."
       },
       "attribute": "trigger",
       "reflect": false,
@@ -157,12 +165,32 @@ export class VegaTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "This property will be removed soon and replaced by prop text"
+          }],
         "text": "Specifies the content that is displayed\n   inside the tooltip."
       },
       "attribute": "content",
       "reflect": false
     },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the text that is displayed\n   inside the tooltip."
+      },
+      "attribute": "text",
+      "reflect": false
+    },
     "placement": {
       "type": "string",
       "mutable": false,
@@ -225,6 +253,24 @@ export class VegaTooltip {
       },
       "attribute": "position-relative-to",
       "reflect": false
+    },
+    "disableInteractive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The tooltip is interactive by default.\nSet `disableInteractive` to `true` to deactivate this feature, causing the tooltip to close upon hover."
+      },
+      "attribute": "disable-interactive",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -237,40 +283,36 @@ export class VegaTooltip {
     }, {
       "propName": "placement",
       "methodName": "watchPlacement"
+    }, {
+      "propName": "alignment",
+      "methodName": "watchPlacement"
     }]; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaTooltip.prototype, "globalSlimmers", void 0);
 __decorate([
-  InjectElementAppender((host) => ({
-    target: host.el,
-    appendableElement: host.tooltipContentBox,
-    positionRelativeTo: host.positionRelativeTo,
-    matchTargetWidth: false,
-    size: host.size,
-    minWidth: host.minWidth,
-    maxWidth: host.maxWidth,
-    placement: host.placement,
-    alignment: host.alignment,
-  }), (host) => host.trigger, 'isTooltipShow')
-], VegaTooltip.prototype, "elementAppender", void 0);
+  InjectVegaSlimmer()
+], VegaTooltip.prototype, "vegaTooltipElementAppenderController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTooltip.prototype, "vegaTooltipContentBoxRenderer", void 0);
 __decorate([
   InjectKeyboardManager((host) => [
     {
       keyCode: 'Tab',
       activeElementInScope: [host.el],
-      callback: /* istanbul ignore next */ () => host.trigger === 'hover' && host.elementAppender.show(),
+      callback: /* istanbul ignore next */ () => host.trigger === 'hover' && host.vegaTooltipElementAppenderController.show(),
     },
     {
       keyCode: 'Escape',
-      activeElementInScope: [host.el, host.tooltipContentBox],
-      callback: /* istanbul ignore next */ () => host.elementAppender.hide(),
+      activeElementInScope: [host.el, host.vegaTooltipContentBoxRenderer.getTooltipContentBoxRef()],
+      callback: /* istanbul ignore next */ () => host.vegaTooltipElementAppenderController.hide(),
     },
     {
       keyCode: 'Tab',
-      activeElementOutScope: [host.el, host.tooltipContentBox],
-      callback: /* istanbul ignore next */ () => host.isTooltipShow && host.elementAppender.hide(),
+      activeElementOutScope: [host.el, host.vegaTooltipContentBoxRenderer.getTooltipContentBoxRef()],
+      callback: /* istanbul ignore next */ () => host.isTooltipShow && host.vegaTooltipElementAppenderController.hide(),
     },
   ])
 ], VegaTooltip.prototype, "el", void 0);

package/dist/collection/constants/misc.js

@@ -1,59 +1,3 @@
-export const SIDEBAR_SOURCE_MOCK_DATA = [
-  {
-    url: '',
-    name: 'Dashboard',
-    icon: 'fas fa-tachometer-alt',
-  },
-  {
-    url: '',
-    name: 'Order Equipment',
-    icon: 'fas fa-shopping-bag',
-  },
-  {
-    url: '',
-    name: 'Dashboard',
-    icon: 'fas fa-file-alt',
-    children: [
-      {
-        url: '',
-        name: 'Form W-9',
-        selected: true,
-      },
-      {
-        url: '',
-        name: 'Form W-8BEN',
-      },
-      {
-        url: '',
-        name: 'Very very very very very very very very long title',
-      },
-    ],
-  },
-  {
-    url: '',
-    name: 'Main Heading',
-    icon: 'fas fa-user',
-    children: [
-      {
-        url: '',
-        name: 'Sub-Heading',
-      },
-      {
-        url: '',
-        name: 'Sub-Heading',
-      },
-      {
-        url: '',
-        name: 'Sub-Heading',
-      },
-    ],
-  },
-  {
-    url: '',
-    name: 'Support',
-    icon: 'fas fa-file-alt',
-  },
-];
 export const UUID = 'uuid';
 export const INPUT_TEXT_FOCUS_WIDTH = 2;
 export const HEARTLAND_TOS_URL = 'https://www.heartland.us/terms';

package/dist/collection/constants/tokens/borderRadius.js

@@ -3,14 +3,14 @@
 /* tslint:disable */
 // prettier-ignore
 export const BorderRadius = {
-  "2": 2,
-  "4": 4,
-  "8": 8,
-  "12": 12,
-  "16": 16,
-  "24": 24,
-  "32": 32,
-  "48": 48,
-  "none": 0,
-  "full": 9999
+  "rounded-none": 0,
+  "rounded-full": 9999,
+  "rounded-2": 2,
+  "rounded-4": 4,
+  "rounded-8": 8,
+  "rounded-12": 12,
+  "rounded-16": 16,
+  "rounded-24": 24,
+  "rounded-32": 32,
+  "rounded-48": 48
 };

package/dist/collection/constants/tokens/borders.js

@@ -0,0 +1,31 @@
+/* This file is generated by vega-design 2.0.71 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+export const Borders = ["border-secondary-btn", "border-secondary-btn-hover", "border-secondary-danger-btn", "border-secondary-btn-active", "border-secondary-danger-btn-hover", "border-secondary-danger-btn-active", "border-input-field", "border-input-field-hover", "border-input-field-focus", "border-input-field-danger", "border-input-field-danger-hover", "border-input-field-danger-focus", "border-sidebar-item-focus", "border-input-field-disabled", "border-success", "border-secondary-btn-disabled", "border-chip", "border-divider", "border-divider-secondary", "border-selection-tile-selected", "border-selection-tile-selected-hover", "border-table-divider", "border-slider-handle"];
+// prettier-ignore
+export const BorderMap = {
+  'border-secondary-btn': '2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))',
+  'border-secondary-btn-hover': '2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1))',
+  'border-secondary-danger-btn': '2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1))',
+  'border-secondary-btn-active': '2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1))',
+  'border-secondary-danger-btn-hover': '2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1))',
+  'border-secondary-danger-btn-active': '2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1))',
+  'border-input-field': '1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))',
+  'border-input-field-hover': '1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))',
+  'border-input-field-focus': '1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1))',
+  'border-input-field-danger': '1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))',
+  'border-input-field-danger-hover': '1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))',
+  'border-input-field-danger-focus': '1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1))',
+  'border-sidebar-item-focus': '2px solid rgba(var(--v-border-sidebar-item-focus, 19, 98, 226, 1))',
+  'border-input-field-disabled': '1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))',
+  'border-success': '2px solid rgba(var(--v-border-success, 1, 128, 31, 1))',
+  'border-secondary-btn-disabled': '2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1))',
+  'border-chip': '1px solid rgba(var(--v-border-chip, 205, 209, 211, 1))',
+  'border-divider': '1px solid rgba(var(--v-border-divider, 171, 198, 216, 1))',
+  'border-divider-secondary': '1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1))',
+  'border-selection-tile-selected': '2px solid rgba(var(--v-border-selection-tile-selected, 19, 98, 226, 1))',
+  'border-selection-tile-selected-hover': '2px solid rgba(var(--v-border-selection-tile-selected-hover, 4, 112, 236, 1))',
+  'border-table-divider': '1px solid rgba(var(--v-border-table-divider, 171, 198, 216, 1))',
+  'border-slider-handle': '1px solid rgba(var(--v-border-slider-handle, 199, 217, 229, 1))'
+};

package/dist/collection/constants/tokens/colors.js

@@ -13,3 +13,185 @@ export const StrokeBackgroundColors = ["stroke-bg-brand", "stroke-bg-page", "str
 export const TextColors = ["text-primary", "text-secondary", "text-inverted-primary", "text-inverted-secondary", "text-link", "text-link-hover", "text-link-active", "text-link-focus", "text-link-visited", "text-danger-link", "text-danger-link-hover", "text-danger-link-active", "text-danger-link-focus", "text-danger-link-visited", "text-success", "text-error", "text-black", "text-white", "text-disabled", "text-input-disabled", "text-sidebar-link", "text-sidebar-link-hover", "text-sidebar-link-selected", "text-input-placeholder", "text-accent1-primary", "text-accent2-primary", "text-accent3-primary", "text-accent4-primary", "text-accent5-primary", "text-accent6-primary", "text-accent7-primary", "text-accent8-primary", "text-accent9-primary", "text-accent10-primary", "text-site-footer-link", "text-site-footer-link-hover", "text-site-footer-link-active", "text-brand", "text-on-action", "text-on-danger", "text-on-disabled"];
 // prettier-ignore
 export const BorderColors = ["border-color-action", "border-color-action-hover", "border-color-action-active", "border-color-danger", "border-color-danger-hover", "border-color-danger-active", "border-color-input-field", "border-color-input-field-hover", "border-color-input-field-focus", "border-color-input-field-danger", "border-color-input-field-danger-hover", "border-color-input-field-danger-focus", "border-color-input-field-disabled", "border-color-sidebar-item-focus", "border-color-success", "border-color-secondary-btn-disabled", "border-color-chip", "border-color-divider", "border-color-divider-secondary", "border-color-tile-selected", "border-color-tile-selected-hover", "border-color-table-divider", "border-color-slider-handle"];
+// prettier-ignore
+export const TextColorMap = {
+  'text-primary': 'rgba(var(--v-text-primary, 32, 54, 69, 1))',
+  'text-secondary': 'rgba(var(--v-text-secondary, 107, 116, 125, 1))',
+  'text-inverted-primary': 'rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))',
+  'text-inverted-secondary': 'rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))',
+  'text-link': 'rgba(var(--v-text-link, 19, 98, 226, 1))',
+  'text-link-hover': 'rgba(var(--v-text-link-hover, 4, 112, 236, 1))',
+  'text-link-active': 'rgba(var(--v-text-link-active, 29, 65, 195, 1))',
+  'text-link-focus': 'rgba(var(--v-text-link-focus, 4, 112, 236, 1))',
+  'text-link-visited': 'rgba(var(--v-text-link-visited, 95, 56, 206, 1))',
+  'text-danger-link': 'rgba(var(--v-text-danger-link, 230, 50, 87, 1))',
+  'text-danger-link-hover': 'rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))',
+  'text-danger-link-active': 'rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))',
+  'text-danger-link-focus': 'rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))',
+  'text-danger-link-visited': 'rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))',
+  'text-success': 'rgba(var(--v-text-success, 1, 128, 31, 1))',
+  'text-error': 'rgba(var(--v-text-error, 189, 41, 71, 1))',
+  'text-black': 'rgba(var(--v-text-black, 32, 54, 69, 1))',
+  'text-white': 'rgba(var(--v-text-white, 252, 252, 252, 1))',
+  'text-disabled': 'rgba(var(--v-text-disabled, 176, 180, 181, 1))',
+  'text-input-disabled': 'rgba(var(--v-text-input-disabled, 107, 116, 125, 1))',
+  'text-sidebar-link': 'rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))',
+  'text-sidebar-link-hover': 'rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))',
+  'text-sidebar-link-selected': 'rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))',
+  'text-input-placeholder': 'rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))',
+  'text-accent1-primary': 'rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))',
+  'text-accent2-primary': 'rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))',
+  'text-accent3-primary': 'rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))',
+  'text-accent4-primary': 'rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))',
+  'text-accent5-primary': 'rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))',
+  'text-accent6-primary': 'rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))',
+  'text-accent7-primary': 'rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))',
+  'text-accent8-primary': 'rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))',
+  'text-accent9-primary': 'rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))',
+  'text-accent10-primary': 'rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))',
+  'text-site-footer-link': 'rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))',
+  'text-site-footer-link-hover': 'rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))',
+  'text-site-footer-link-active': 'rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))',
+  'text-brand': 'rgba(var(--v-text-brand, 89, 96, 99, 1))',
+  'text-on-action': 'rgba(var(--v-text-on-action, 252, 252, 252, 1))',
+  'text-on-danger': 'rgba(var(--v-text-on-danger, 252, 252, 252, 1))',
+  'text-on-disabled': 'rgba(var(--v-text-on-disabled, 252, 252, 252, 1))'
+};
+// prettier-ignore
+export const BackgroundColorMap = {
+  'bg-brand': 'rgba(var(--v-bg-brand, 89, 96, 99, 1))',
+  'bg-page': 'rgba(var(--v-bg-page, 240, 243, 247, 1))',
+  'bg-transparent': 'rgba(var(--v-bg-transparent, 0, 0, 0, 0))',
+  'bg-primary': 'rgba(var(--v-bg-primary, 252, 252, 252, 1))',
+  'bg-secondary': 'rgba(var(--v-bg-secondary, 245, 247, 247, 1))',
+  'bg-tertiary': 'rgba(var(--v-bg-tertiary, 240, 243, 247, 1))',
+  'bg-quaternary': 'rgba(var(--v-bg-quaternary, 241, 248, 251, 1))',
+  'bg-inverted-primary': 'rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))',
+  'bg-inverted-secondary': 'rgba(var(--v-bg-inverted-secondary, 18, 18, 39, 1))',
+  'bg-inverted-tertiary': 'rgba(var(--v-bg-inverted-tertiary, 24, 24, 48, 1))',
+  'bg-inverted-quaternary': 'rgba(var(--v-bg-inverted-quaternary, 70, 71, 101, 1))',
+  'bg-selected': 'rgba(var(--v-bg-selected, 0, 151, 255, 0.3))',
+  'bg-action': 'rgba(var(--v-bg-action, 19, 98, 226, 1))',
+  'bg-action-hover': 'rgba(var(--v-bg-action-hover, 4, 112, 236, 1))',
+  'bg-action-focus': 'rgba(var(--v-bg-action-focus, 0, 151, 255, 1))',
+  'bg-action-active': 'rgba(var(--v-bg-action-active, 29, 65, 195, 1))',
+  'bg-action-secondary': 'rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))',
+  'bg-action-tertiary': 'rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0))',
+  'bg-action-tertiary-hover': 'rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))',
+  'bg-action-tertiary-active': 'rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1))',
+  'bg-action-quaternary': 'rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))',
+  'bg-action-quaternary-hover': 'rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))',
+  'bg-action-quaternary-active': 'rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))',
+  'bg-danger': 'rgba(var(--v-bg-danger, 230, 50, 87, 1))',
+  'bg-danger-hover': 'rgba(var(--v-bg-danger-hover, 255, 87, 114, 1))',
+  'bg-danger-focus': 'rgba(var(--v-bg-danger-focus, 240, 52, 91, 1))',
+  'bg-danger-active': 'rgba(var(--v-bg-danger-active, 189, 41, 71, 1))',
+  'bg-danger-tertiary': 'rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0))',
+  'bg-danger-tertiary-hover': 'rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2))',
+  'bg-danger-tertiary-active': 'rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))',
+  'bg-status-success': 'rgba(var(--v-bg-status-success, 160, 233, 167, 1))',
+  'bg-status-warning': 'rgba(var(--v-bg-status-warning, 255, 220, 131, 1))',
+  'bg-status-info': 'rgba(var(--v-bg-status-info, 205, 209, 211, 1))',
+  'bg-status-error': 'rgba(var(--v-bg-status-error, 255, 110, 139, 1))',
+  'bg-sidebar': 'rgba(var(--v-bg-sidebar, 18, 18, 39, 1))',
+  'bg-sidebar-item-hover': 'rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1))',
+  'bg-sidebar-item-selected': 'rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))',
+  'bg-sidebar-icon': 'rgba(var(--v-bg-sidebar-icon, 188, 186, 213, 1))',
+  'bg-sidebar-icon-hover': 'rgba(var(--v-bg-sidebar-icon-hover, 18, 18, 39, 1))',
+  'bg-sidebar-icon-selected': 'rgba(var(--v-bg-sidebar-icon-selected, 252, 252, 252, 1))',
+  'bg-backdrop-popover': 'rgba(var(--v-bg-backdrop-popover, 32, 54, 69, 0.16))',
+  'bg-backdrop-modal': 'rgba(var(--v-bg-backdrop-modal, 18, 18, 39, 0.85))',
+  'bg-backdrop-sidebar': 'rgba(var(--v-bg-backdrop-sidebar, 18, 18, 39, 0.85))',
+  'bg-accent1-primary': 'rgba(var(--v-bg-accent1-primary, 115, 230, 220, 1))',
+  'bg-accent1-secondary': 'rgba(var(--v-bg-accent1-secondary, 193, 244, 239, 1))',
+  'bg-accent1-tertiary': 'rgba(var(--v-bg-accent1-tertiary, 224, 249, 247, 1))',
+  'bg-accent2-primary': 'rgba(var(--v-bg-accent2-primary, 128, 107, 255, 1))',
+  'bg-accent2-secondary': 'rgba(var(--v-bg-accent2-secondary, 199, 189, 255, 1))',
+  'bg-accent2-tertiary': 'rgba(var(--v-bg-accent2-tertiary, 227, 222, 255, 1))',
+  'bg-accent3-primary': 'rgba(var(--v-bg-accent3-primary, 255, 220, 131, 1))',
+  'bg-accent3-secondary': 'rgba(var(--v-bg-accent3-secondary, 255, 239, 200, 1))',
+  'bg-accent3-tertiary': 'rgba(var(--v-bg-accent3-tertiary, 255, 247, 227, 1))',
+  'bg-accent4-primary': 'rgba(var(--v-bg-accent4-primary, 255, 149, 113, 1))',
+  'bg-accent4-secondary': 'rgba(var(--v-bg-accent4-secondary, 255, 208, 192, 1))',
+  'bg-accent4-tertiary': 'rgba(var(--v-bg-accent4-tertiary, 255, 231, 223, 1))',
+  'bg-accent5-primary': 'rgba(var(--v-bg-accent5-primary, 0, 187, 255, 1))',
+  'bg-accent5-secondary': 'rgba(var(--v-bg-accent5-secondary, 142, 223, 249, 1))',
+  'bg-accent5-tertiary': 'rgba(var(--v-bg-accent5-tertiary, 227, 247, 253, 1))',
+  'bg-accent6-primary': 'rgba(var(--v-bg-accent6-primary, 255, 130, 201, 1))',
+  'bg-accent6-secondary': 'rgba(var(--v-bg-accent6-secondary, 255, 199, 231, 1))',
+  'bg-accent6-tertiary': 'rgba(var(--v-bg-accent6-tertiary, 255, 227, 243, 1))',
+  'bg-accent7-primary': 'rgba(var(--v-bg-accent7-primary, 37, 159, 159, 1))',
+  'bg-accent7-secondary': 'rgba(var(--v-bg-accent7-secondary, 155, 212, 214, 1))',
+  'bg-accent7-tertiary': 'rgba(var(--v-bg-accent7-tertiary, 208, 239, 239, 1))',
+  'bg-accent8-primary': 'rgba(var(--v-bg-accent8-primary, 86, 61, 130, 1))',
+  'bg-accent8-secondary': 'rgba(var(--v-bg-accent8-secondary, 199, 162, 204, 1))',
+  'bg-accent8-tertiary': 'rgba(var(--v-bg-accent8-tertiary, 230, 214, 234, 1))',
+  'bg-accent9-primary': 'rgba(var(--v-bg-accent9-primary, 255, 191, 63, 1))',
+  'bg-accent9-secondary': 'rgba(var(--v-bg-accent9-secondary, 254, 215, 142, 1))',
+  'bg-accent9-tertiary': 'rgba(var(--v-bg-accent9-tertiary, 251, 226, 185, 1))',
+  'bg-accent10-primary': 'rgba(var(--v-bg-accent10-primary, 237, 122, 35, 1))',
+  'bg-accent10-secondary': 'rgba(var(--v-bg-accent10-secondary, 241, 146, 85, 1))',
+  'bg-accent10-tertiary': 'rgba(var(--v-bg-accent10-tertiary, 245, 187, 148, 1))',
+  'bg-divider': 'rgba(var(--v-bg-divider, 171, 198, 216, 1))',
+  'bg-divider-secondary': 'rgba(var(--v-bg-divider-secondary, 199, 217, 229, 1))',
+  'bg-disabled': 'rgba(var(--v-bg-disabled, 176, 180, 181, 1))',
+  'bg-tab': 'rgba(var(--v-bg-tab, 240, 243, 247, 1))',
+  'bg-tab-hover': 'rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))',
+  'bg-tab-selected': 'rgba(var(--v-bg-tab-selected, 32, 54, 69, 1))',
+  'bg-table-header': 'rgba(var(--v-bg-table-header, 240, 243, 247, 1))',
+  'bg-table-alt-row': 'rgba(var(--v-bg-table-alt-row, 245, 247, 247, 1))',
+  'bg-table-selected-row': 'rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))',
+  'bg-site-footer': 'rgba(var(--v-bg-site-footer, 51, 57, 61, 1))',
+  'bg-site-footer-action': 'rgba(var(--v-bg-site-footer-action, 171, 198, 216, 1))',
+  'bg-site-footer-action-hover': 'rgba(var(--v-bg-site-footer-action-hover, 199, 217, 229, 1))',
+  'bg-site-footer-action-active': 'rgba(var(--v-bg-site-footer-action-active, 143, 179, 203, 1))',
+  'bg-site-footer-field': 'rgba(var(--v-bg-site-footer-field, 89, 96, 99, 1))',
+  'bg-textarea-count': 'rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))',
+  'bg-table-row-hover': 'rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))',
+  'bg-table-row-selected-expanded': 'rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))',
+  'bg-app-header': 'rgba(var(--v-bg-app-header, 240, 243, 247, 0.88))',
+  'bg-selection-tile': 'rgba(var(--v-bg-selection-tile, 252, 252, 252, 1))',
+  'bg-selection-tile-hover': 'rgba(var(--v-bg-selection-tile-hover, 247, 247, 247, 1))',
+  'bg-selection-tile-selected': 'rgba(var(--v-bg-selection-tile-selected, 242, 247, 255, 1))',
+  'bg-selection-tile-selected-hover': 'rgba(var(--v-bg-selection-tile-selected-hover, 229, 239, 255, 1))',
+  'bg-loading-track': 'rgba(var(--v-bg-loading-track, 229, 239, 255, 1))',
+  'bg-loading-progress': 'rgba(var(--v-bg-loading-progress, 153, 192, 255, 1))',
+  'bg-toggle-switch': 'rgba(var(--v-bg-toggle-switch, 107, 116, 125, 0.7))',
+  'bg-toggle-switch-hover': 'rgba(var(--v-bg-toggle-switch-hover, 107, 116, 125, 1))',
+  'bg-toggle-switch-selected-disabled': 'rgba(var(--v-bg-toggle-switch-selected-disabled, 153, 192, 255, 1))',
+  'bg-segment-control': 'rgba(var(--v-bg-segment-control, 89, 96, 99, 0.1))',
+  'bg-segment-hover': 'rgba(var(--v-bg-segment-hover, 205, 209, 211, 1))',
+  'bg-slider-handle': 'rgba(var(--v-bg-slider-handle, 252, 252, 252, 1))',
+  'bg-chip': 'rgba(var(--v-bg-chip, 32, 54, 69, 0.06))',
+  'bg-chip-hover': 'rgba(var(--v-bg-chip-hover, 32, 54, 69, 0.12))',
+  'bg-chip-active': 'rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2))',
+  'bg-keypad-btn-active': 'rgba(var(--v-bg-keypad-btn-active, 229, 239, 255, 1))',
+  'bg-action-secondary-hover': 'rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))',
+  'bg-action-secondary-active': 'rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))'
+};
+// prettier-ignore
+export const BorderColorMap = {
+  'border-color-action': 'rgba(var(--v-border-color-action, 19, 98, 226, 1))',
+  'border-color-action-hover': 'rgba(var(--v-border-color-action-hover, 4, 112, 236, 1))',
+  'border-color-action-active': 'rgba(var(--v-border-color-action-active, 29, 65, 195, 1))',
+  'border-color-danger': 'rgba(var(--v-border-color-danger, 230, 50, 87, 1))',
+  'border-color-danger-hover': 'rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))',
+  'border-color-danger-active': 'rgba(var(--v-border-color-danger-active, 189, 41, 71, 1))',
+  'border-color-input-field': 'rgba(var(--v-border-color-input-field, 171, 198, 216, 1))',
+  'border-color-input-field-hover': 'rgba(var(--v-border-color-input-field-hover, 115, 160, 190, 1))',
+  'border-color-input-field-focus': 'rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))',
+  'border-color-input-field-danger': 'rgba(var(--v-border-color-input-field-danger, 230, 50, 87, 1))',
+  'border-color-input-field-danger-hover': 'rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1))',
+  'border-color-input-field-danger-focus': 'rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))',
+  'border-color-input-field-disabled': 'rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))',
+  'border-color-sidebar-item-focus': 'rgba(var(--v-border-color-sidebar-item-focus, 19, 98, 226, 1))',
+  'border-color-success': 'rgba(var(--v-border-color-success, 1, 128, 31, 1))',
+  'border-color-secondary-btn-disabled': 'rgba(var(--v-border-color-secondary-btn-disabled, 176, 180, 181, 1))',
+  'border-color-chip': 'rgba(var(--v-border-color-chip, 205, 209, 211, 1))',
+  'border-color-divider': 'rgba(var(--v-border-color-divider, 171, 198, 216, 1))',
+  'border-color-divider-secondary': 'rgba(var(--v-border-color-divider-secondary, 199, 217, 229, 1))',
+  'border-color-tile-selected': 'rgba(var(--v-border-color-tile-selected, 19, 98, 226, 1))',
+  'border-color-tile-selected-hover': 'rgba(var(--v-border-color-tile-selected-hover, 4, 112, 236, 1))',
+  'border-color-table-divider': 'rgba(var(--v-border-color-table-divider, 171, 198, 216, 1))',
+  'border-color-slider-handle': 'rgba(var(--v-border-color-slider-handle, 199, 217, 229, 1))'
+};

package/dist/collection/constants/tokens/overridableColorTokens.js

@@ -383,10 +383,10 @@ export const OverridableColorTokens = [
         ? baseColor.clone()
         : undefined;
       if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
-        value = tinycolor({ a: 0.9, b: 255, r: 255, g: 255 });
+        value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
       }
       else {
-        value = tinycolor({ a: 0.86, b: 15, r: 15, g: 15 });
+        value = tinycolor({ a: 0.86, r: 15, b: 15, g: 15 });
       }
       return formatValue(value);
     },
@@ -436,7 +436,7 @@ export const OverridableColorTokens = [
         value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
       }
       else {
-        value = tinycolor({ a: 0.86, b: 15, r: 15, g: 15 });
+        value = tinycolor({ a: 0.86, r: 15, b: 15, g: 15 });
       }
       return formatValue(value);
     },

package/dist/collection/constants/tokens/shadows.js

@@ -3,3 +3,15 @@
 /* tslint:disable */
 // prettier-ignore
 export const Shadows = ["shadow-card", "shadow-modal", "shadow-popover", "shadow-form-field", "shadow-dropdown-menu", "shadow-app-header", "shadow-modal-header", "shadow-modal-footer", "shadow-modal-footer-no-scroll"];
+// prettier-ignore
+export const ShadowMap = {
+  'shadow-card': 'var(--v-shadow-card, 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.02))',
+  'shadow-modal': 'var(--v-shadow-modal, 0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16))',
+  'shadow-popover': 'var(--v-shadow-popover, 0px 0px 88px 0px rgba(2, 2, 15, 0.01), 0px 0px 32px 0px rgba(2, 2, 15, 0.02), 0px 4px 72px 0px rgba(2, 2, 15, 0.06))',
+  'shadow-form-field': 'var(--v-shadow-form-field, 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1))',
+  'shadow-dropdown-menu': 'var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1))',
+  'shadow-app-header': 'var(--v-shadow-app-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-header': 'var(--v-shadow-modal-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-footer': 'var(--v-shadow-modal-footer, 0px -2px 8px 0px rgba(45, 76, 97, 0.2), 0px -1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-footer-no-scroll': 'var(--v-shadow-modal-footer-no-scroll, 0px -1px 0px 0px rgba(45, 76, 97, 0.15))'
+};

package/dist/collection/constants/ui.js

@@ -61,3 +61,5 @@ export const VegaNativeEventName = [
   'dropdownHide',
   'dropdownSearch',
 ];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/decorators/property-decorators/injectKeyboardManager.js

@@ -14,7 +14,8 @@ export function InjectKeyboardManager(listenersRetriever) {
     const { connectedCallback, componentDidLoad, disconnectedCallback } = componentClass;
     /* eslint-disable jsdoc/require-jsdoc */
     componentClass.connectedCallback = function () {
-      this.keyboardEventListeners && KeyboardManager.register(this.keyboardEventListeners);
+      const { keyboardEventListeners = [] } = this;
+      KeyboardManager.register(keyboardEventListeners);
       return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
     };
     componentClass.componentDidLoad = function () {
@@ -23,7 +24,8 @@ export function InjectKeyboardManager(listenersRetriever) {
       return componentDidLoad === null || componentDidLoad === void 0 ? void 0 : componentDidLoad.call(this);
     };
     componentClass.disconnectedCallback = function () {
-      KeyboardManager.deregister(this.keyboardEventListeners);
+      const { keyboardEventListeners = [] } = this;
+      KeyboardManager.deregister(keyboardEventListeners);
       return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
     };
   };

package/dist/collection/decorators/property-decorators/tests/injectElementAppenderProxy.test.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MockHTMLElement } from '@stencil/core/mock-doc';
 import { triggerMouseEvent } from '../../../utils/testUtils';
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import { InjectElementAppender } from '../injectElementAppender';
 describe('@InjectElementAppender() decorator test suite', () => {
   const mockedComponentDidLoadMethod = jest.fn();

package/dist/collection/decorators/property-decorators/tests/injectKeyboardManager.test.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MockHTMLElement } from '@stencil/core/mock-doc';
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import KeyboardManager from '../../../helpers/keyboard/keyboardManager';
 import { InjectKeyboardManager } from '../injectKeyboardManager';
 describe('@InjectKeyboardManager() decorator test suite', () => {
@@ -79,5 +79,13 @@ describe('@InjectKeyboardManager() decorator test suite', () => {
       mockedComponent.disconnectedCallback();
       expect(mockedComponentDisconnectedCallbackMethod).toBeCalledTimes(0);
     });
+    test('should not throw error when disconnectedCallback before component loaded', () => {
+      const mockedComponent1 = new MockedComponent();
+      mockedComponent1.host = new MockHTMLElement('body', 'div');
+      mockedComponent1.componentDidLoad();
+      const mockedComponent2 = new MockedComponent();
+      mockedComponent2.host = new MockHTMLElement('body', 'div');
+      expect(() => mockedComponent2.disconnectedCallback()).not.toThrowError();
+    });
   });
 });

package/dist/collection/helpers/change-manager/subject/dom-node-subject/domNodeSubjectFactory.js

@@ -42,7 +42,7 @@ class DomNodeSubjectFactory {
    * @returns {DomNodeSubject} dom node subject object
    */
   setSubject(node, eventId) {
-    const subjectTitle = `${node.tagName}:${eventId.getVegaName()}`;
+    const subjectTitle = `${node.tagName}:${eventId.getName()}`;
     const subject = new DomNodeSubject(subjectTitle, node);
     if (!this.cache.get(node)) {
       this.cache.set(node, new Map());

package/dist/collection/helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory.js

@@ -19,10 +19,10 @@ export class DomNodeSubjectObserverFactory {
    * @param {(input?: unknown) => void} callback the callback handle
    * @param {(input?: unknown) => boolean} acceptableHandle the acceptable handle
    */
-  static addObserverToNode(node, eventId, callback, acceptableHandle) {
+  static addUniqueObserverToNode(node, eventId, callback, acceptableHandle) {
     if (node) {
       const domNodesObserver = new Observer(typeof acceptableHandle === 'function' ? acceptableHandle.bind(null) : domAcceptableHandle, callback);
-      DomNodeSubjectObserverFactory.removeObserverFromNode(node, eventId);
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(node, eventId);
       changeManager.register(domNodesSubjectFactory.getSubject(node, eventId), domNodesObserver);
     }
   }
@@ -32,7 +32,7 @@ export class DomNodeSubjectObserverFactory {
    * @param {HTMLElement} node - The `node` parameter is an `HTMLElement` object representing an HTML element in the DOM (Document Object Model).
    * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
    */
-  static removeObserverFromNode(node, eventId) {
+  static removeUniqueObserverFromNode(node, eventId) {
     if (domNodesSubjectFactory.isExist(node, eventId)) {
       changeManager.clearObserversBySubject(domNodesSubjectFactory.getSubject(node, eventId));
     }