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

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

@@ -4,22 +4,44 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Element, Host, h, Prop } from '@stencil/core';
+import { Component, Element, Host, h, Prop, Watch, State } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { formatAndValidResponsiveToken } from '../../utils/designToken';
 import { arrayToClassString } from '../../utils/ui';
-import { InjectVegaGlobalSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaBoxStateStylesController } from './slimmers/controllers/vega-box-state-styles-controller';
+import responsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/pageResizeObserverSlimmer';
 export class VegaBox {
   constructor() {
     this.globalSlimmers = {};
+    this.pageResizeSlimmer = new PageResizeObserverSlimmer();
+    this.stateStyleController = new VegaBoxStateStylesController();
+  }
+  watchBorder() {
+    methodPlaceholder();
+  }
+  watchShadow() {
+    methodPlaceholder();
+  }
+  watchBorderColor() {
+    methodPlaceholder();
+  }
+  watchBackgroundColor() {
+    methodPlaceholder();
   }
   render() {
     const hostClasses = [
       formatAndValidResponsiveToken(this.padding, 'padding'),
       formatAndValidResponsiveToken(this.margin, 'margin'),
       formatAndValidResponsiveToken(this.display, 'boxDisplay'),
+      formatAndValidResponsiveToken(this.corners, 'corners'),
+      responsiveFormatFacade.formatCustom(this.responsiveClass),
     ];
-    return sanitizeVegaComponent(h(Host, { class: arrayToClassString(hostClasses) },
+    return sanitizeVegaComponent(h(Host, { style: {
+        width: formatAndValidResponsiveToken(this.width, 'widthAndHeight'),
+        height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'),
+      }, class: arrayToClassString(hostClasses) },
       h("slot", null)), this.host);
   }
   static get is() { return "vega-box"; }
@@ -104,14 +126,252 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Defines the display behavior of the box, allowing you to choose from\n   standard display options like `block` and `none.`"
+        "text": "Defines the display behavior of the box, allowing you to choose from\n   standard display options like `block` and `none`."
       },
       "attribute": "display",
       "reflect": false
+    },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "StateVariantType<BordersTokenType, CssStatesType>",
+        "resolved": "\"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\" | Record<\"default\" | \"hover\" | \"active\" | \"focus-visible\", \"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\">",
+        "references": {
+          "StateVariantType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "BordersTokenType": {
+            "location": "import",
+            "path": "../../types/designToken.type"
+          },
+          "CssStatesType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the border of the box.\n   It accepts a string value representing a valid\n   border token."
+      },
+      "attribute": "border",
+      "reflect": false
+    },
+    "shadow": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "StateVariantType<ShadowsTokenType, 'default' | 'focus-visible' | 'hover'>",
+        "resolved": "\"shadow-app-header\" | \"shadow-card\" | \"shadow-dropdown-menu\" | \"shadow-form-field\" | \"shadow-modal\" | \"shadow-modal-footer\" | \"shadow-modal-footer-no-scroll\" | \"shadow-modal-header\" | \"shadow-popover\" | { default: \"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\"; hover: \"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\"; \"focus-visible\": \"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\"; }",
+        "references": {
+          "StateVariantType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "ShadowsTokenType": {
+            "location": "import",
+            "path": "../../types/designToken.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the box shadow of the box.\n   It accepts a string value representing a valid\n   box shadow token."
+      },
+      "attribute": "shadow",
+      "reflect": false
+    },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "StateVariantType<BorderColorsTokenType, CssStatesType>",
+        "resolved": "\"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\" | Record<\"default\" | \"hover\" | \"active\" | \"focus-visible\", \"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\">",
+        "references": {
+          "StateVariantType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "BorderColorsTokenType": {
+            "location": "import",
+            "path": "../../types/designToken.type"
+          },
+          "CssStatesType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the border color of the box.\n   It accepts a string value representing a valid\n   border color token."
+      },
+      "attribute": "border-color",
+      "reflect": false
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "StateVariantType<BackgroundColorsTokenType, CssStatesType>",
+        "resolved": "\"bg-brand\" | \"bg-page\" | \"bg-transparent\" | \"bg-primary\" | \"bg-secondary\" | \"bg-tertiary\" | \"bg-quaternary\" | \"bg-inverted-primary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-inverted-quaternary\" | \"bg-selected\" | \"bg-action\" | \"bg-action-hover\" | \"bg-action-focus\" | \"bg-action-active\" | \"bg-action-secondary\" | \"bg-action-tertiary\" | \"bg-action-tertiary-hover\" | \"bg-action-tertiary-active\" | \"bg-action-quaternary\" | \"bg-action-quaternary-hover\" | \"bg-action-quaternary-active\" | \"bg-danger\" | \"bg-danger-hover\" | \"bg-danger-focus\" | \"bg-danger-active\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-hover\" | \"bg-danger-tertiary-active\" | \"bg-status-success\" | \"bg-status-warning\" | \"bg-status-info\" | \"bg-status-error\" | \"bg-sidebar\" | \"bg-sidebar-item-hover\" | \"bg-sidebar-item-selected\" | \"bg-sidebar-icon\" | \"bg-sidebar-icon-hover\" | \"bg-sidebar-icon-selected\" | \"bg-backdrop-popover\" | \"bg-backdrop-modal\" | \"bg-backdrop-sidebar\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent2-primary\" | \"bg-accent2-secondary\" | \"bg-accent2-tertiary\" | \"bg-accent3-primary\" | \"bg-accent3-secondary\" | \"bg-accent3-tertiary\" | \"bg-accent4-primary\" | \"bg-accent4-secondary\" | \"bg-accent4-tertiary\" | \"bg-accent5-primary\" | \"bg-accent5-secondary\" | \"bg-accent5-tertiary\" | \"bg-accent6-primary\" | \"bg-accent6-secondary\" | \"bg-accent6-tertiary\" | \"bg-accent7-primary\" | \"bg-accent7-secondary\" | \"bg-accent7-tertiary\" | \"bg-accent8-primary\" | \"bg-accent8-secondary\" | \"bg-accent8-tertiary\" | \"bg-accent9-primary\" | \"bg-accent9-secondary\" | \"bg-accent9-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-tertiary\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-disabled\" | \"bg-tab\" | \"bg-tab-hover\" | \"bg-tab-selected\" | \"bg-table-header\" | \"bg-table-alt-row\" | \"bg-table-selected-row\" | \"bg-site-footer\" | \"bg-site-footer-action\" | \"bg-site-footer-action-hover\" | \"bg-site-footer-action-active\" | \"bg-site-footer-field\" | \"bg-textarea-count\" | \"bg-table-row-hover\" | \"bg-table-row-selected-expanded\" | \"bg-app-header\" | \"bg-selection-tile\" | \"bg-selection-tile-hover\" | \"bg-selection-tile-selected\" | \"bg-selection-tile-selected-hover\" | \"bg-loading-track\" | \"bg-loading-progress\" | \"bg-toggle-switch\" | \"bg-toggle-switch-hover\" | \"bg-toggle-switch-selected-disabled\" | \"bg-segment-control\" | \"bg-segment-hover\" | \"bg-slider-handle\" | \"bg-chip\" | \"bg-chip-hover\" | \"bg-chip-active\" | \"bg-keypad-btn-active\" | \"bg-action-secondary-hover\" | \"bg-action-secondary-active\" | Record<\"default\" | \"hover\" | \"active\" | \"focus-visible\", \"bg-brand\" | \"bg-page\" | \"bg-transparent\" | \"bg-primary\" | \"bg-secondary\" | \"bg-tertiary\" | \"bg-quaternary\" | \"bg-inverted-primary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-inverted-quaternary\" | \"bg-selected\" | \"bg-action\" | \"bg-action-hover\" | \"bg-action-focus\" | \"bg-action-active\" | \"bg-action-secondary\" | \"bg-action-tertiary\" | \"bg-action-tertiary-hover\" | \"bg-action-tertiary-active\" | \"bg-action-quaternary\" | \"bg-action-quaternary-hover\" | \"bg-action-quaternary-active\" | \"bg-danger\" | \"bg-danger-hover\" | \"bg-danger-focus\" | \"bg-danger-active\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-hover\" | \"bg-danger-tertiary-active\" | \"bg-status-success\" | \"bg-status-warning\" | \"bg-status-info\" | \"bg-status-error\" | \"bg-sidebar\" | \"bg-sidebar-item-hover\" | \"bg-sidebar-item-selected\" | \"bg-sidebar-icon\" | \"bg-sidebar-icon-hover\" | \"bg-sidebar-icon-selected\" | \"bg-backdrop-popover\" | \"bg-backdrop-modal\" | \"bg-backdrop-sidebar\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent2-primary\" | \"bg-accent2-secondary\" | \"bg-accent2-tertiary\" | \"bg-accent3-primary\" | \"bg-accent3-secondary\" | \"bg-accent3-tertiary\" | \"bg-accent4-primary\" | \"bg-accent4-secondary\" | \"bg-accent4-tertiary\" | \"bg-accent5-primary\" | \"bg-accent5-secondary\" | \"bg-accent5-tertiary\" | \"bg-accent6-primary\" | \"bg-accent6-secondary\" | \"bg-accent6-tertiary\" | \"bg-accent7-primary\" | \"bg-accent7-secondary\" | \"bg-accent7-tertiary\" | \"bg-accent8-primary\" | \"bg-accent8-secondary\" | \"bg-accent8-tertiary\" | \"bg-accent9-primary\" | \"bg-accent9-secondary\" | \"bg-accent9-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-tertiary\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-disabled\" | \"bg-tab\" | \"bg-tab-hover\" | \"bg-tab-selected\" | \"bg-table-header\" | \"bg-table-alt-row\" | \"bg-table-selected-row\" | \"bg-site-footer\" | \"bg-site-footer-action\" | \"bg-site-footer-action-hover\" | \"bg-site-footer-action-active\" | \"bg-site-footer-field\" | \"bg-textarea-count\" | \"bg-table-row-hover\" | \"bg-table-row-selected-expanded\" | \"bg-app-header\" | \"bg-selection-tile\" | \"bg-selection-tile-hover\" | \"bg-selection-tile-selected\" | \"bg-selection-tile-selected-hover\" | \"bg-loading-track\" | \"bg-loading-progress\" | \"bg-toggle-switch\" | \"bg-toggle-switch-hover\" | \"bg-toggle-switch-selected-disabled\" | \"bg-segment-control\" | \"bg-segment-hover\" | \"bg-slider-handle\" | \"bg-chip\" | \"bg-chip-hover\" | \"bg-chip-active\" | \"bg-keypad-btn-active\" | \"bg-action-secondary-hover\" | \"bg-action-secondary-active\">",
+        "references": {
+          "StateVariantType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "BackgroundColorsTokenType": {
+            "location": "import",
+            "path": "../../types/designToken.type"
+          },
+          "CssStatesType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the background color of the box.\n   It accepts a string value representing a valid\n   background color token."
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "width": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<WidthType>",
+        "resolved": "number | string | { S?: WidthType; M?: WidthType; L?: WidthType; XL?: WidthType; default?: WidthType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "WidthType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the width of the box.\nIt accepts values in numeric, string and spacing token formats.\nFor numeric values, use a number to indicate the width\n   in pixels, e.g., 100 will be translated to 100px.\nFor string values, you can use CSS units like '%' or 'calc' expressions.\n   For example, '100%' and 'calc(100vw - 20px)' which allows for more complex calculations to\n   determine the width.\nFor spacing tokens, you can set 'size-2', 'size-16' and etc. Please refer to https://vega.hlprd.com/tokens/spacing to check the full list of spacing tokens."
+      },
+      "attribute": "width",
+      "reflect": false
+    },
+    "height": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<HeightType>",
+        "resolved": "number | string | { S?: HeightType; M?: HeightType; L?: HeightType; XL?: HeightType; default?: HeightType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "HeightType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the height of the box.\nIt accepts values in numeric, string and spacing token formats.\nFor numeric values, use a number to indicate the height\n   in pixels, e.g., 100 will be translated to 100px.\nFor string values, you can use CSS units like '%' or 'calc' expressions.\n   For example, '100%' and 'calc(100vh - 20px)' which allows for more complex calculations to\n   determine the height.\nFor spacing tokens, you can set 'size-2', 'size-16' and etc. Please refer to https://vega.hlprd.com/tokens/spacing to check the full list of spacing tokens."
+      },
+      "attribute": "height",
+      "reflect": false
+    },
+    "responsiveClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<string>",
+        "resolved": "string | { S?: string; M?: string; L?: string; XL?: string; default?: string; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the custom class name of the box."
+      },
+      "attribute": "responsive-class",
+      "reflect": false
+    },
+    "corners": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<CornersType>",
+        "resolved": "\"rounded-12\" | \"rounded-16\" | \"rounded-2\" | \"rounded-24\" | \"rounded-32\" | \"rounded-4\" | \"rounded-48\" | \"rounded-8\" | \"rounded-full\" | \"rounded-none\" | { S?: CornersType; M?: CornersType; L?: CornersType; XL?: CornersType; default?: CornersType; } | { left?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; right?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; top?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; bottom?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"top-left\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"top-right\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"bottom-left\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"bottom-right\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "CornersType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the corner of the box.\n   It accepts a string value representing a valid\n   border radius token."
+      },
+      "attribute": "corners",
+      "reflect": false
     }
   }; }
