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

package/dist/types/constants/misc.d.ts

@@ -1,5 +1,3 @@
-import { SidebarTopLevelItem } from '../components/vega-sidenav/types';
-export declare const SIDEBAR_SOURCE_MOCK_DATA: SidebarTopLevelItem[];
 export declare const UUID: string;
 export declare const INPUT_TEXT_FOCUS_WIDTH: number;
 export declare const HEARTLAND_TOS_URL: string;

package/dist/types/constants/tokens/borderRadius.d.ts

@@ -1,3 +1,3 @@
 export declare const BorderRadius: {
-  [key in "2" | "4" | "8" | "12" | "16" | "24" | "32" | "48" | "none" | "full"]: number;
+  [key in "rounded-none" | "rounded-full" | "rounded-2" | "rounded-4" | "rounded-8" | "rounded-12" | "rounded-16" | "rounded-24" | "rounded-32" | "rounded-48"]: number;
 };

package/dist/types/constants/tokens/borders.d.ts

@@ -0,0 +1,4 @@
+export declare const Borders: readonly ["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"];
+export declare const BorderMap: {
+  [key in typeof Borders[number]]: string;
+};

package/dist/types/constants/tokens/colors.d.ts

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

package/dist/types/constants/tokens/shadows.d.ts

@@ -1 +1,4 @@
 export declare const Shadows: readonly ["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"];
+export declare const ShadowMap: {
+  [key in typeof Shadows[number]]: string;
+};

package/dist/types/constants/tokens/themes/darkModeBorderTokens.d.ts

@@ -0,0 +1 @@
+export declare const DarkModeBorderTokens: Record<string, string>;

package/dist/types/constants/tokens/themes/darkModeColorTokens.d.ts

@@ -0,0 +1 @@
+export declare const DarkModeColorTokens: Record<string, string>;

package/dist/types/constants/tokens/themes/darkModeRingTokens.d.ts

@@ -0,0 +1 @@
+export declare const DarkModeRingTokens: Record<string, string>;

package/dist/types/constants/tokens/themes/darkModeShadowTokens.d.ts

@@ -0,0 +1 @@
+export declare const DarkModeShadowTokens: Record<string, string>;

package/dist/types/constants/tokens/typography.d.ts

