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

package/dist/types/components/vega-dropdown/slimmers/controllers/vega-dropdown-selected-controller.d.ts

@@ -9,20 +9,11 @@ export declare class VegaDropdownSelectedController extends VegaSlimmer {
   selectType: VegaDropdown['selectType'];
   source: VegaDropdown['source'];
   selectedSourceKey: VegaDropdown['selectedSourceKey'];
-  vegaClick: VegaDropdown['vegaClick'];
   vegaDropdownClick: VegaDropdown['vegaDropdownClick'];
   appenderController: VegaDropdown['appenderController'];
   childrenController: VegaDropdown['childrenController'];
   renderModeController: VegaDropdown['renderModeController'];
-  private itemSelectionObserver;
-  /**
-   * Component lifecycle - connectedCallback
-   */
-  connectedCallback(): void;
-  /**
-   * Component lifecycle - disconnectedCallback
-   */
-  disconnectedCallback(): void;
+  dropdownClickEventEmitter: VegaDropdown['dropdownClickEventEmitter'];
   /**
    * Component lifecycle - componentWillLoad
    */
@@ -66,32 +57,29 @@ export declare class VegaDropdownSelectedController extends VegaSlimmer {
    * key.
    */
   watchSource(): void;
-  /**
-   * The function initializes a row click observer that handles row selection in a table.
-   */
-  private initItemSelectionObserver;
   /**
    * The function checks if the input is an acceptable item selection observer.
    *
    * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
    * @returns {boolean} a boolean value.
    */
-  private isAcceptableItemSelectionObserver;
-  /**
-   * The function `getDropdownByItem` returns the dropdown element associated with a given item element.
-   *
-   * @param {HTMLElement} item - The `item` parameter is an HTMLElement representing the item that was
-   * clicked or selected in the dropdown menu.
-   * @returns {Nullable<HTMLElement>} an HTMLElement or null.
-   */
-  private getDropdownByItem;
+  isAcceptableItemSelectionObserver<T>(input: unknown): input is T;
   /**
    * The select function handles the selection of a key, either adding it to the selectedSourceKey array
    * or setting it as the only selected key.
    *
    * @param {string} key - The key parameter is a string that represents the selected item.
    */
-  private select;
+  select(key: string): void;
+  /**
+   * The function checks if the given item belongs to the current dropdown.
+   *
+   * @param {HTMLElement} item - The `item` parameter is an HTMLElement, which represents an element in
+   * the DOM (Document Object Model). It is the element that we want to check if it is currently in a
+   * dropdown.
+   * @returns {boolean} a boolean value.
+   */
+  private isCurrentDropdown;
   /**
    * The function `checkSelectedSourceKey` checks if the selected source key is valid based on the select
    * type and returns the key or an empty array/string if it is invalid.

package/dist/types/components/vega-dropdown/slimmers/controllers/vega-dropdown-source-controller.d.ts

@@ -8,8 +8,6 @@ export declare class VegaDropdownSourceController extends VegaSlimmer {
   source: VegaDropdown['source'];
   sourceForRender: VegaDropdown['sourceForRender'];
   searchController: VegaDropdown['searchController'];
-  formatSourceController: VegaDropdown['formatSourceController'];
-  private formattedSource;
   /**
    * Component lifecycle - [componentWillLoad]
    */
@@ -26,10 +24,6 @@ export declare class VegaDropdownSourceController extends VegaSlimmer {
    * The function "handleSource" performs validation, formatting, and rendering of a source.
    */
   private handleSource;
-  /**
-   * The function "formatSource" formats the source code using a formatSourceController.
-   */
-  private formatSource;
   /**
    * The function "validSource" checks if the "source" variable is an array of "VegaDropdownSourceItem"
    * type, and if not, assigns an empty array to it.

package/dist/types/components/vega-dropdown/slimmers/renderers/vega-dropdown-create-renderer.d.ts

@@ -4,10 +4,10 @@ export declare class VegaDropdownCreateRenderer extends VegaSlimmer {
   searchString: VegaDropdown['searchString'];
   dynamicOption: VegaDropdown['dynamicOption'];
   sourceForRender: VegaDropdown['sourceForRender'];
-  vegaCreate: VegaDropdown['vegaCreate'];
   appenderController: VegaDropdown['appenderController'];
   childrenController: VegaDropdown['childrenController'];
   renderModeController: VegaDropdown['renderModeController'];
+  createEventEmitter: VegaDropdown['createEventEmitter'];
   render(): HTMLElement;
   private onItemAdd;
 }

package/dist/types/components/vega-dropdown/slimmers/renderers/vega-dropdown-renderer.d.ts

@@ -1,6 +1,8 @@
 import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
 import { VegaDropdown } from '../../vega-dropdown';
+import { Nullable } from '../../../../types/general';
 export declare class VegaDropdownRenderer extends VegaSlimmer {
+  host: VegaDropdown['host'];
   maxHeight: VegaDropdown['maxHeight'];
   searchable: VegaDropdown['searchable'];
   searchRenderer: VegaDropdown['searchRenderer'];
@@ -8,11 +10,20 @@ export declare class VegaDropdownRenderer extends VegaSlimmer {
   listRenderer: VegaDropdown['listRenderer'];
   renderModeController: VegaDropdown['renderModeController'];
   private dropdownRef;
+  private dropdownContentBoxRef;
   private virtualContainerRef;
-  setVirtualContainer(): void;
-  getDropdownRef(): HTMLElement;
+  componentDidRender(): void;
+  getDropdownRef(): HTMLDivElement;
+  getDropdownContentBoxRef(): HTMLVegaDropdownContentBoxElement;
   getVirtualContainerRef(): HTMLElement;
-  render(dropdownId: string): HTMLElement;
+  getNextActiveItem(code: 'ArrowUp' | 'ArrowDown'): Nullable<HTMLVegaDropdownItemElement>;
+  render(): HTMLElement;
   private renderContentSlot;
   private renderDropdown;
+  private setVirtualContainer;
+  private appendItemsToContentBox;
+  private appendDropdownToContentBox;
+  private getAllItems;
+  private getCurrentActiveItem;
+  private findNextCallFocusItem;
 }

package/dist/types/components/vega-dropdown/slimmers/renderers/vega-dropdown-search-renderer.d.ts

@@ -5,7 +5,7 @@ export declare class VegaDropdownSearchRenderer extends VegaSlimmer {
   searchString: VegaDropdown['searchString'];
   source: VegaDropdown['source'];
   useDefaultFilter: VegaDropdown['useDefaultFilter'];
-  vegaSearch: VegaDropdown['vegaSearch'];
+  searchEventEmitter: VegaDropdown['searchEventEmitter'];
   isDropdownShow: VegaDropdown['isDropdownShow'];
   sourceController: VegaDropdown['sourceController'];
   renderModeController: VegaDropdown['renderModeController'];

package/dist/types/components/vega-dropdown/test/share.d.ts

@@ -0,0 +1,12 @@
+import { E2EPage } from '@stencil/core/testing';
+/**
+ * The function `typeDropdownSearch` is a TypeScript function that takes a web page and a value as
+ * input and types the value into a dropdown search input field.
+ *
+ * @param {E2EPage} page - The `page` parameter is an instance of the E2EPage class. It represents a
+ * browser page and provides methods to interact with the page's DOM and perform actions like clicking,
+ * typing, etc.
+ * @param {string} value - The `value` parameter is the string value that you want to type into the
+ * input field.
+ */
+export declare const typeDropdownSearch: (page: E2EPage, value: string) => Promise<void>;

package/dist/types/components/vega-dropdown/types.d.ts

@@ -1,13 +1,7 @@
-import { IconsTokenType } from '../../types/designToken.type';
-
 export type DropdownSourceItem = {
 	label: string;
 	key: string;
-	/** @deprecated This property will be removed soon */
-	group?: string;
 	count?: number;
-	/** @deprecated This property will be removed soon and make prefixIcon instead */
-	prefix?: IconsTokenType;
 	prefixIcon?: string;
 	disabled?: boolean;
 };

package/dist/types/components/vega-dropdown/vega-dropdown-content-box/vega-dropdown-content-box.d.ts

@@ -0,0 +1,8 @@
+import { GlobalSlimmers } from '../../../vega-slimmer/vega-slimmer-core';
+import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+export declare class VegaDropdownContentBox {
+  protected readonly globalSlimmers: GlobalSlimmers;
+  protected eventPrevent: ChildNodesEventPreventSlimmer;
+  host: HTMLVegaDropdownContentBoxElement;
+  render(): VegaDropdownContentBox;
+}

package/dist/types/components/vega-dropdown/vega-dropdown-group/vega-dropdown-group.d.ts

@@ -1,5 +1,7 @@
+import { GlobalSlimmers } from '../../../vega-slimmer/vega-slimmer-core';
 import { VegaDropdownGroupRenderer } from './slimmers/renderers/vega-dropdown-group-renderer';
 export declare class VegaDropdownGroup {
+  protected readonly globalSlimmers: GlobalSlimmers;
   protected readonly renderer: VegaDropdownGroupRenderer;
   host: HTMLVegaDropdownGroupElement;
   /**

package/dist/types/components/vega-dropdown/vega-dropdown-item/slimmers/controllers/vega-dropdown-item-click-controller.d.ts

@@ -7,8 +7,13 @@ export declare class VegaDropdownItemClickController extends VegaSlimmer {
   host: VegaDropdownItem['host'];
   itemKey: VegaDropdownItem['itemKey'];
   vegaClick: VegaDropdownItem['vegaClick'];
+  clickEventEmitter: VegaDropdownItem['clickEventEmitter'];
   /**
-   * Item click handler
+   * The handleClick function emits an event with the itemKey and notifies the ChangeManager with the
+   * dropdown item click event and the itemKey.
+   *
+   * @param {MouseEvent} e - MouseEvent - The event object that contains information about the mouse
+   * click event.
    */
-  handleRowClick(): void;
+  handleClick(e: MouseEvent): void;
 }

package/dist/types/components/vega-dropdown/vega-dropdown-item/slimmers/controllers/vega-dropdown-item-state-controller.d.ts

@@ -9,5 +9,6 @@ export declare class VegaDropdownItemStateController extends SubStateObserverSli
   itemKey: VegaDropdownItem['itemKey'];
   selected: VegaDropdownItem['selected'];
   prefixIconSlot: VegaDropdownItem['prefixIconSlot'];
+  itemDisplayRule: VegaDropdownItem['itemDisplayRule'];
   constructor();
 }

package/dist/types/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.d.ts

@@ -1,6 +1,7 @@
 import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
 import { VegaDropdownItem } from '../../vega-dropdown-item';
 export declare class VegaDropdownItemRenderer extends VegaSlimmer {
+  host: VegaDropdownItem['host'];
   label: VegaDropdownItem['label'];
   count: VegaDropdownItem['count'];
   prefixIcon: VegaDropdownItem['prefixIcon'];
@@ -9,6 +10,7 @@ export declare class VegaDropdownItemRenderer extends VegaSlimmer {
   selected: VegaDropdownItem['selected'];
   selectType: VegaDropdownItem['selectType'];
   height: VegaDropdownItem['height'];
+  itemDisplayRule: VegaDropdownItem['itemDisplayRule'];
   vegaDropdownItemClickController: VegaDropdownItem['vegaDropdownItemClickController'];
   render(): HTMLElement;
   private renderSelectIcon;

package/dist/types/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.d.ts

@@ -1,12 +1,18 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { GlobalSlimmers } from '../../../vega-slimmer/vega-slimmer-core';
 import { VegaDropdownItemRenderer } from './slimmers/renderers/vega-dropdown-item-renderer';
 import { VegaDropdownItemStateController } from './slimmers/controllers/vega-dropdown-item-state-controller';
 import { VegaDropdownItemClickEvent } from './types';
 import { VegaDropdownItemClickController } from './slimmers/controllers/vega-dropdown-item-click-controller';
+import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { EventEmitSlimmerBase } from '../../../helpers/event-manager/slimmers/eventEmitSlimmer';
 export declare class VegaDropdownItem {
+  protected readonly globalSlimmers: GlobalSlimmers;
   protected readonly renderer: VegaDropdownItemRenderer;
   protected readonly vegaDropdownItemStateController: VegaDropdownItemStateController;
   protected readonly vegaDropdownItemClickController: VegaDropdownItemClickController;
+  protected dropdownItemEventPrevent: ChildNodesEventPreventSlimmer;
+  protected clickEventEmitter: EventEmitSlimmerBase;
   host: HTMLVegaDropdownItemElement;
   /**
    * Configures selection behavior.
@@ -21,6 +27,10 @@ export declare class VegaDropdownItem {
    * Specifies the dropdown item's selected status.
    */
   selected: boolean;
+  /**
+   * Specifies the dropdown item's rule of display.
+   */
+  itemDisplayRule: 'ellipsis' | 'newline';
   /**
    * Specifies the label for the dropdown item.
    */
@@ -49,5 +59,11 @@ export declare class VegaDropdownItem {
    * An event emitter notifying the dropdown item has been clicked.
    */
   vegaClick: EventEmitter<VegaDropdownItemClickEvent>;
+  /**
+   * An event emitter notifying the dropdown item has been clicked.
+   *
+   * @eventSemantics namespace:native
+   */
+  click: EventEmitter<VegaDropdownItemClickEvent>;
   render(): VegaDropdownItem;
 }

package/dist/types/components/vega-dropdown/vega-dropdown.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ElementAppenderAlignmentType, ElementAppenderPlacementType, ResponsiveType, SizeType, TranslocationType } from '../../types/ui.type';
+import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core';
 import { VegaDropdownRenderer } from './slimmers/renderers/vega-dropdown-renderer';
 import { VegaDropdownSourceController } from './slimmers/controllers/vega-dropdown-source-controller';
 import { VegaDropdownCreateRenderer } from './slimmers/renderers/vega-dropdown-create-renderer';
@@ -11,13 +12,15 @@ import { VegaDropdownAppenderController } from './slimmers/controllers/vega-drop
 import { VegaDropdownSourceItem } from './types';
 import { VegaDropdownGroupLevelRenderer } from './slimmers/renderers/vega-dropdown-group-level-renderer';
 import { VegaDropdownSearchController } from './slimmers/controllers/vega-dropdown-search-controller';
-import { VegaDropdownFormatSourceController } from './slimmers/controllers/vega-dropdown-format-source-controller';
 import { VegaDropdownSelectedController } from './slimmers/controllers/vega-dropdown-selected-controller';
 import { VegaDropdownRenderModeController } from './slimmers/controllers/vega-dropdown-render-mode-controller';
 import { SubStateNotifySlimmerBase } from '../../helpers/slimmers/subStateNotifySlimmerBase';
 import { VegaDropdownChildrenController } from './slimmers/controllers/vega-dropdown-children-controller';
+import { EventEmitSlimmerBase } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { ChildNodesNotifyObserverSlimmer } from '../../helpers/event-manager/slimmers/childNodesNotifyObserverSlimmer';
+import { VegaDropdownItemClickEvent } from './vega-dropdown-item/types';
 export declare class VegaDropdown {
-  protected readonly dropdownId: string;
+  protected readonly globalSlimmers: GlobalSlimmers;
   protected readonly renderer: VegaDropdownRenderer;
   protected readonly sourceController: VegaDropdownSourceController;
   protected readonly searchRenderer: VegaDropdownSearchRenderer;
@@ -28,13 +31,19 @@ export declare class VegaDropdown {
   protected readonly keyboardController: VegaDropdownKeyboardController;
   protected readonly appenderController: VegaDropdownAppenderController;
   protected readonly searchController: VegaDropdownSearchController;
-  protected readonly formatSourceController: VegaDropdownFormatSourceController;
   protected readonly selectedController: VegaDropdownSelectedController;
   protected readonly renderModeController: VegaDropdownRenderModeController;
   protected readonly childrenController: VegaDropdownChildrenController;
   protected readonly selectTypeNotifySlimmer: SubStateNotifySlimmerBase;
   protected readonly selectedSourceKeyNotifySlimmer: SubStateNotifySlimmerBase;
   protected readonly prefixIconSlotNotifySlimmer: SubStateNotifySlimmerBase;
+  protected itemClickObserver: ChildNodesNotifyObserverSlimmer<VegaDropdownItemClickEvent>;
+  protected showEventEmitter: EventEmitSlimmerBase;
+  protected hideEventEmitter: EventEmitSlimmerBase;
+  protected dropdownClickEventEmitter: EventEmitSlimmerBase;
+  protected createEventEmitter: EventEmitSlimmerBase;
+  protected searchEventEmitter: EventEmitSlimmerBase;
+  protected readonly itemDisplayRuleNotifySlimmer: SubStateNotifySlimmerBase;
   host: HTMLVegaDropdownElement;
   searchString: string;
   maxHeightOfItemsContainer: number;
@@ -128,6 +137,7 @@ export declare class VegaDropdown {
    * Specifies the display rule for items in the dropdown.
    */
   itemDisplayRule: 'ellipsis' | 'newline';
+  watchItemDisplayRule(): void;
   /**
    * Determines if the dropdown height should be automatically adjusted
    *    to fit its container height.
@@ -174,25 +184,43 @@ export declare class VegaDropdown {
    *    within its container or relative to a reference point.
    */
   alignment: ElementAppenderAlignmentType;
-  /** event emitter used for notifying consumers which the dropdown item is clicked */
-  /** @deprecated This property will be removed soon **/
-  vegaClick: EventEmitter<string | string[]>;
   /**
    * An event emitter notifying that a dropdown item has been clicked.
    *
    * The event's `detail` property contains the key of the clicked item.
    */
   vegaDropdownClick: EventEmitter<string>;
+  /**
+   * An event emitter notifying that a dropdown item has been clicked.
+   *
+   * The event's `detail` property contains the key of the clicked item.
+   * @eventSemantics namespace:native
+   */
+  dropdownClick: EventEmitter<string>;
   /**
    * An event emitter notifying that the dropdown has been displayed,
    *    either programmatically or via user interaction.
    */
   vegaShow: EventEmitter<string>;
+  /**
+   * An event emitter notifying that the dropdown has been displayed,
+   *    either programmatically or via user interaction. The name is not `show` because already has a method `show`.
+   *
+   * @eventSemantics namespace:native
+   */
+  dropdownShow: EventEmitter<string>;
   /**
    * Event emitter notifying that the dropdown has been dismissed,
    *    either programmatically or via user interaction.
    */
   vegaHide: EventEmitter<string>;
+  /**
+   * An event emitter notifying that the dropdown has been dismissed,
+   *    either programmatically or via user interaction. The name is not `hide` because already has a method `hide`.
+   *
+   * @eventSemantics namespace:native
+   */
+  dropdownHide: EventEmitter<string>;
   /**
    * An event emitter notifying the addition of a new value
    *    to the dropdown source list.
@@ -202,11 +230,29 @@ export declare class VegaDropdown {
    * The dropdown _does not_ automatically add the new value to the source list.
    */
   vegaCreate: EventEmitter<string>;
+  /**
+   * An event emitter notifying the addition of a new value
+   *    to the dropdown source list.
+   *
+   * The event's `detail` property contains the new value.
+   *
+   * The dropdown _does not_ automatically add the new value to the source list.
+   *
+   * @eventSemantics namespace:native
+   */
+  create: EventEmitter<string>;
   /**
    * An event emitter notifying the search event in the dropdown,
    *    but only if `useDefaultFilter` is set to `false`.
    */
   vegaSearch: EventEmitter<string>;
+  /**
+   * An event emitter notifying the search event in the dropdown,
+   *    but only if `useDefaultFilter` is set to `false`. The name is not `search` because already has a method `search`.
+   *
+   * @eventSemantics namespace:native
+   */
+  dropdownSearch: EventEmitter<string>;
   /**
    * Invoke this method to programmatically display the dropdown menu.
    */

package/dist/types/components/vega-field-error/vega-field-error.d.ts

@@ -1,5 +1,7 @@
+import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core';
 import { VegaFieldErrorMessageController } from './slimmers/controllers/vega-field-error-message-controller';
 export declare class VegaFieldError {
+  protected readonly globalSlimmers: GlobalSlimmers;
   protected messageController: VegaFieldErrorMessageController;
   host: HTMLVegaFieldErrorElement;
   /**

package/dist/types/components/vega-field-label/vega-field-label.d.ts

@@ -1,5 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core';
+import { EventEmitSlimmerBase } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
 export declare class VegaFieldLabel {
+  protected readonly globalSlimmers: GlobalSlimmers;
+  protected clickEventEmitter: EventEmitSlimmerBase;
+  protected inputEventPrevent: ChildNodesEventPreventSlimmer;
+  private labelRef;
   host: HTMLVegaFieldLabelElement;
   /**
    * Specifies the label or title for the field.
@@ -24,9 +31,5 @@ export declare class VegaFieldLabel {
   vegaClick: EventEmitter;
   componentWillLoad(): void;
   render(): VegaFieldLabel;
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-field-label-vegaClick-event}
-   */
   private handleClick;
 }

package/dist/types/components/vega-flex/vega-flex.d.ts

@@ -1,6 +1,8 @@
 import { BreakpointsTokenType } from '../../types/designToken.type';
 import { GapType, ResponsiveType, MarginType, FlexDirectionType, FlexAlignItemType, FlexJustifyContentType } from '../../types/ui.type';
+import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core';
 export declare class VegaFlex {
+  protected readonly globalSlimmers: GlobalSlimmers;
   host: HTMLVegaFlexElement;
   /**
    * Determines the gap (spacing) within the flex container.
@@ -25,6 +27,8 @@ export declare class VegaFlex {
   /**
    * Determines the breakpoint at which the flex direction transitions from
    *    row-based layout to column-based layout, or vice versa.
+   *
+   * @deprecated Please use the `direction` property instead.
    */
   breakpoint: BreakpointsTokenType | 'None';
   /**
@@ -35,12 +39,6 @@ export declare class VegaFlex {
    * Controls the alignment of items within the flex container.
    */
   alignItems: ResponsiveType<FlexAlignItemType>;
-  /**
-   * Controls the alignment of items within the flex container.
-   *
-   * @deprecated This property will be removed soon and replaced by prop alignItems
-   */
-  alignItem: ResponsiveType<FlexAlignItemType>;
   /**
    * Controls the alignment of content items and the distribution of
    *    space between and around them within the flex container.
@@ -48,6 +46,8 @@ export declare class VegaFlex {
   justifyContent: ResponsiveType<FlexJustifyContentType>;
   /**
    * Specifies whether to use the native flex layout.
+   *
+   * @deprecated This property will be removed soon and vega-flex will only support native-based flex behaviors.
    */
   useNativeFlex: boolean;
   render(): VegaFlex;

package/dist/types/components/vega-font/slimmers/controllers/vega-font-as-controller.d.ts

@@ -1,40 +1,17 @@
 import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
 import { VegaFont } from '../../vega-font';
 import { VegaFontAs } from '../../types';
-import { ResponsiveType } from '../../../../types/ui.type';
 export declare const VEGA_FONT_AS_SAFE_LIST: string[];
 /** The `VegaFontAsController` class is a TypeScript class that extends `VegaSlimmer` and provides methods for rendering and updating an extra node based on a specified `as` property. */
 export declare class VegaFontAsController extends VegaSlimmer {
-  host: VegaFont['host'];
   as: VegaFont['as'];
-  currentBreakpoint: VegaFont['currentBreakpoint'];
-  classesController: VegaFont['classesController'];
   /**
-   * check should render the extra node
-   */
-  checkAndRenderExtraNode(): void;
-  /**
-   * update the extra node className
-   */
-  updateAsNodeClassNameOrTagName(): void;
-  /**
-   * update the extra node when prop as change
-   *
-   * @param {ResponsiveType<VegaFontAs>} newValue the new value
-   */
-  updateExtraNode(newValue: ResponsiveType<VegaFontAs>): void;
-  /**
-   * The function `getSlotContent` returns a list of child nodes based on the as node.
-   *
-   * @returns {NodeListOf<ChildNode>} a NodeListOf<ChildNode>.
-   */
-  private getSlotContent;
-  /**
-   * The function renders the content of a slot by creating a new element and appending the content to it, then replacing the existing element with the new one.
+   * The function `getTagNameFromPropAs` returns a `VegaFontAs` value based on the input
+   * `ResponsiveType<VegaFontAs>`.
    *
-   * @param {VegaFontAs} as - The "as" parameter is a string that represents the type of element to create. It is used to create a new element using the document.createElement() method.
+   * @returns {VegaFontAs} a value of type `VegaFontAs`.
    */
-  private renderSlotContent;
+  getTagNameFromPropAs(): VegaFontAs;
   /**
    * The function checks if a given value is safe to use as a VegaFontAs.
    *
@@ -43,27 +20,4 @@ export declare class VegaFontAsController extends VegaSlimmer {
    * returns `true`. Otherwise, it returns `false`.
    */
   private isSafeAs;
-  /**
-   * The function returns the first element with the class "vega-font-as-node" as an HTMLElement or null if no such element exists.
-   *
-   * @returns {Nullable<HTMLElement>} The method is returning a Nullable<HTMLElement> object.
-   */
-  private getAsNode;
-  /**
-   * The function returns a string that combines the class name from a classesController with the string "vega-font-as-node".
-   *
-   * @returns {string} The method is returning a string that is the concatenation of the result of the
-   * `getClassName()` method from the `classesController` object and the string "vega-font-as-node".
-   */
-  private getAsNodeClassName;
-  /**
-   * The function `getTagNameFromPropAs` returns a `VegaFontAs` value based on the input
-   * `ResponsiveType<VegaFontAs>`.
-   *
-   * @param {ResponsiveType<VegaFontAs>} input - The input parameter is of type ResponsiveType<VegaFontAs>. It represents the font as
-   * a string or an object with breakpoints. The VegaFontAs type is a string type that represents the
-   * font name or alias.
-   * @returns {VegaFontAs} a value of type `VegaFontAs`.
-   */
-  private getTagNameFromPropAs;
 }

package/dist/types/components/vega-font/slimmers/renderers/vega-font-renderer.d.ts

@@ -0,0 +1,6 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaFont } from '../../vega-font';
+export declare class VegaFontRenderer extends VegaSlimmer {
+  asController: VegaFont['asController'];
+  render(hostClasses: string): Element;
+}

package/dist/types/components/vega-font/vega-font.d.ts

@@ -1,15 +1,19 @@
 import { BreakpointsTokenType, TextColorsTokenType, TypographyTokenType } from '../../types/designToken.type';
 import { ResponsiveType } from '../../types/ui.type';
+import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/pageResizeObserverSlimmer';
 import { VegaFontVariantController } from './slimmers/controllers/vega-font-variant-controller';
 import { VegaFontAsController } from './slimmers/controllers/vega-font-as-controller';
 import { VegaFontAs } from './types';
 import { VegaFontClassesController } from './slimmers/controllers/vega-font-classes-controller';
+import { VegaFontRenderer } from './slimmers/renderers/vega-font-renderer';
 export declare class VegaFont {
+  protected readonly globalSlimmers: GlobalSlimmers;
   protected readonly pageResizeSlimmer: PageResizeObserverSlimmer;
   protected readonly variantController: VegaFontVariantController;
   protected readonly asController: VegaFontAsController;
   protected readonly classesController: VegaFontClassesController;
+  protected readonly renderer: VegaFontRenderer;
   host: HTMLVegaFontElement;
   currentBreakpoint: BreakpointsTokenType;
   /**