+  static get states() { return {
+    "currentBreakpoint": {}
+  }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "border",
+      "methodName": "watchBorder"
+    }, {
+      "propName": "shadow",
+      "methodName": "watchShadow"
+    }, {
+      "propName": "borderColor",
+      "methodName": "watchBorderColor"
+    }, {
+      "propName": "backgroundColor",
+      "methodName": "watchBackgroundColor"
+    }]; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaBox.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaBox.prototype, "pageResizeSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaBox.prototype, "stateStyleController", void 0);

package/dist/collection/components/vega-breadcrumb/slimmers/renderers/vega-breadcrumb-collapsed-item-renderer.js

@@ -16,7 +16,7 @@ export class VegaBreadcrumbCollapsedItemRenderer extends VegaSlimmer {
     }));
     return (h("div", { class: "vega-breadcrumb-item" },
       h("vega-dropdown", { source: source, placement: ['bottom'], alignment: 'center', maxHeight: 200, ref: (ref) => {
-          DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaDropdownClick, (payload) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, (payload) => {
             this.clickController.dropdownClick(payload.detail);
           });
         } },

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

@@ -31,11 +31,11 @@ export class VegaBreadcrumbItemRenderer extends VegaSlimmer {
     return h("vega-icon", { icon: icon, size: "size-12", color: color });
   }
   renderLabel(item, isLastItem) {
-    return item.tooltip ? (h("vega-tooltip", { content: item.tooltip, placement: ['bottom'] }, this.renderLink(item, isLastItem))) : (this.renderLink(item, isLastItem));
+    return item.tooltip ? (h("vega-tooltip", { text: item.tooltip, placement: ['bottom'] }, this.renderLink(item, isLastItem))) : (this.renderLink(item, isLastItem));
   }
   renderLink(item, isLastItem) {
     return isLastItem ? (h("span", { class: "vega-breadcrumb-last-label" }, item.label)) : (h("vega-button-link", { label: item.label, ref: (ref) => {
-        DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaClick, () => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
           this.clickController.click(item);
         });
       } }));

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

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
 }

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