@@ -2,3 +2,9 @@ export declare const Typography: {
   [key in "v-font-h1" | "M:v-font-h1" | "L:v-font-h1" | "XL:v-font-h1" | "v-font-h2" | "M:v-font-h2" | "L:v-font-h2" | "XL:v-font-h2" | "v-font-h3" | "M:v-font-h3" | "L:v-font-h3" | "XL:v-font-h3" | "v-font-h4" | "M:v-font-h4" | "L:v-font-h4" | "XL:v-font-h4" | "v-font-h5" | "M:v-font-h5" | "L:v-font-h5" | "XL:v-font-h5" | "v-font-h6" | "M:v-font-h6" | "L:v-font-h6" | "XL:v-font-h6" | "v-font-p1-short" | "M:v-font-p1-short" | "L:v-font-p1-short" | "XL:v-font-p1-short" | "v-font-p1-long" | "M:v-font-p1-long" | "L:v-font-p1-long" | "XL:v-font-p1-long" | "v-font-p2-short" | "M:v-font-p2-short" | "L:v-font-p2-short" | "XL:v-font-p2-short" | "v-font-p2-long" | "M:v-font-p2-long" | "L:v-font-p2-long" | "XL:v-font-p2-long" | "v-font-btn-label" | "M:v-font-btn-label" | "L:v-font-btn-label" | "XL:v-font-btn-label" | "v-font-btn-label-lg" | "M:v-font-btn-label-lg" | "L:v-font-btn-label-lg" | "XL:v-font-btn-label-lg" | "v-font-btn-label-sm" | "M:v-font-btn-label-sm" | "L:v-font-btn-label-sm" | "XL:v-font-btn-label-sm" | "v-font-btn-link-label" | "M:v-font-btn-link-label" | "L:v-font-btn-link-label" | "XL:v-font-btn-link-label" | "v-font-btn-link-label-lg" | "M:v-font-btn-link-label-lg" | "L:v-font-btn-link-label-lg" | "XL:v-font-btn-link-label-lg" | "v-font-btn-link-label-sm" | "M:v-font-btn-link-label-sm" | "L:v-font-btn-link-label-sm" | "XL:v-font-btn-link-label-sm" | "v-font-field-label" | "M:v-font-field-label" | "L:v-font-field-label" | "XL:v-font-field-label" | "v-font-field-label-sm" | "M:v-font-field-label-sm" | "L:v-font-field-label-sm" | "XL:v-font-field-label-sm" | "v-font-field-label-xs" | "M:v-font-field-label-xs" | "L:v-font-field-label-xs" | "XL:v-font-field-label-xs" | "v-font-field-label-lg" | "M:v-font-field-label-lg" | "L:v-font-field-label-lg" | "XL:v-font-field-label-lg" | "v-font-field-label-em" | "M:v-font-field-label-em" | "L:v-font-field-label-em" | "XL:v-font-field-label-em" | "v-font-field-label-sm-em" | "M:v-font-field-label-sm-em" | "L:v-font-field-label-sm-em" | "XL:v-font-field-label-sm-em" | "v-font-field-label-xs-em" | "M:v-font-field-label-xs-em" | "L:v-font-field-label-xs-em" | "XL:v-font-field-label-xs-em" | "v-font-field-label-lg-em" | "M:v-font-field-label-lg-em" | "L:v-font-field-label-lg-em" | "XL:v-font-field-label-lg-em" | "v-font-field-value" | "M:v-font-field-value" | "L:v-font-field-value" | "XL:v-font-field-value" | "v-font-field-value-sm" | "M:v-font-field-value-sm" | "L:v-font-field-value-sm" | "XL:v-font-field-value-sm" | "v-font-field-value-em" | "M:v-font-field-value-em" | "L:v-font-field-value-em" | "XL:v-font-field-value-em" | "v-font-field-value-disabled" | "M:v-font-field-value-disabled" | "L:v-font-field-value-disabled" | "XL:v-font-field-value-disabled" | "v-font-sidebar-link" | "M:v-font-sidebar-link" | "L:v-font-sidebar-link" | "XL:v-font-sidebar-link" | "v-font-sidebar-link-em" | "M:v-font-sidebar-link-em" | "L:v-font-sidebar-link-em" | "XL:v-font-sidebar-link-em" | "v-font-footnote1-short" | "M:v-font-footnote1-short" | "L:v-font-footnote1-short" | "XL:v-font-footnote1-short" | "v-font-footnote1-long" | "M:v-font-footnote1-long" | "L:v-font-footnote1-long" | "XL:v-font-footnote1-long" | "v-font-footnote2-short" | "M:v-font-footnote2-short" | "L:v-font-footnote2-short" | "XL:v-font-footnote2-short" | "v-font-footnote2-long" | "M:v-font-footnote2-long" | "L:v-font-footnote2-long" | "XL:v-font-footnote2-long" | "v-font-h-modal" | "M:v-font-h-modal" | "L:v-font-h-modal" | "XL:v-font-h-modal" | "v-font-keypad-label" | "M:v-font-keypad-label" | "L:v-font-keypad-label" | "XL:v-font-keypad-label" | "v-font-keypad-label-large" | "M:v-font-keypad-label-large" | "L:v-font-keypad-label-large" | "XL:v-font-keypad-label-large"]: object;
 };
 export declare const TypographyKeys: readonly ["font-h1", "font-h2", "font-h3", "font-h4", "font-h5", "font-h6", "font-p1-short", "font-p1-long", "font-p2-short", "font-p2-long", "font-btn-label", "font-btn-label-lg", "font-btn-label-sm", "font-btn-link-label", "font-btn-link-label-lg", "font-btn-link-label-sm", "font-field-label", "font-field-label-sm", "font-field-label-xs", "font-field-label-lg", "font-field-label-em", "font-field-label-sm-em", "font-field-label-xs-em", "font-field-label-lg-em", "font-field-value", "font-field-value-sm", "font-field-value-em", "font-field-value-disabled", "font-sidebar-link", "font-sidebar-link-em", "font-footnote1-short", "font-footnote1-long", "font-footnote2-short", "font-footnote2-long", "font-h-modal", "font-keypad-label", "font-keypad-label-large"];
