@oruga-ui/oruga-next

import type { ClassDefinition, ComponentConfigBase, DynamicComponent, Numberish, } from "@/types"; // Auto generated component theme config definition declare module "../index" { interface OrugaConfig { autocomplete?: ComponentConfigBase & Partial<{ /** * Options won't be filtered based on the input value on clientside */ backendFiltering: boolean; /** * Menu tag name */ menuTag: DynamicComponent; /** * Menu item tag name */ itemTag: DynamicComponent; /** * Size of the input control */ size: string; /** * Position of the dropdown */ position: "auto" | "bottom" | "top"; /** * Makes input full width when inside a grouped or addon field */ expanded: boolean; /** * Number of milliseconds to delay before to emit input event */ debounce: number; /** * The first option will always be focused (easier to just hit enter or tab) */ keepFirst: boolean; /** * Keep open dropdown list after select */ keepOpen: boolean; /** * Clear input text on select */ clearOnSelect: boolean; /** * Open dropdown list on focus */ openOnFocus: boolean; /** * Max height of dropdown content */ maxHeight: Numberish; /** * Icon pack to use */ iconPack: string; /** * Icon to be shown */ icon: string; /** * Icon to be added on the right side */ iconRight: string; /** * Add a button/icon to clear the inputed text */ clearable: boolean; /** * Icon name to be added on the clear button */ clearIcon: string; /** * Dropdown content (items) are shown into a modal on mobile */ mobileModal: boolean; /** * Dropdown content (items) are shown into a modal on desktop */ desktopModal: boolean; /** * Transition name to apply on dropdown list */ animation: string; /** * Native options to use in HTML5 validation */ autocomplete: string; /** * Append the component to another part of the DOM. Set `true` to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used. */ teleport: boolean | object | string; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the menu items */ itemClass: ClassDefinition; /** * Class of the menu group item */ itemGroupClass: ClassDefinition; /** * Class of the empty menu placeholder item */ itemEmptyClass: ClassDefinition; /** * Class of the menu header item */ itemHeaderClass: ClassDefinition; /** * Class of the menu footer item */ itemFooterClass: ClassDefinition; /** * Class configuration for the internal input component */ inputClasses: Record<string, any>; }>; breadcrumb?: ComponentConfigBase & Partial<{ /** * Size of the breadcrumb */ size: string; /** * Color variant of the breadcrumb */ variant: string; /** * Position of the breadcrumb */ position: "centered" | "left" | "right"; /** * The separator between breadcrumb items */ separator: string; /** * Accessibility aria-label to be passed to the nav wrapper element */ ariaLabel: string; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element with size */ sizeClass: ClassDefinition; /** * Class of the root element with variant */ variantClass: ClassDefinition; /** * Class of the root element with alignment */ positionClass: ClassDefinition; /** * Class of the list element */ listClass: ClassDefinition; /** * Icon pack to use */ iconPack: string; /** * Icon size */ iconSize: string; /** * Item tag name */ tag: DynamicComponent; /** * Class of the item element */ itemClass: ClassDefinition; /** * Class of the item element when disabled */ disabledClass: ClassDefinition; /** * Class of the item element when active */ activeClass: ClassDefinition; /** * Class of the item seperator element */ seperatorClass: ClassDefinition; /** * Class of the item link element */ linkClass: ClassDefinition; /** * Class of the item icon element */ iconClass: ClassDefinition; /** * Class of the item left icon element */ iconLeftClass: ClassDefinition; /** * Class of the item right icon element */ iconRightClass: ClassDefinition; }>; button?: ComponentConfigBase & Partial<{ /** * Button tag name */ tag: DynamicComponent; /** * Color variant of the control */ variant: string; /** * Size of the control */ size: string; /** * Icon pack to use */ iconPack: string; /** * Enable rounded style */ rounded: boolean; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element with size */ sizeClass: ClassDefinition; /** * Class of the root element with variant */ variantClass: ClassDefinition; /** * Class of the root element when outlined */ outlinedClass: ClassDefinition; /** * Class of the root element when inverted */ invertedClass: ClassDefinition; /** * Class of the root element when loading */ loadingClass: ClassDefinition; /** * Class of the root element when expanded */ expandedClass: ClassDefinition; /** * Class of the root element when rounded */ roundedClass: ClassDefinition; /** * Class of the root element when disabled */ disabledClass: ClassDefinition; /** * Class of the inner wrapper element */ wrapperClass: ClassDefinition; /** * Class of the icon element */ iconClass: ClassDefinition; /** * Class of the icon element on the left */ iconLeftClass: ClassDefinition; /** * Class of the icon element on the right */ iconRightClass: ClassDefinition; /** * Class of the label element */ labelClass: ClassDefinition; }>; carousel?: ComponentConfigBase & Partial<{ /** * Timer interval for `autoplay` */ interval: number; /** * Position of the indicator - depends on used theme */ indicatorPosition: string; /** * Style of the indicator - depends on used theme */ indicatorStyle: string; /** * Number of items to show at once */ itemsToShow: number; /** * Number of items to switch at once */ itemsToList: number; /** * Show next / prev arrows */ arrows: boolean; /** * Show next / prev arrows only on hover */ arrowsHover: boolean; /** * Icon pack to use */ iconPack: string; /** * Icon size */ iconSize: string; /** * Icon name for previous button */ iconPrev: string; /** * Icon name for next button */ iconNext: string; /** * Icon name for autoplay pause button */ iconAutoplayPause: string; /** * Icon name for autoplay resume button */ iconAutoplayResume: string; /** * Accessibility autoplay pause button aria label */ ariaAutoplayPauseLabel: string; /** * Accessibility autoplay resume button aria label */ ariaAutoplayResumeLabel: string; /** * Accessibility next button aria label */ ariaNextLabel: string; /** * Accessibility previous button aria label */ ariaPreviousLabel: string; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element in overlay */ overlayClass: ClassDefinition; /** * Class of the inner wrapper element */ wrapperClass: ClassDefinition; /** * Class of the items container element */ itemsClass: ClassDefinition; /** * Class of the items container element when dragging */ itemsDraggingClass: ClassDefinition; /** * Class of the icon button elements */ iconClass: ClassDefinition; /** * Class of the prev icon button element */ iconPrevClass: ClassDefinition; /** * Class of the next icon button element */ iconNextClass: ClassDefinition; /** * Class of the autoplay icon button element */ iconAutoplayClass: ClassDefinition; /** * Class of the indicators tablist element */ indicatorsClass: ClassDefinition; /** * Class of the indicators tablist element when inside */ indicatorsInsideClass: ClassDefinition; /** * Class of the indicators tablist element with position */ indicatorsPositionClass: ClassDefinition; /** * Class of the indicator tab element */ indicatorClass: ClassDefinition; /** * Class of the indicator item element */ indicatorItemClass: ClassDefinition; /** * Class of the indicator element when active */ indicatorItemActiveClass: ClassDefinition; /** * Class of the indicator element to separate different styles */ indicatorItemStyleClass: ClassDefinition; /** * Class of the item element */ itemClass: ClassDefinition; /** * Class of the item element when active */ itemActiveClass: ClassDefinition; /** * Class of the item element when clickable */ itemClickableClass: ClassDefinition; /** * Class of the item title element */ itemTitleClass: ClassDefinition; /** * Class of the item subtitle element */ itemSubtitleClass: ClassDefinition; /** * Class of the item image wrapper element */ itemImageClass: ClassDefinition; }>; checkbox?: ComponentConfigBase & Partial<{ /** * Color variant of the control */ variant: string; /** * Size of the control */ size: string; /** * Same as native autocomplete options to use in HTML5 validation */ autocomplete: string; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element with size */ sizeClass: ClassDefinition; /** * Class of the root element with variant */ variantClass: ClassDefinition; /** * Class of the root element when disabled */ disabledClass: ClassDefinition; /** * Class of the root element when checked */ checkedClass: ClassDefinition; /** * Class of the the root element when indeterminate */ indeterminateClass: ClassDefinition; /** * Class of the native input element */ inputClass: ClassDefinition; /** * Class of the label element */ labelClass: ClassDefinition; }>; collapse?: ComponentConfigBase & Partial<{ /** * Custom animation (transition name) */ animation: string; /** * Trigger position */ position: "bottom" | "top"; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element when expanded */ expandedClass: ClassDefinition; /** * Clas of the root element with position */ positionClass: ClassDefinition; /** * Class of the trigger element */ triggerClass: ClassDefinition; /** * Class of the content */ contentClass: ClassDefinition; }>; datepicker?: ComponentConfigBase & Partial<{ /** * Set custom day names, else use names based on locale */ dayNames: string[]; /** * Set custom month names, else use names based on locale */ monthNames: string[]; /** * Size of the control input */ size: string; /** * Makes input full width when inside a grouped or addon field */ expanded: boolean; /** * Open dropdown on focus */ openOnFocus: boolean; /** * Close dropdown on click */ closeOnClick: boolean; /** * Custom function to format a date into a string */ formatter: ((date: [] | Date | Date[] | [Date, Date]) => string) | undefined; /** * Custom function to parse a string into a date */ parser: ((date: string) => [] | Date | Date[] | [Date, Date]) | undefined; /** * Date creator function, default is `new Date()` */ creator: (() => Date); /** * Define a list of weeks which can not be selected */ unselectableDaysOfWeek: number[]; /** * Show nearby month days */ nearbyMonthDays: boolean; /** * Define if nearby month days can be selected */ nearbySelectableMonthDays: boolean; /** * Show week numbers */ showWeekNumber: boolean; /** * Define if week numbers are clickable */ weekNumberClickable: boolean; /** * Set the first day of a week */ firstDayOfWeek: number; /** * Define the range of years to show */ yearsRange: number[]; /** * Icon pack to use */ iconPack: string; /** * Icon to be shown */ icon: string; /** * Icon to be added on the right side */ iconRight: string; /** * Icon name for previous icon */ iconPrev: string; /** * Icon name for next icon */ iconNext: string; /** * Dropdown content is shown into a modal on mobile */ mobileModal: boolean; /** * Dropdown content is shown into a modal on desktop */ desktopModal: boolean; /** * Enable mobile native input if mobile agent */ mobileNative: boolean; /** * Mobile breakpoint as `max-width` value */ mobileBreakpoint: string; /** * Append the component to another part of the DOM. Set `true` to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used. */ teleport: boolean | object | string; /** * Accessibility next button aria label */ ariaNextLabel: string; /** * Accessibility month select aria label */ ariaSelectMonthLabel: string; /** * Accessibility year select aria label */ ariaSelectYearLabel: string; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element when on mobile */ mobileClass: ClassDefinition; /** * Class of the root element with size */ sizeClass: ClassDefinition; /** * Class of the root element when expanded */ expandedClass: ClassDefinition; /** * Class of the box container element where you choose the date */ boxClass: ClassDefinition; /** * Class of the header element inside the box */ headerClass: ClassDefinition; /** * Class of the prev button element inside the box */ prevButtonClass: ClassDefinition; /** * Class of the next button element inside the box */ nextButtonClass: ClassDefinition; /** * Class of the month and year selects container inside the box */ listsClass: ClassDefinition; /** * Class of the footer element */ footerClass: ClassDefinition; /** * Class of the dates table element inside the box */ tableClass: ClassDefinition; /** * Class of dates table header element with days of the week */ tableHeadClass: ClassDefinition; /** * Class of the cell element inside the table header */ tableHeadCellClass: ClassDefinition; /** * Class of the table body element inside the box */ tableBodyClass: ClassDefinition; /** * Class of the table row element */ tableRowClass: ClassDefinition; /** * Class of the table cell element */ tableCellClass: ClassDefinition; /** * Class of the table cell element when nearby month days are hidden */ tableCellInvisibleClass: ClassDefinition; /** * Class of table cell element when selected */ tableCellSelectedClass: ClassDefinition; /** * Class of the first selected table cell element when in range */ tableCellFirstSelectedClass: ClassDefinition; /** * Class of the table cell elements within the range when the range is selected */ tableCellWithinSelectedClass: ClassDefinition; /** * Class of the last selected table cell element during range selection */ tableCellLastSelectedClass: ClassDefinition; /** * Class of the first hovered table cell element during range selection */ tableCellFirstHoveredClass: ClassDefinition; /** * Class of the table cell element when hovered during range selection */ tableCellWithinHoveredClass: ClassDefinition; /** * Class of the last table cell element hovered during range selection */ tableCellLastHoveredClass: ClassDefinition; /** * Class of the table cell element of the current day */ tableCellTodayClass: ClassDefinition; /** * Class of the table cell element when selectable */ tableCellSelectableClass: ClassDefinition; /** * Class of the table cell element when unselectable */ tableCellUnselectableClass: ClassDefinition; /** * Class of the table cell element when nearby days (prev/next month) are selectable */ tableCellNearbyClass: ClassDefinition; /** * Class of the cell element of a row when at least one event is present */ tableCellEventsClass: ClassDefinition; /** * Class of the events container element */ tableEventsClass: ClassDefinition; /** * Class of the event element */ tableEventClass: ClassDefinition; /** * Class of the event element with variant */ tableEventVariantClass: ClassDefinition; /** * Class of the event element with indicator */ tableEventIndicatorClass: ClassDefinition; /** * Class of the month table element inside the box when type is `month` */ monthClass: ClassDefinition; /** * Class of the table container when type is `month` */ monthTableClass: ClassDefinition; /** * Class of the table cell element when type is `month` */ monthCellClass: ClassDefinition; /** * Class of table cell element when selected when type is `month` */ monthCellSelectedClass: ClassDefinition; /** * Class of the first selected table cell element when in range when type is `month` */ monthCellFirstSelectedClass: ClassDefinition; /** * Class of the table cell elements within the range when the range is selected when type is `month` */ monthCellWithinSelectedClass: ClassDefinition; /** * Class of the last selected table cell element during range selection when type is `month` */ monthCellLastSelectedClass: ClassDefinition; /** * Class of the first hovered table cell element during range selection when type is `month` */ monthCellWithinHoveredRangeClass: ClassDefinition; /** * Class of the table cell element when hovered during range selection when type is `month` */ monthCellFirstHoveredClass: ClassDefinition; /** * Class of the table cell element when hovered during range selection and cell is in range when type is `month` */ monthCellWithinHoveredClass: ClassDefinition; /** * Class of the last table cell element when hovered during range selection when type is `month` */ monthCellLastHoveredClass: ClassDefinition; /** * Class of the table cell element of the current day when type is `month` */ monthCellTodayClass: ClassDefinition; /** * Class of the table cell element whis is selectable when type is `month` */ monthCellSelectableClass: ClassDefinition; /** * Class of the table cell element whis is unselectable when type is `month` */ monthCellUnselectableClass: ClassDefinition; /** * Class of the events container when type is `month` */ monthCellEventsClass: ClassDefinition; /** * Class of the events container element when type is `month` */ monthEventsClass: ClassDefinition; /** * Class of the event element when type is `month` */ monthEventClass: ClassDefinition; /** * Class of the event element with variant when type is `month` */ monthEventVariantClass: ClassDefinition; /** * Class of the event element with indicator when type is `month` */ monthEventIndicatorClass: ClassDefinition; /** * Class for the underlaying dropdown component */ dropdownClass: ClassDefinition; /** * Class for the HTML input element */ inputClass: ClassDefinition; /** * Class configuration for the internal input component */ inputClasses: Record<string, any>; /** * Class configuration for the internal dropdown component */ dropdownClasses: Record<string, any>; /** * Class configuration for the internal select component */ selectClasses: Record<string, any>; }>; datetimepicker?: ComponentConfigBase & Partial<{ /** * Size of the input control */ size: string; /** * Makes input full width when inside a grouped or addon field */ expanded: boolean; /** * Open dropdown on focus */ openOnFocus: boolean; /** * Custom function to format a date into a string */ dateFormatter: ((date: Date) => string) | undefined; /** * Custom function to parse a string into a date */ dateParser: ((date: string) => Date) | undefined; /** * Date creator function, default is `new Date()` */ datetimeCreator: (() => Date); /** * Icon pack to use */ iconPack: string; /** * Icon to be shown */ icon: string; /** * Icon to be added on the right side */ iconRight: string; /** * Dropdown content is shown into a modal on mobile */ mobileModal: boolean; /** * Dropdown content is shown into a modal on desktop */ desktopModal: boolean; /** * Enable mobile native input if mobile agent */ mobileNative: boolean; /** * Append the component to another part of the DOM. Set `true` to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used. */ teleport: boolean | object | string; /** * Class of the Datepicker component wrapper element */ datepickerWrapperClass: ClassDefinition; /** * Class of the Timepicker component wrapper element */ timepickerWrapperClass: ClassDefinition; }>; dialog?: ComponentConfigBase & Partial<{ /** * Custom animation (transition name) */ animation: string; /** * Show an backdrop overlay background; make it a modal dialog */ backdrop: boolean; /** * Max width of the dialog */ maxWidth: Numberish; /** * Max height of the dialog */ maxHeight: Numberish; /** * Adds close button to the header to hide the dialog */ closeable: boolean; /** * Close the dialog when clicked outside of the panel */ closeOnBackdrop: boolean; /** * Close the dialog when pressing escape key */ closeOnEscape: boolean; /** * Close the dialog when the confirm button is preset */ closeOnConfirm: boolean; /** * Whether background scrollbar should be blocked/removed when dialog is visible */ blockScroll: boolean; /** * Icon pack to use for the close icon */ iconPack: string; /** * Close icon name */ closeIcon: string; /** * Close icon size */ closeIconSize: string; /** * Accessibility label for the close button */ ariaCloseLabel: string; /** * Mobile breakpoint as `max-width` value */ mobileBreakpoint: string; /** * Append the component to another part of the DOM. Set `true` to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used. */ teleport: boolean | object | string; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element when on mobile */ mobileClass: ClassDefinition; /** * Class of the root element when active */ activeClass: ClassDefinition; /** * Class of the root element when fullscreen */ fullscreenClass: ClassDefinition; /** * Class of the root element when teleported */ teleportClass: ClassDefinition; /** * Class of the root element with text-position */ textPositionClass: ClassDefinition; /** * Class of the backdrop overlay element */ backdropClass: ClassDefinition; /** * Class of the wrapper element */ wrapperClass: ClassDefinition; /** * Class of the header element */ headerClass: ClassDefinition; /** * Class of the header title element */ titleClass: ClassDefinition; /** * Class of the header subtitle element */ subtitleClass: ClassDefinition; /** * Class of the header close element */ closeClass: ClassDefinition; /** * Class of the image figure element */ figureClass: ClassDefinition; /** * Class of the image element */ imageClass: ClassDefinition; /** * Class of the body element */ bodyClass: ClassDefinition; /** * Class of the body content element */ contentClass: ClassDefinition; /** * Class of the footer element */ footerClass: ClassDefinition; /** * Class of the footer element with position */ footerPositionClass: ClassDefinition; /** * Class of the confirm button element */ confirmButtunClass: ClassDefinition; /** * Class of the cancel button element */ cancelButtonClass: ClassDefinition; /** * Class of the body when modal is open and scroll is clipped */ scrollClipClass: ClassDefinition; /** * Class of the body when modal is open and scroll is keeped */ scrollKeepClass: ClassDefinition; }>; dropdown?: ComponentConfigBase & Partial<{ /** * Max height of dropdown content */ maxHeight: Numberish; /** * Position of the dropdown relative to the trigger */ position: "auto" | "bottom-left" | "bottom-right" | "bottom" | "left" | "right" | "top-left" | "top-right" | "top"; /** * Custom animation (transition name) */ animation: string; /** * Dropdown menu tag name */ menuTag: DynamicComponent; /** * Dropdown item tag name */ itemTag: DynamicComponent; /** * Dropdown trigger tag name */ triggerTag: DynamicComponent; /** * Show when hover over the trigger */ openOnHover: boolean; /** * Show when trigger get focused */ openOnFocus: boolean; /** * Show when clicked on the trigger */ openOnClick: boolean; /** * Show when right clicked on the trigger */ openOnContextmenu: boolean; /** * Keep dropdown list open when item get selected */ keepOpen: boolean; /** * The first option will always be pre-selected (easier to just hit enter or tab) */ keepFirst: boolean; /** * Close Dropdown when clicked outside */ closeOnOutside: boolean; /** * Close Dropdown when page get scrolled */ closeOnScroll: boolean; /** * Select current focused item when focused */ selectOnFocus: boolean; /** * Select current focused item when closed */ selectOnClose: boolean; /** * Dropdown content (items) are shown into a modal on mobile */ mobileModal: boolean; /** * Dropdown content (items) are shown into a modal on desktop */ desktopModal: boolean; /** * Mobile breakpoint as `max-width` value */ mobileBreakpoint: string; /** * Append the component to another part of the DOM. Set `true` to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used. */ teleport: boolean | object | string; /** * Set `true` to remove the body scrollbar. When `false`, a non-scrollable scrollbar will be kept to avoid moving the background, but will set the body to a fixed position, which may break some layouts. */ clipScroll: boolean; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element when on mobile */ mobileClass: ClassDefinition; /** * Class of the root element when shown as modal */ modalClass: ClassDefinition; /** * Class of the root element when teleported */ teleportClass: ClassDefinition; /** * Class of the root element when inlined * @deprecated since 0.13.0, use the `OListbox` component instead */ inlineClass: ClassDefinition; /** * Class of the root element when disabled */ disabledClass: ClassDefinition; /** * Class of the root element when expanded */ expandedClass: ClassDefinition; /** * Class for the root element with position */ positionClass: ClassDefinition; /** * Class for the root element when active or inline */ activeClass: ClassDefinition; /** * Class for the root element when trigger is hoverable */ hoverableClass: ClassDefinition; /** * Class of the trigger element */ triggerClass: ClassDefinition; /** * Class of the menu element */ menuClass: ClassDefinition; /** * Class of the menu element with position */ menuPositionClass: ClassDefinition; /** * Class of the menu element when active or inline */ menuActiveClass: ClassDefinition; /** * Class of the overlay when is shown as modal */ overlayClass: ClassDefinition; /** * Class of the body when dropdown is open and scroll is clipped */ scrollClipClass: ClassDefinition; /** * Class of the body when dropdown is open and scroll is keeped */ scrollKeepClass: ClassDefinition; /** * Class of the item element. */ itemClass: ClassDefinition; /** * Class of the item element when selected */ itemSelectedClass: ClassDefinition; /** * Class of the item element when focused */ itemFocusedClass: ClassDefinition; /** * Class of the item element when clickable */ itemClickableClass: ClassDefinition; /** * Class of the item element when disabled */ itemDisabledClass: ClassDefinition; }>; field?: ComponentConfigBase & Partial<{ /** * Size of the field label */ labelSize: string; /** * Size of the field message */ messageSize: string; /** * Message element tag name */ messageTag: DynamicComponent; /** * Mobile breakpoint as `max-width` value */ mobileBreakpoint: string; /** * Class of the root element */ rootClass: ClassDefinition; /** * Class of the root element when on mobile */ mobileClass: ClassDefinition; /** * Class of the root element when the form element is focused */ focusedClass: ClassDefinition; /** * Class of the root element when the form element is filled */ filledClass: ClassDefinition; /** * Class for the root element with variant */ variantClass: ClassDefinition; /** * Class for the body wrapper element */ bodyClass: ClassDefinition; /** * Class for inner wrapper element when grouped */ groupedClass: ClassDefinition; /** * Class of the inner wrapper element when element get automatically attached together inside a field */ addonsClass: ClassDefinition; /** * Class for inner body wrapper element to fill up multiple lines */ multilineClass: ClassDefinition; /** * Class to align label and control in horizontal forms */ horizontalClass: ClassDefinition; /** * Class for the label element when horizontal */ horizontalLabelClass: ClassDefinition; /** * Class for the body element when horizontal */ horizontalBodyClass: ClassDefinition; /** * Class for the label element */ labelClass: ClassDefinition; /** * Class for the label element with size */ labelSizeClass: ClassDefinition; /** * Class for the label element with variant */ labelVariantClass: ClassDefinition; /** * Class for the message element */ messageClass: ClassDefinition; /** * Class for the message element with size */ messageSizeClass: ClassDefinition; /** * Class for the message element with variant */ messageVariantClass: ClassDe