@@ -26,12 +26,12 @@ export class VegaBreadcrumb {
     /**
      * Determines the maximum number of visible items in the `vega-breadcrumb` component,
      *   primarily in desktop mode.
-        
+  
      * When the number of items exceeds this limit, the component automatically
      *   collapses the center items, rendering only the first and last items visible.
-        
+  
      * If you set this value to `none`, all items will remain expanded.
-    
+  
      * The minimum allowed value for this property is 4.
      */
     this.maxItems = 4;
@@ -69,7 +69,7 @@ export class VegaBreadcrumb {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Determines the maximum number of visible items in the `vega-breadcrumb` component, \n   primarily in desktop mode.\n  \nWhen the number of items exceeds this limit, the component automatically \n   collapses the center items, rendering only the first and last items visible.\n  \nIf you set this value to `none`, all items will remain expanded.\n\nThe minimum allowed value for this property is 4."
+        "text": "Determines the maximum number of visible items in the `vega-breadcrumb` component,\n   primarily in desktop mode.\n\nWhen the number of items exceeds this limit, the component automatically\n   collapses the center items, rendering only the first and last items visible.\n\nIf you set this value to `none`, all items will remain expanded.\n\nThe minimum allowed value for this property is 4."
       },
       "attribute": "max-items",
       "reflect": false,
@@ -128,7 +128,7 @@ export class VegaBreadcrumb {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "An native event emitter notifying that a breadcrumb item has been clicked."
+        "text": "An event emitter notifying that a breadcrumb item has been clicked."
       },
       "complexType": {
         "original": "VegaBreadcrumbItemType",

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

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: inline-block;
 }

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

@@ -338,7 +338,7 @@ export class VegaButton {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "An native event emitter notifying the click event of the button."
+        "text": "An event emitter notifying the click event of the button."
       },
       "complexType": {
         "original": "any",

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

@@ -204,7 +204,7 @@
   color: rgba(var(--v-text-on-disabled, 252, 252, 252, 1));
 }
 
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: inline-block;
 }

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