+export declare const TypographyUrls: {
+  [id: string]: {
+    name: string;
+    url: string;
+  };
+};

package/dist/types/constants/ui.d.ts

@@ -9,3 +9,5 @@ export declare const FlexDirections: readonly ["row", "col", "row-reverse", "col
 export declare const FlexAlignItem: readonly ["start", "center", "end", "baseline", "stretch"];
 export declare const FlexJustifyContent: readonly ["start", "center", "end", "space-around", "space-between", "space-evenly"];
 export declare const BoxDisplay: readonly ["block", "none"];
+export declare const VegaNativeEventName: readonly ["change", "click", "focus", "blur", "close", "modalOpen", "validate", "formSubmit", "formReset", "rowClick", "selectChange", "selectAllChange", "pageSizeChange", "dropdownClick", "create", "search", "hide", "show", "popoverShow", "popoverHide", "cancel", "remove", "pageUpdate", "currentStepUpdate", "toggleStatus", "stateUpdate", "groupClick", "menuClick", "accordionExpand", "dropdownShow", "dropdownHide", "dropdownSearch"];
+export declare const CssStates: readonly ["default", "hover", "active", "focus-visible"];

package/dist/types/decorators/property-decorators/tests/injectElementAppenderProxy.test.d.ts

@@ -1 +1 @@
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';

package/dist/types/decorators/property-decorators/tests/injectKeyboardManager.test.d.ts

@@ -1 +1 @@
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';

package/dist/types/helpers/{observer → change-manager}/changeManager.d.ts

@@ -1,5 +1,5 @@
-import { Observer } from './observer';
-import { Subject } from './subject';
+import { Observer } from './observer/observer';
+import { Subject } from './subject/subjectInterface';
 /**
  * The ChangeManager is a class that allows observers to register themselves to a subject
  * and notify the observer if signaled by subject
@@ -25,6 +25,12 @@ declare class ChangeManager {
    * @param {Observer<unknown>} observer - The observer to be unregistered.
    */
   unregister(subject: Subject, observer: Observer<unknown>): void;
+  /**
+   * The function clears the observers for a given subject in a pub-sub map.
+   *
+   * @param {Subject} subject - The subject parameter is an object that represents the subject of the observer pattern. It is used as a key to identify the observers that are subscribed to it.
+   */
+  clearObserversBySubject(subject: Subject): void;
   /**
    * If the subject is in the map, then notify all observers of the subject
    *

package/dist/types/helpers/change-manager/subject/dom-node-subject/domNodeSubject.d.ts

@@ -0,0 +1,22 @@
+import { SubjectTitle } from '../static-subject/staticSubjectTitle';
+import { Subject } from '../subjectInterface';
+/** The DomNodeSubject class represents a subject related to DOM nodes. */
+export declare class DomNodeSubject implements Subject {
+  private title;
+  private host;
+  /**
+   * The constructor function takes a SubjectTitle parameter and assigns it to the private title property.
+   *
+   * @param {SubjectTitle} title - The "title" parameter is a private property of the class that is of type "SubjectTitle".
+   * @param {HTMLElement} host - The `host` parameter is an HTMLElement that represents the container or
+   * parent element where the subject title will be displayed. It is used to specify the location where
+   * the title will be rendered on the web page.
+   */
+  constructor(title: SubjectTitle, host: HTMLElement);
+  /**
+   * The getDescription function returns the title of an object as a string.
+   *
+   * @returns {string} The title of the object.
+   */
+  getDescription(): string;
+}

package/dist/types/helpers/change-manager/subject/dom-node-subject/domNodeSubjectFactory.d.ts

@@ -0,0 +1,32 @@
+import { DomNodeSubject } from './domNodeSubject';
+import { VegaEventIDInterface } from '../../../event-manager/eventID/vegaEventIdInterface';
+/** The `DomNodesSubjectFactory` class is responsible for managing and caching `DomNodeSubject` objects associated with HTML elements. */
+declare class DomNodeSubjectFactory {
+  private cache;
+  /**
+   * The function `getSubject` returns the subject associated with a given node and event ID, either from the cache or by setting it if it doesn't exist.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an HTMLElement, which represents an element in the HTML document.
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of the event for which we want to get the subject.
+   * @returns {DomNodeSubject} a `DomNodeSubject` object.
+   */
+  getSubject(node: HTMLElement, eventId: VegaEventIDInterface): DomNodeSubject;
+  /**
+   * The function checks if a given node exists in the cache and if it has a specific event ID.
+   *
+   * @param {HTMLElement} node - The "node" parameter is an HTMLElement, which represents an HTML element in the DOM (Document Object Model). It could be any HTML element such as a div, span, button, etc.
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents an event ID that is used to identify a specific event.
+   * @returns {boolean} a boolean value.
+   */
+  isExist(node: HTMLElement, eventId: VegaEventIDInterface): boolean;
+  /**
+   * The function `setSubject` creates a new `DomNodeSubject` and associates it with a given `node` and `eventId`, and then returns the created subject.
+   *
+   * @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.
+   * @returns {DomNodeSubject} dom node subject object
+   */
+  private setSubject;
+}
+declare const _default: DomNodeSubjectFactory;
+export default _default;

package/dist/types/helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory.d.ts

@@ -0,0 +1,20 @@
+import { VegaEventIDInterface } from '../../../event-manager/eventID/vegaEventIdInterface';
+/** The `DomNodeSubjectObserverFactory` class provides methods to add and remove observers to HTML element nodes. */
+export declare class DomNodeSubjectObserverFactory {
+  /**
+   * add observer to a given HTML element node
+   *
+   * @param {HTMLElement} node the node ref
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   * @param {(input?: unknown) => void} callback the callback handle
+   * @param {(input?: unknown) => boolean} acceptableHandle the acceptable handle
+   */
+  static addUniqueObserverToNode(node: HTMLElement, eventId: VegaEventIDInterface, callback: (input?: unknown) => void, acceptableHandle?: (input?: unknown) => boolean): void;
+  /**
+   * The function removes observers from a given HTML element node.
+   *
+   * @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 removeUniqueObserverFromNode(node: HTMLElement, eventId: VegaEventIDInterface): void;
+}

package/dist/types/helpers/change-manager/subject/static-subject/staticSubject.d.ts

@@ -0,0 +1,20 @@
+import { SubjectTitle } from './staticSubjectTitle';
+import { Subject } from '../subjectInterface';
+/**
+ * A subject class is used for register by observer
+ */
+export declare class StaticSubject implements Subject {
+  private title;
+  /**
+   * It takes a subject title and returns a SubjectTitle object
+   *
+   * @param {SubjectTitle} title - The title of the subject.
+   */
+  constructor(title: SubjectTitle);
+  /**
+   * Get the title of the subject
+   *
+   * @returns {SubjectTitle} The title of the subject.
+   */
+  getDescription(): string;
+}

package/dist/types/helpers/{observer/subject.d.ts → change-manager/subject/static-subject/staticSubjectTitle.d.ts}

@@ -1,22 +1,5 @@
-export declare type SubjectTitle = 'SIDENAV_LINK_SELECTED_TOPIC' | 'LEFT_NAV_LINK_SELECTED_TOPIC' | 'ACCORDION_EXPAND_TOPIC' | 'FORM_RESET_OPERATION_TRIGGERED' | 'FORM_FIELD_ELEMENT_DISCONNECTED' | 'FORM_SUBMIT' | 'FORM_RESET' | 'RADIO_GROUP_DISABLED_CHANGE' | 'CHECKBOX_GROUP_DISABLED_CHANGE' | 'FORM_FIELD_PENDING_VALID_CHANGE' | 'TAB_PANEL_ADD_OR_DEL_TO_GROUP' | 'TABLE_EXPAND_ROW' | 'TABLE_ROW_SELECTION' | 'TABLE_ROW_SELECTION_ALL' | 'TABLE_SELECTION' | 'TABLE_ROW_CLICK' | 'SUB_STATE_CHANGE' | 'FIELD_ERROR_MESSAGE_CHANGE' | 'DROPDOWN_ITEM_CLICK';
-/**
- * A subject class is used for register by observer
- */
-export declare class Subject {
-  private title;
-  /**
-   * It takes a subject title and returns a SubjectTitle object
-   *
-   * @param {SubjectTitle} title - The title of the subject.
-   */
-  constructor(title: SubjectTitle);
-  /**
-   * Get the title of the subject
-   *
-   * @returns {SubjectTitle} The title of the subject.
-   */
-  getTitle(): SubjectTitle;
-}
+import { Subject } from '../subjectInterface';
+export declare type SubjectTitle = 'SIDENAV_LINK_SELECTED_TOPIC' | 'LEFT_NAV_LINK_SELECTED_TOPIC' | 'ACCORDION_EXPAND_TOPIC' | 'FORM_RESET_OPERATION_TRIGGERED' | 'FORM_FIELD_ELEMENT_DISCONNECTED' | 'FORM_SUBMIT' | 'FORM_RESET' | 'RADIO_GROUP_DISABLED_CHANGE' | 'CHECKBOX_GROUP_DISABLED_CHANGE' | 'FORM_FIELD_PENDING_VALID_CHANGE' | 'TAB_PANEL_ADD_OR_DEL_TO_GROUP' | 'TABLE_EXPAND_ROW' | 'TABLE_ROW_SELECTION' | 'TABLE_ROW_SELECTION_ALL' | 'TABLE_SELECTION' | 'TABLE_ROW_CLICK' | 'SUB_STATE_CHANGE' | 'FIELD_ERROR_MESSAGE_CHANGE' | 'DROPDOWN_ITEM_CLICK' | 'CHECKBOX_VALUE_CHANGE' | 'RADIO_VALUE_CHANGE' | 'FORM_ELEMENT_VALUE_CHANGE' | 'FORM_EMEMENT_VALIDATE' | 'FIELD_ERROR_STATE_CHANGE';
 export declare const SIDENAV_LINK_SELECTED_TOPIC: Subject;
 export declare const LEFT_NAV_LINK_SELECTED_TOPIC: Subject;
 export declare const ACCORDION_EXPAND_TOPIC: Subject;
@@ -35,3 +18,8 @@ export declare const TABLE_ROW_CLICK: Subject;
 export declare const SUB_STATE_CHANGE: Subject;
 export declare const FIELD_ERROR_MESSAGE_CHANGE: Subject;
 export declare const DROPDOWN_ITEM_CLICK: Subject;
+export declare const CHECKBOX_VALUE_CHANGE: Subject;
+export declare const RADIO_VALUE_CHANGE: Subject;
+export declare const FORM_ELEMENT_VALUE_CHANGE: Subject;
+export declare const FORM_ELEMENT_VALIDATE: Subject;
+export declare const FIELD_ERROR_STATE_CHANGE: Subject;

package/dist/types/helpers/change-manager/subject/subjectInterface.d.ts

@@ -0,0 +1,3 @@
+export interface Subject {
+  getDescription(): string;
+}

package/dist/types/helpers/change-manager/test/changeManager.test.d.ts

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

package/dist/types/helpers/change-manager/test/domNodeSubjectFactory.test.d.ts

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

package/dist/types/helpers/chart/graphContextFactory.d.ts

@@ -8,5 +8,5 @@ export declare class GraphContextFactory {
    * @param {HTMLElement} container - HTMLElement - the HTML element that will contain the chart/graph.
    * @returns {SVGElement | HTMLCanvasElement} either a HTMLCanvasElement or an SVGElement depending on the value of the `mode` parameter.
    */
-  static get<T extends ChartGraphMode>(mode: T | undefined, container: HTMLElement): SVGElement | HTMLCanvasElement;
+  static get<T extends ChartGraphMode>(mode: T | undefined, container: HTMLElement | ShadowRoot): SVGElement | HTMLCanvasElement;
 }

package/dist/types/helpers/event-manager/event-delegated/baseStrategy.d.ts

@@ -0,0 +1,60 @@
+import { VegaComponentName, VegaNativeEventNameType } from '../../../types/ui.type';
+import { JQueryDelegatedEventStrategy } from './jqueryDelegatedEventStrategy';
+/** The code is defining an abstract class called `BaseStrategy` that implements the `JQueryDelegatedEventStrategy` interface. */
+export declare abstract class BaseStrategy implements JQueryDelegatedEventStrategy {
+  /**
+   * The vega component tag name
+   */
+  abstract vegaComponentName: VegaComponentName;
+  /**
+   * The native event name, such as `click`, `change`, `focus`, `blur`
+   */
+  abstract eventName: VegaNativeEventNameType;
+  /**
+   * The function "getHostName" returns the VegaComponentName.
+   *
+   * @returns {VegaComponentName} The method is returning the value of the variable "vegaComponentName" of type VegaComponentName.
+   */
+  getHostName(): VegaComponentName;
+  /**
+   * The function "getEventName" returns the name of an event as a string.
+   *
+   * @returns {VegaNativeEventNameType} a string value, which is the eventName.
+   */
+  getEventName(): VegaNativeEventNameType;
+  /**
+   * The function handles a click event on a specified element and dispatches a custom event with an optional detail.
+   *
+   * @param {HTMLElement} vegaHost - The `vegaHost` parameter is an HTMLElement that represents the host element where the event will be dispatched.
+   * @param {unknown} [detail] - The `detail` parameter is an optional argument that represents additional information or data that can be passed along with the event. It can be of any type, as it is defined as `unknown`.
+   * @returns {Event} a custom event of type `Event`.
+   */
+  handle(vegaHost: HTMLElement, detail?: unknown): Event;
+  /**
+   * The function copies attributes from one HTML element to another, excluding attributes starting with "on", "id".
+   *
+   * @param {HTMLElement} element - The `element` parameter is an HTMLElement object that represents the
+   * source element from which the attributes will be copied.
+   * @param {HTMLElement} target - The target parameter is an HTMLElement where the attributes of the
+   * element parameter will be copied to.
+   */
+  protected copyAttributesToTarget(element: HTMLElement, target: HTMLElement): void;
+  /**
+   * The function creates and returns a new event object based on the given event name.
+   *
+   * @param {VegaNativeEventNameType} eventName - The eventName parameter is the name of the event that
+   * you want to create. It can be any valid event name, such as "click", "keydown", "mouseover", etc.
+   * @returns {Event} a cloned event object.
+   */
+  protected createEvent(eventName: VegaNativeEventNameType): Event;
+  /**
+   * The method need to create an element which should be delegated from vega component
+   *
+   * @param {HTMLElement} delegatedTarget The vega component element
+   * @returns {HTMLElement} The event target
+   * @example $('vega-button').on('click','button',()=>{})
+   * vega-button: The delegated target element
+   * button: The element should be return
+   */
+  abstract createEventTarget(delegatedTarget: HTMLElement): HTMLElement;
+}

package/dist/types/helpers/event-manager/event-delegated/jqueryDelegatedEventStrategy.d.ts

@@ -0,0 +1,7 @@
+import { VegaComponentName, VegaNativeEventNameType } from '../../../types/ui.type';
+export interface JQueryDelegatedEventStrategy {
+  getHostName(): VegaComponentName;
+  getEventName(): VegaNativeEventNameType;
+  handle(vegaHost: HTMLElement, detail?: unknown): Event;
+  createEventTarget(vegaHost: HTMLElement): HTMLElement;
+}

package/dist/types/helpers/event-manager/event-delegated/jqueryDelegatedStrategyController.d.ts

@@ -0,0 +1,44 @@
+import { Nullable } from '../../../types/general';
+import { VegaEventID } from '../eventID/vegaEventId';
+import { EventSemanticsConfig } from '../internalVegaEventManager';
+import { JQueryDelegatedEventStrategy } from './jqueryDelegatedEventStrategy';
+export declare type DelegatedStrategyMapType = Map<string, JQueryDelegatedEventStrategy>;
+/** The `JQueryDelegatedStrategyController` class manages delegated event strategies for different HTML elements in a TypeScript application. */
+declare class JQueryDelegatedStrategyController {
+  private strategyRegistry;
+  /**
+   * The constructor initializes a registry of update strategies for various input events in a Vega application.
+   */
+  constructor();
+  /**
+   * The function checks if a given event on a specific HTML element is supported for delegation.
+   *
+   * @param {HTMLElement} host - The `host` parameter is an HTMLElement, which represents the element on which the event listener is attached.
+   * @param {VegaEventID} eventId - The `eventName` parameter is a string that represents the name of the event.
+   * @returns {boolean} a boolean value.
+   */
+  isSupportDelegated(host: HTMLElement, eventId: VegaEventID): boolean;
+  /**
+   * The function updates the strategy registry with custom strategies based on the event semantics configuration.
+   *
+   * @param {EventSemanticsConfig} eventSemantics - The parameter `eventSemantics` is of type `EventSemanticsConfig`. It is an object that contains two properties: `global` and `components`.
+   */
+  updateRegistryFromEventSemantics(eventSemantics: EventSemanticsConfig): void;
+  /**
+   * The function returns a delegated event strategy based on the host element and event name.
+   *
+   * @param {HTMLElement} host - The `host` parameter is an HTMLElement that represents the element on
+   * which the event strategy is being applied. It is the element to which the event listener is attached.
+   * @param {VegaEventID} eventId - The `eventName` parameter is a string that represents the name of the event for which you want to retrieve the strategy.
+   * @returns {Nullable<JQueryDelegatedEventStrategy>} a Nullable<JQueryDelegatedEventStrategy>.
+   */
+  getStrategy(host: HTMLElement, eventId: VegaEventID): Nullable<JQueryDelegatedEventStrategy>;
+  /**
+   * The function `overrideCurrentStrategy` updates the strategy registry with a new strategy for a specific host and event.
+   *
+   * @param {JQueryDelegatedEventStrategy[]} strategies - The parameter "strategy" is of type "JQueryDelegatedEventStrategy".
+   */
+  private updateStrategyRegistry;
+}
+declare const _default: JQueryDelegatedStrategyController;
+export default _default;

package/dist/types/helpers/event-manager/event-delegated/vegaButtonClickStrategy.d.ts

@@ -0,0 +1,16 @@
+import { VegaComponentName, VegaNativeEventNameType } from '../../../types/ui.type';
+import { BaseStrategy } from './baseStrategy';
+/** The VegaButtonClickStrategy class is responsible for creating a button element when a click event is triggered on a VegaButton component. */
+export declare class VegaButtonClickStrategy extends BaseStrategy {
+  eventName: VegaNativeEventNameType;
+  vegaComponentName: VegaComponentName;
+  /**
+   * The function creates a new HTML button element based on the properties of a delegated target.
+   *
+   * @param {HTMLElement} delegatedTarget - The delegatedTarget parameter is of type
+   * HTMLVegaButtonElement, which is a custom element that extends the HTMLButtonElement. It represents
+   * the target button element that will be delegated to create a new button element.
+   * @returns {HTMLButtonElement} an HTMLButtonElement.
+   */
+  createEventTarget(delegatedTarget: HTMLVegaButtonElement): HTMLButtonElement;
+}

package/dist/types/helpers/event-manager/event-delegated/vegaCheckboxChangeStrategy.d.ts

@@ -0,0 +1,15 @@
+import { VegaComponentName, VegaNativeEventNameType } from '../../../types/ui.type';
+import { BaseStrategy } from './baseStrategy';
+/** The VegaCheckboxChangeStrategy class is responsible for creating an event target and handling the change event for Vega checkboxes. */
+export declare class VegaCheckboxChangeStrategy extends BaseStrategy {
+  eventName: VegaNativeEventNameType;
+  vegaComponentName: VegaComponentName;
+  /**
+   * The function creates and returns a checkbox input element with the same name as the given delegated target.
+   *
+   * @param {HTMLElement} delegatedTarget - The delegatedTarget parameter is of type
+   * HTMLVegaCheckboxElement, which is a custom element representing a checkbox component in the Vega UI framework.
+   * @returns {HTMLInputElement} an HTMLInputElement.
+   */
+  createEventTarget(delegatedTarget: HTMLVegaCheckboxElement): HTMLInputElement;
+}