@@ -63,6 +63,10 @@ export class VegaButtonCircle {
      * Specifies the color of the icon displayed on the circular button.
      */
     this.iconColor = 'text-primary';
+    /**
+     * Indicates whether to use tooltip to display label.
+     */
+    this.showTooltip = true;
     this.handleClick = (e) => {
       if (this.disabled) {
         e.preventDefault();
@@ -81,7 +85,9 @@ export class VegaButtonCircle {
     this.host.innerHTML = '';
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.label && !this.disabled ? (h("vega-tooltip", { content: this.label }, this.renderButton())) : (this.renderButton())), this.host);
+    var _a;
+    return sanitizeVegaComponent(h(Host, null,
+      h("vega-tooltip", { text: this.label, trigger: this.label && this.showTooltip && !this.disabled ? 'hover' : 'none', disableInteractive: (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.disableInteractive }, this.renderButton())), this.host);
   }
   renderButton() {
     var _a;
@@ -282,6 +288,44 @@ export class VegaButtonCircle {
       "attribute": "icon-color",
       "reflect": false,
       "defaultValue": "'text-primary'"
+    },
+    "showTooltip": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether to use tooltip to display label."
+      },
+      "attribute": "show-tooltip",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "tooltip": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaButtonCircleTooltip",
+        "resolved": "{ disableInteractive?: boolean; }",
+        "references": {
+          "VegaButtonCircleTooltip": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the properties of the tooltip displayed for the button circle."
+      }
     }
   }; }
   static get events() { return [{

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

@@ -1,4 +1,5 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */
 :host {
   display: inline-block;
   position: relative;
@@ -25,6 +26,31 @@ a:focus-visible {
   color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }
 
+a:not(.vega-button-link-danger):visited vega-icon svg *[fill=currentColor] {
+  fill: rgba(var(--v-text-link-visited, 95, 56, 206, 1));
+}
+a:not(.vega-button-link-danger):visited vega-icon svg *[stroke=currentColor] {
+  stroke: rgba(var(--v-text-link-visited, 95, 56, 206, 1));
+}
+a:not(.vega-button-link-danger):hover vega-icon svg *[fill=currentColor] {
+  fill: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
+}
+a:not(.vega-button-link-danger):hover vega-icon svg *[stroke=currentColor] {
+  stroke: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
+}
+a:not(.vega-button-link-danger):active vega-icon svg *[fill=currentColor] {
+  fill: rgba(var(--v-text-link-active, 29, 65, 195, 1));
+}
+a:not(.vega-button-link-danger):active vega-icon svg *[stroke=currentColor] {
+  stroke: rgba(var(--v-text-link-active, 29, 65, 195, 1));
+}
+a:not(.vega-button-link-danger):focus-visible vega-icon svg *[fill=currentColor] {
+  fill: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
+}
+a:not(.vega-button-link-danger):focus-visible vega-icon svg *[stroke=currentColor] {
+  stroke: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
+}
+
 :host > a:hover .vega-button-link-label,
 :host > a:focus-visible .vega-button-link-label {
   text-decoration: underline;

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

@@ -6676,7 +6676,7 @@
   background-color: rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1));
 }
 
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
   box-sizing: border-box;

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

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
 }

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

@@ -401,7 +401,7 @@ export class VegaCarousel {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "A native event emitter notifying the transition of the carousel to another page,\n   whether triggered programmatically or through user interaction."
+        "text": "An event emitter notifying the transition of the carousel to another page,\n   whether triggered programmatically or through user interaction."
       },
       "complexType": {
         "original": "number",

package/dist/collection/components/vega-chart/vega-bar-chart/vega-bar-chart.css

@@ -6,7 +6,7 @@
   stroke-width: 5;
 }
 
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
 }

package/dist/collection/components/vega-chart/vega-line-chart/vega-line-chart.css

@@ -6,7 +6,7 @@
   stroke-width: 5;
 }
 
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
 }

package/dist/collection/components/vega-chart/vega-pie-chart/vega-pie-chart.css

@@ -6,7 +6,7 @@
   stroke-width: 5;
 }
 
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
 }