@maggioli-design-system/magma-react 1.11.8 → 2.0.0-alpha.1

package/README.md

@@ -2,6 +2,14 @@
 
 Magma React specific building blocks on top of [@maggioli-design-system/magma](https://www.npmjs.com/package/@maggioli-design-system/magma) components.
 
+## Compatibility
+
+`magma-react` follows the same major version as `magma`. Use the versions of `@maggioli-design-system/design-tokens` and `@maggioli-design-system/styles` matching your magma major version:
+
+| magma | design-tokens | styles |
+| :--- | :--- | :--- |
+| `1.x` (before Magma 2) | `13.x` (latest `13.7.2`) | `15.x` (latest `15.11.1`) |
+| `2.x` and later | `>= 14` | `>= 16` |
 
 ## Installation
 

package/dist/components.js

@@ -70,6 +70,8 @@ import { MdsPrefConsumption as MdsPrefConsumptionElement, defineCustomElement as
 import { MdsPrefContrast as MdsPrefContrastElement, defineCustomElement as defineMdsPrefContrast } from "@maggioli-design-system/magma/dist/components/mds-pref-contrast.js";
 import { MdsPrefLanguageItem as MdsPrefLanguageItemElement, defineCustomElement as defineMdsPrefLanguageItem } from "@maggioli-design-system/magma/dist/components/mds-pref-language-item.js";
 import { MdsPrefLanguage as MdsPrefLanguageElement, defineCustomElement as defineMdsPrefLanguage } from "@maggioli-design-system/magma/dist/components/mds-pref-language.js";
+import { MdsPrefThemeVariantItem as MdsPrefThemeVariantItemElement, defineCustomElement as defineMdsPrefThemeVariantItem } from "@maggioli-design-system/magma/dist/components/mds-pref-theme-variant-item.js";
+import { MdsPrefThemeVariant as MdsPrefThemeVariantElement, defineCustomElement as defineMdsPrefThemeVariant } from "@maggioli-design-system/magma/dist/components/mds-pref-theme-variant.js";
 import { MdsPrefTheme as MdsPrefThemeElement, defineCustomElement as defineMdsPrefTheme } from "@maggioli-design-system/magma/dist/components/mds-pref-theme.js";
 import { MdsPref as MdsPrefElement, defineCustomElement as defineMdsPref } from "@maggioli-design-system/magma/dist/components/mds-pref.js";
 import { MdsPriceTableFeaturesCell as MdsPriceTableFeaturesCellElement, defineCustomElement as defineMdsPriceTableFeaturesCell } from "@maggioli-design-system/magma/dist/components/mds-price-table-features-cell.js";
@@ -116,7 +118,7 @@ import React from 'react';
 export const MdsAccordion = /*@__PURE__*/ createComponent({
     tagName: 'mds-accordion',
     elementClass: MdsAccordionElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsAccordionChange: 'mdsAccordionChange' },
     defineCustomElement: defineMdsAccordion
@@ -124,7 +126,7 @@ export const MdsAccordion = /*@__PURE__*/ createComponent({
 export const MdsAccordionItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-accordion-item',
     elementClass: MdsAccordionItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsAccordionItemSelect: 'mdsAccordionItemSelect',
@@ -136,7 +138,7 @@ export const MdsAccordionItem = /*@__PURE__*/ createComponent({
 export const MdsAccordionTimer = /*@__PURE__*/ createComponent({
     tagName: 'mds-accordion-timer',
     elementClass: MdsAccordionTimerElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsAccordionTimerChange: 'mdsAccordionTimerChange' },
     defineCustomElement: defineMdsAccordionTimer
@@ -144,7 +146,7 @@ export const MdsAccordionTimer = /*@__PURE__*/ createComponent({
 export const MdsAccordionTimerItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-accordion-timer-item',
     elementClass: MdsAccordionTimerItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsAccordionTimerItemClickSelect: 'mdsAccordionTimerItemClickSelect',
@@ -157,7 +159,7 @@ export const MdsAccordionTimerItem = /*@__PURE__*/ createComponent({
 export const MdsAuthor = /*@__PURE__*/ createComponent({
     tagName: 'mds-author',
     elementClass: MdsAuthorElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsAuthor
@@ -165,7 +167,7 @@ export const MdsAuthor = /*@__PURE__*/ createComponent({
 export const MdsAvatar = /*@__PURE__*/ createComponent({
     tagName: 'mds-avatar',
     elementClass: MdsAvatarElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsAvatar
@@ -173,7 +175,7 @@ export const MdsAvatar = /*@__PURE__*/ createComponent({
 export const MdsAvatarStack = /*@__PURE__*/ createComponent({
     tagName: 'mds-avatar-stack',
     elementClass: MdsAvatarStackElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsAvatarStack
@@ -181,7 +183,7 @@ export const MdsAvatarStack = /*@__PURE__*/ createComponent({
 export const MdsAvatarStackItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-avatar-stack-item',
     elementClass: MdsAvatarStackItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsAvatarStackItem
@@ -189,7 +191,7 @@ export const MdsAvatarStackItem = /*@__PURE__*/ createComponent({
 export const MdsBadge = /*@__PURE__*/ createComponent({
     tagName: 'mds-badge',
     elementClass: MdsBadgeElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsBadge
@@ -197,7 +199,7 @@ export const MdsBadge = /*@__PURE__*/ createComponent({
 export const MdsBanner = /*@__PURE__*/ createComponent({
     tagName: 'mds-banner',
     elementClass: MdsBannerElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsBannerClose: 'mdsBannerClose' },
     defineCustomElement: defineMdsBanner
@@ -205,7 +207,7 @@ export const MdsBanner = /*@__PURE__*/ createComponent({
 export const MdsBenchmarkBar = /*@__PURE__*/ createComponent({
     tagName: 'mds-benchmark-bar',
     elementClass: MdsBenchmarkBarElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsBenchmarkBar
@@ -213,7 +215,7 @@ export const MdsBenchmarkBar = /*@__PURE__*/ createComponent({
 export const MdsBibliography = /*@__PURE__*/ createComponent({
     tagName: 'mds-bibliography',
     elementClass: MdsBibliographyElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsBibliography
@@ -221,7 +223,7 @@ export const MdsBibliography = /*@__PURE__*/ createComponent({
 export const MdsBreadcrumb = /*@__PURE__*/ createComponent({
     tagName: 'mds-breadcrumb',
     elementClass: MdsBreadcrumbElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsBreadcrumbChange: 'mdsBreadcrumbChange' },
     defineCustomElement: defineMdsBreadcrumb
@@ -229,7 +231,7 @@ export const MdsBreadcrumb = /*@__PURE__*/ createComponent({
 export const MdsBreadcrumbItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-breadcrumb-item',
     elementClass: MdsBreadcrumbItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsBreadcrumbItemSelect: 'mdsBreadcrumbItemSelect' },
     defineCustomElement: defineMdsBreadcrumbItem
@@ -237,7 +239,7 @@ export const MdsBreadcrumbItem = /*@__PURE__*/ createComponent({
 export const MdsButton = /*@__PURE__*/ createComponent({
     tagName: 'mds-button',
     elementClass: MdsButtonElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsButton
@@ -245,7 +247,7 @@ export const MdsButton = /*@__PURE__*/ createComponent({
 export const MdsButtonDropdown = /*@__PURE__*/ createComponent({
     tagName: 'mds-button-dropdown',
     elementClass: MdsButtonDropdownElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsButtonDropdown
@@ -253,7 +255,7 @@ export const MdsButtonDropdown = /*@__PURE__*/ createComponent({
 export const MdsButtonGroup = /*@__PURE__*/ createComponent({
     tagName: 'mds-button-group',
     elementClass: MdsButtonGroupElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsButtonGroup
@@ -261,7 +263,7 @@ export const MdsButtonGroup = /*@__PURE__*/ createComponent({
 export const MdsCalendar = /*@__PURE__*/ createComponent({
     tagName: 'mds-calendar',
     elementClass: MdsCalendarElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsCalendarChange: 'mdsCalendarChange',
@@ -272,7 +274,7 @@ export const MdsCalendar = /*@__PURE__*/ createComponent({
 export const MdsCalendarCell = /*@__PURE__*/ createComponent({
     tagName: 'mds-calendar-cell',
     elementClass: MdsCalendarCellElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsCalendarCell
@@ -280,7 +282,7 @@ export const MdsCalendarCell = /*@__PURE__*/ createComponent({
 export const MdsCard = /*@__PURE__*/ createComponent({
     tagName: 'mds-card',
     elementClass: MdsCardElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsCard
@@ -288,7 +290,7 @@ export const MdsCard = /*@__PURE__*/ createComponent({
 export const MdsCardContent = /*@__PURE__*/ createComponent({
     tagName: 'mds-card-content',
     elementClass: MdsCardContentElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsCardContent
@@ -296,7 +298,7 @@ export const MdsCardContent = /*@__PURE__*/ createComponent({
 export const MdsCardFooter = /*@__PURE__*/ createComponent({
     tagName: 'mds-card-footer',
     elementClass: MdsCardFooterElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsCardFooter
@@ -304,7 +306,7 @@ export const MdsCardFooter = /*@__PURE__*/ createComponent({
 export const MdsCardHeader = /*@__PURE__*/ createComponent({
     tagName: 'mds-card-header',
     elementClass: MdsCardHeaderElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsCardHeader
@@ -312,7 +314,7 @@ export const MdsCardHeader = /*@__PURE__*/ createComponent({
 export const MdsCardMedia = /*@__PURE__*/ createComponent({
     tagName: 'mds-card-media',
     elementClass: MdsCardMediaElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsCardMedia
@@ -320,7 +322,7 @@ export const MdsCardMedia = /*@__PURE__*/ createComponent({
 export const MdsChip = /*@__PURE__*/ createComponent({
     tagName: 'mds-chip',
     elementClass: MdsChipElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsChipClickLabel: 'mdsChipClickLabel',
@@ -332,7 +334,7 @@ export const MdsChip = /*@__PURE__*/ createComponent({
 export const MdsDetails = /*@__PURE__*/ createComponent({
     tagName: 'mds-details',
     elementClass: MdsDetailsElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsDetailsChange: 'mdsDetailsChange' },
     defineCustomElement: defineMdsDetails
@@ -340,7 +342,7 @@ export const MdsDetails = /*@__PURE__*/ createComponent({
 export const MdsDropdown = /*@__PURE__*/ createComponent({
     tagName: 'mds-dropdown',
     elementClass: MdsDropdownElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsDropdownVisible: 'mdsDropdownVisible',
@@ -352,7 +354,7 @@ export const MdsDropdown = /*@__PURE__*/ createComponent({
 export const MdsEmoji = /*@__PURE__*/ createComponent({
     tagName: 'mds-emoji',
     elementClass: MdsEmojiElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsEmoji
@@ -360,7 +362,7 @@ export const MdsEmoji = /*@__PURE__*/ createComponent({
 export const MdsEntity = /*@__PURE__*/ createComponent({
     tagName: 'mds-entity',
     elementClass: MdsEntityElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsEntity
@@ -368,7 +370,7 @@ export const MdsEntity = /*@__PURE__*/ createComponent({
 export const MdsFile = /*@__PURE__*/ createComponent({
     tagName: 'mds-file',
     elementClass: MdsFileElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsFileDownload: 'mdsFileDownload' },
     defineCustomElement: defineMdsFile
@@ -376,7 +378,7 @@ export const MdsFile = /*@__PURE__*/ createComponent({
 export const MdsFilePreview = /*@__PURE__*/ createComponent({
     tagName: 'mds-file-preview',
     elementClass: MdsFilePreviewElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsFileDownload: 'mdsFileDownload',
@@ -387,7 +389,7 @@ export const MdsFilePreview = /*@__PURE__*/ createComponent({
 export const MdsFilter = /*@__PURE__*/ createComponent({
     tagName: 'mds-filter',
     elementClass: MdsFilterElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsFilterChange: 'mdsFilterChange' },
     defineCustomElement: defineMdsFilter
@@ -395,7 +397,7 @@ export const MdsFilter = /*@__PURE__*/ createComponent({
 export const MdsFilterItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-filter-item',
     elementClass: MdsFilterItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsFilterItemSelect: 'mdsFilterItemSelect' },
     defineCustomElement: defineMdsFilterItem
@@ -403,7 +405,7 @@ export const MdsFilterItem = /*@__PURE__*/ createComponent({
 export const MdsHeader = /*@__PURE__*/ createComponent({
     tagName: 'mds-header',
     elementClass: MdsHeaderElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsHeaderClose: 'mdsHeaderClose',
@@ -414,7 +416,7 @@ export const MdsHeader = /*@__PURE__*/ createComponent({
 export const MdsHeaderBar = /*@__PURE__*/ createComponent({
     tagName: 'mds-header-bar',
     elementClass: MdsHeaderBarElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsHeaderBarOpen: 'mdsHeaderBarOpen' },
     defineCustomElement: defineMdsHeaderBar
@@ -422,7 +424,7 @@ export const MdsHeaderBar = /*@__PURE__*/ createComponent({
 export const MdsHelp = /*@__PURE__*/ createComponent({
     tagName: 'mds-help',
     elementClass: MdsHelpElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsHelp
@@ -430,7 +432,7 @@ export const MdsHelp = /*@__PURE__*/ createComponent({
 export const MdsHorizontalScroll = /*@__PURE__*/ createComponent({
     tagName: 'mds-horizontal-scroll',
     elementClass: MdsHorizontalScrollElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsHorizontalScroll
@@ -438,7 +440,7 @@ export const MdsHorizontalScroll = /*@__PURE__*/ createComponent({
 export const MdsHr = /*@__PURE__*/ createComponent({
     tagName: 'mds-hr',
     elementClass: MdsHrElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsHr
@@ -446,7 +448,7 @@ export const MdsHr = /*@__PURE__*/ createComponent({
 export const MdsIcon = /*@__PURE__*/ createComponent({
     tagName: 'mds-icon',
     elementClass: MdsIconElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsIcon
@@ -454,7 +456,7 @@ export const MdsIcon = /*@__PURE__*/ createComponent({
 export const MdsImg = /*@__PURE__*/ createComponent({
     tagName: 'mds-img',
     elementClass: MdsImgElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsImgLoadError: 'mdsImgLoadError',
@@ -465,7 +467,7 @@ export const MdsImg = /*@__PURE__*/ createComponent({
 export const MdsInput = /*@__PURE__*/ createComponent({
     tagName: 'mds-input',
     elementClass: MdsInputElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsInputChange: 'mdsInputChange',
@@ -480,7 +482,7 @@ export const MdsInput = /*@__PURE__*/ createComponent({
 export const MdsInputDate = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-date',
     elementClass: MdsInputDateElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsInputValidation: 'mdsInputValidation',
@@ -491,7 +493,7 @@ export const MdsInputDate = /*@__PURE__*/ createComponent({
 export const MdsInputDateRange = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-date-range',
     elementClass: MdsInputDateRangeElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsInputDateRangeSelect: 'mdsInputDateRangeSelect',
@@ -502,7 +504,7 @@ export const MdsInputDateRange = /*@__PURE__*/ createComponent({
 export const MdsInputDateRangePreselection = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-date-range-preselection',
     elementClass: MdsInputDateRangePreselectionElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsInputDateRangePreselection
@@ -510,7 +512,7 @@ export const MdsInputDateRangePreselection = /*@__PURE__*/ createComponent({
 export const MdsInputField = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-field',
     elementClass: MdsInputFieldElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsInputField
@@ -518,7 +520,7 @@ export const MdsInputField = /*@__PURE__*/ createComponent({
 export const MdsInputOtp = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-otp',
     elementClass: MdsInputOtpElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsInputOtp
@@ -526,7 +528,7 @@ export const MdsInputOtp = /*@__PURE__*/ createComponent({
 export const MdsInputRange = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-range',
     elementClass: MdsInputRangeElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsInputRangeChange: 'mdsInputRangeChange' },
     defineCustomElement: defineMdsInputRange
@@ -534,7 +536,7 @@ export const MdsInputRange = /*@__PURE__*/ createComponent({
 export const MdsInputSelect = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-select',
     elementClass: MdsInputSelectElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsInputSelectChange: 'mdsInputSelectChange' },
     defineCustomElement: defineMdsInputSelect
@@ -542,7 +544,7 @@ export const MdsInputSelect = /*@__PURE__*/ createComponent({
 export const MdsInputSwitch = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-switch',
     elementClass: MdsInputSwitchElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsInputSwitchChange: 'mdsInputSwitchChange' },
     defineCustomElement: defineMdsInputSwitch
@@ -550,7 +552,7 @@ export const MdsInputSwitch = /*@__PURE__*/ createComponent({
 export const MdsInputTip = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-tip',
     elementClass: MdsInputTipElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsInputTip
@@ -558,7 +560,7 @@ export const MdsInputTip = /*@__PURE__*/ createComponent({
 export const MdsInputTipItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-tip-item',
     elementClass: MdsInputTipItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsInputTipItem
@@ -566,7 +568,7 @@ export const MdsInputTipItem = /*@__PURE__*/ createComponent({
 export const MdsInputUpload = /*@__PURE__*/ createComponent({
     tagName: 'mds-input-upload',
     elementClass: MdsInputUploadElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsInputUploadChange: 'mdsInputUploadChange' },
     defineCustomElement: defineMdsInputUpload
@@ -574,7 +576,7 @@ export const MdsInputUpload = /*@__PURE__*/ createComponent({
 export const MdsKeyboard = /*@__PURE__*/ createComponent({
     tagName: 'mds-keyboard',
     elementClass: MdsKeyboardElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsKeyboard
@@ -582,7 +584,7 @@ export const MdsKeyboard = /*@__PURE__*/ createComponent({
 export const MdsKeyboardKey = /*@__PURE__*/ createComponent({
     tagName: 'mds-keyboard-key',
     elementClass: MdsKeyboardKeyElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsKeyboardKey
@@ -590,7 +592,7 @@ export const MdsKeyboardKey = /*@__PURE__*/ createComponent({
 export const MdsKpi = /*@__PURE__*/ createComponent({
     tagName: 'mds-kpi',
     elementClass: MdsKpiElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsKpi
@@ -598,7 +600,7 @@ export const MdsKpi = /*@__PURE__*/ createComponent({
 export const MdsKpiItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-kpi-item',
     elementClass: MdsKpiItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsKpiItem
@@ -606,7 +608,7 @@ export const MdsKpiItem = /*@__PURE__*/ createComponent({
 export const MdsLabel = /*@__PURE__*/ createComponent({
     tagName: 'mds-label',
     elementClass: MdsLabelElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsLabelDelete: 'mdsLabelDelete' },
     defineCustomElement: defineMdsLabel
@@ -614,7 +616,7 @@ export const MdsLabel = /*@__PURE__*/ createComponent({
 export const MdsList = /*@__PURE__*/ createComponent({
     tagName: 'mds-list',
     elementClass: MdsListElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsList
@@ -622,7 +624,7 @@ export const MdsList = /*@__PURE__*/ createComponent({
 export const MdsListItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-list-item',
     elementClass: MdsListItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsListItem
@@ -630,7 +632,7 @@ export const MdsListItem = /*@__PURE__*/ createComponent({
 export const MdsMention = /*@__PURE__*/ createComponent({
     tagName: 'mds-mention',
     elementClass: MdsMentionElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsMention
@@ -638,7 +640,7 @@ export const MdsMention = /*@__PURE__*/ createComponent({
 export const MdsModal = /*@__PURE__*/ createComponent({
     tagName: 'mds-modal',
     elementClass: MdsModalElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsModalOpen: 'mdsModalOpen',
@@ -651,7 +653,7 @@ export const MdsModal = /*@__PURE__*/ createComponent({
 export const MdsNote = /*@__PURE__*/ createComponent({
     tagName: 'mds-note',
     elementClass: MdsNoteElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsNoteDelete: 'mdsNoteDelete' },
     defineCustomElement: defineMdsNote
@@ -659,7 +661,7 @@ export const MdsNote = /*@__PURE__*/ createComponent({
 export const MdsNotification = /*@__PURE__*/ createComponent({
     tagName: 'mds-notification',
     elementClass: MdsNotificationElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsNotification
@@ -667,7 +669,7 @@ export const MdsNotification = /*@__PURE__*/ createComponent({
 export const MdsPaginator = /*@__PURE__*/ createComponent({
     tagName: 'mds-paginator',
     elementClass: MdsPaginatorElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsPaginatorChange: 'mdsPaginatorChange' },
     defineCustomElement: defineMdsPaginator
@@ -675,7 +677,7 @@ export const MdsPaginator = /*@__PURE__*/ createComponent({
 export const MdsPaginatorItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-paginator-item',
     elementClass: MdsPaginatorItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPaginatorItem
@@ -683,7 +685,7 @@ export const MdsPaginatorItem = /*@__PURE__*/ createComponent({
 export const MdsPolicyAi = /*@__PURE__*/ createComponent({
     tagName: 'mds-policy-ai',
     elementClass: MdsPolicyAiElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPolicyAi
@@ -691,7 +693,7 @@ export const MdsPolicyAi = /*@__PURE__*/ createComponent({
 export const MdsPref = /*@__PURE__*/ createComponent({
     tagName: 'mds-pref',
     elementClass: MdsPrefElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPref
@@ -699,7 +701,7 @@ export const MdsPref = /*@__PURE__*/ createComponent({
 export const MdsPrefAnimation = /*@__PURE__*/ createComponent({
     tagName: 'mds-pref-animation',
     elementClass: MdsPrefAnimationElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsPrefChange: 'mdsPrefChange' },
     defineCustomElement: defineMdsPrefAnimation
@@ -707,7 +709,7 @@ export const MdsPrefAnimation = /*@__PURE__*/ createComponent({
 export const MdsPrefConsumption = /*@__PURE__*/ createComponent({
     tagName: 'mds-pref-consumption',
     elementClass: MdsPrefConsumptionElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsPrefChange: 'mdsPrefChange' },
     defineCustomElement: defineMdsPrefConsumption
@@ -715,7 +717,7 @@ export const MdsPrefConsumption = /*@__PURE__*/ createComponent({
 export const MdsPrefContrast = /*@__PURE__*/ createComponent({
     tagName: 'mds-pref-contrast',
     elementClass: MdsPrefContrastElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsPrefChange: 'mdsPrefChange' },
     defineCustomElement: defineMdsPrefContrast
@@ -723,7 +725,7 @@ export const MdsPrefContrast = /*@__PURE__*/ createComponent({
 export const MdsPrefLanguage = /*@__PURE__*/ createComponent({
     tagName: 'mds-pref-language',
     elementClass: MdsPrefLanguageElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsPrefLanguageChange: 'mdsPrefLanguageChange',
@@ -734,7 +736,7 @@ export const MdsPrefLanguage = /*@__PURE__*/ createComponent({
 export const MdsPrefLanguageItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-pref-language-item',
     elementClass: MdsPrefLanguageItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsPrefLanguageItemSelect: 'mdsPrefLanguageItemSelect' },
     defineCustomElement: defineMdsPrefLanguageItem
@@ -742,15 +744,34 @@ export const MdsPrefLanguageItem = /*@__PURE__*/ createComponent({
 export const MdsPrefTheme = /*@__PURE__*/ createComponent({
     tagName: 'mds-pref-theme',
     elementClass: MdsPrefThemeElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsPrefChange: 'mdsPrefChange' },
     defineCustomElement: defineMdsPrefTheme
 });
+export const MdsPrefThemeVariant = /*@__PURE__*/ createComponent({
+    tagName: 'mds-pref-theme-variant',
+    elementClass: MdsPrefThemeVariantElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onMdsPrefThemeVariantChange: 'mdsPrefThemeVariantChange',
+        onMdsPrefChange: 'mdsPrefChange'
+    },
+    defineCustomElement: defineMdsPrefThemeVariant
+});
+export const MdsPrefThemeVariantItem = /*@__PURE__*/ createComponent({
+    tagName: 'mds-pref-theme-variant-item',
+    elementClass: MdsPrefThemeVariantItemElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onMdsPrefThemeVariantItemSelect: 'mdsPrefThemeVariantItemSelect' },
+    defineCustomElement: defineMdsPrefThemeVariantItem
+});
 export const MdsPriceTable = /*@__PURE__*/ createComponent({
     tagName: 'mds-price-table',
     elementClass: MdsPriceTableElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPriceTable
@@ -758,7 +779,7 @@ export const MdsPriceTable = /*@__PURE__*/ createComponent({
 export const MdsPriceTableFeatures = /*@__PURE__*/ createComponent({
     tagName: 'mds-price-table-features',
     elementClass: MdsPriceTableFeaturesElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPriceTableFeatures
@@ -766,7 +787,7 @@ export const MdsPriceTableFeatures = /*@__PURE__*/ createComponent({
 export const MdsPriceTableFeaturesCell = /*@__PURE__*/ createComponent({
     tagName: 'mds-price-table-features-cell',
     elementClass: MdsPriceTableFeaturesCellElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPriceTableFeaturesCell
@@ -774,7 +795,7 @@ export const MdsPriceTableFeaturesCell = /*@__PURE__*/ createComponent({
 export const MdsPriceTableFeaturesRow = /*@__PURE__*/ createComponent({
     tagName: 'mds-price-table-features-row',
     elementClass: MdsPriceTableFeaturesRowElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPriceTableFeaturesRow
@@ -782,7 +803,7 @@ export const MdsPriceTableFeaturesRow = /*@__PURE__*/ createComponent({
 export const MdsPriceTableHeader = /*@__PURE__*/ createComponent({
     tagName: 'mds-price-table-header',
     elementClass: MdsPriceTableHeaderElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPriceTableHeader
@@ -790,7 +811,7 @@ export const MdsPriceTableHeader = /*@__PURE__*/ createComponent({
 export const MdsPriceTableList = /*@__PURE__*/ createComponent({
     tagName: 'mds-price-table-list',
     elementClass: MdsPriceTableListElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPriceTableList
@@ -798,7 +819,7 @@ export const MdsPriceTableList = /*@__PURE__*/ createComponent({
 export const MdsPriceTableListItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-price-table-list-item',
     elementClass: MdsPriceTableListItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsPriceTableListItem
@@ -806,7 +827,7 @@ export const MdsPriceTableListItem = /*@__PURE__*/ createComponent({
 export const MdsProgress = /*@__PURE__*/ createComponent({
     tagName: 'mds-progress',
     elementClass: MdsProgressElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsProgress
@@ -814,7 +835,7 @@ export const MdsProgress = /*@__PURE__*/ createComponent({
 export const MdsPushNotification = /*@__PURE__*/ createComponent({
     tagName: 'mds-push-notification',
     elementClass: MdsPushNotificationElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsPushNotificationChange: 'mdsPushNotificationChange',
@@ -826,7 +847,7 @@ export const MdsPushNotification = /*@__PURE__*/ createComponent({
 export const MdsPushNotificationItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-push-notification-item',
     elementClass: MdsPushNotificationItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsPushNotificationItemClose: 'mdsPushNotificationItemClose' },
     defineCustomElement: defineMdsPushNotificationItem
@@ -834,7 +855,7 @@ export const MdsPushNotificationItem = /*@__PURE__*/ createComponent({
 export const MdsQuote = /*@__PURE__*/ createComponent({
     tagName: 'mds-quote',
     elementClass: MdsQuoteElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsQuote
@@ -842,7 +863,7 @@ export const MdsQuote = /*@__PURE__*/ createComponent({
 export const MdsRadialMenu = /*@__PURE__*/ createComponent({
     tagName: 'mds-radial-menu',
     elementClass: MdsRadialMenuElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsRadialMenu
@@ -850,7 +871,7 @@ export const MdsRadialMenu = /*@__PURE__*/ createComponent({
 export const MdsRadialMenuItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-radial-menu-item',
     elementClass: MdsRadialMenuItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsRadialMenuItem
@@ -858,7 +879,7 @@ export const MdsRadialMenuItem = /*@__PURE__*/ createComponent({
 export const MdsRadialProgress = /*@__PURE__*/ createComponent({
     tagName: 'mds-radial-progress',
     elementClass: MdsRadialProgressElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsRadialProgress
@@ -866,7 +887,7 @@ export const MdsRadialProgress = /*@__PURE__*/ createComponent({
 export const MdsSeparator = /*@__PURE__*/ createComponent({
     tagName: 'mds-separator',
     elementClass: MdsSeparatorElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsSeparator
@@ -874,7 +895,7 @@ export const MdsSeparator = /*@__PURE__*/ createComponent({
 export const MdsSpinner = /*@__PURE__*/ createComponent({
     tagName: 'mds-spinner',
     elementClass: MdsSpinnerElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsSpinner
@@ -882,7 +903,7 @@ export const MdsSpinner = /*@__PURE__*/ createComponent({
 export const MdsStatusBar = /*@__PURE__*/ createComponent({
     tagName: 'mds-status-bar',
     elementClass: MdsStatusBarElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsStatusBar
@@ -890,7 +911,7 @@ export const MdsStatusBar = /*@__PURE__*/ createComponent({
 export const MdsStepperBar = /*@__PURE__*/ createComponent({
     tagName: 'mds-stepper-bar',
     elementClass: MdsStepperBarElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsStepperBarChange: 'mdsStepperBarChange' },
     defineCustomElement: defineMdsStepperBar
@@ -898,7 +919,7 @@ export const MdsStepperBar = /*@__PURE__*/ createComponent({
 export const MdsStepperBarItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-stepper-bar-item',
     elementClass: MdsStepperBarItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsStepperBarItemDone: 'mdsStepperBarItemDone' },
     defineCustomElement: defineMdsStepperBarItem
@@ -906,7 +927,7 @@ export const MdsStepperBarItem = /*@__PURE__*/ createComponent({
 export const MdsTab = /*@__PURE__*/ createComponent({
     tagName: 'mds-tab',
     elementClass: MdsTabElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsTabChange: 'mdsTabChange' },
     defineCustomElement: defineMdsTab
@@ -914,7 +935,7 @@ export const MdsTab = /*@__PURE__*/ createComponent({
 export const MdsTabBar = /*@__PURE__*/ createComponent({
     tagName: 'mds-tab-bar',
     elementClass: MdsTabBarElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsTabBarChange: 'mdsTabBarChange' },
     defineCustomElement: defineMdsTabBar
@@ -922,7 +943,7 @@ export const MdsTabBar = /*@__PURE__*/ createComponent({
 export const MdsTabBarItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-tab-bar-item',
     elementClass: MdsTabBarItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsTabBarItemSelect: 'mdsTabBarItemSelect' },
     defineCustomElement: defineMdsTabBarItem
@@ -930,7 +951,7 @@ export const MdsTabBarItem = /*@__PURE__*/ createComponent({
 export const MdsTabItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-tab-item',
     elementClass: MdsTabItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsTabItemSelect: 'mdsTabItemSelect',
@@ -941,7 +962,7 @@ export const MdsTabItem = /*@__PURE__*/ createComponent({
 export const MdsTable = /*@__PURE__*/ createComponent({
     tagName: 'mds-table',
     elementClass: MdsTableElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsTableSelectionChange: 'mdsTableSelectionChange' },
     defineCustomElement: defineMdsTable
@@ -949,7 +970,7 @@ export const MdsTable = /*@__PURE__*/ createComponent({
 export const MdsTableBody = /*@__PURE__*/ createComponent({
     tagName: 'mds-table-body',
     elementClass: MdsTableBodyElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsTableBody
@@ -957,7 +978,7 @@ export const MdsTableBody = /*@__PURE__*/ createComponent({
 export const MdsTableCell = /*@__PURE__*/ createComponent({
     tagName: 'mds-table-cell',
     elementClass: MdsTableCellElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsTableCell
@@ -965,7 +986,7 @@ export const MdsTableCell = /*@__PURE__*/ createComponent({
 export const MdsTableFooter = /*@__PURE__*/ createComponent({
     tagName: 'mds-table-footer',
     elementClass: MdsTableFooterElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsTableFooter
@@ -973,7 +994,7 @@ export const MdsTableFooter = /*@__PURE__*/ createComponent({
 export const MdsTableHeader = /*@__PURE__*/ createComponent({
     tagName: 'mds-table-header',
     elementClass: MdsTableHeaderElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsTableHeader
@@ -981,7 +1002,7 @@ export const MdsTableHeader = /*@__PURE__*/ createComponent({
 export const MdsTableHeaderCell = /*@__PURE__*/ createComponent({
     tagName: 'mds-table-header-cell',
     elementClass: MdsTableHeaderCellElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsTableHeaderCell
@@ -989,7 +1010,7 @@ export const MdsTableHeaderCell = /*@__PURE__*/ createComponent({
 export const MdsTableRow = /*@__PURE__*/ createComponent({
     tagName: 'mds-table-row',
     elementClass: MdsTableRowElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsTableRow
@@ -997,7 +1018,7 @@ export const MdsTableRow = /*@__PURE__*/ createComponent({
 export const MdsText = /*@__PURE__*/ createComponent({
     tagName: 'mds-text',
     elementClass: MdsTextElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsText
@@ -1005,7 +1026,7 @@ export const MdsText = /*@__PURE__*/ createComponent({
 export const MdsToast = /*@__PURE__*/ createComponent({
     tagName: 'mds-toast',
     elementClass: MdsToastElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsToastClose: 'mdsToastClose' },
     defineCustomElement: defineMdsToast
@@ -1013,7 +1034,7 @@ export const MdsToast = /*@__PURE__*/ createComponent({
 export const MdsTooltip = /*@__PURE__*/ createComponent({
     tagName: 'mds-tooltip',
     elementClass: MdsTooltipElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsTooltip
@@ -1021,7 +1042,7 @@ export const MdsTooltip = /*@__PURE__*/ createComponent({
 export const MdsTree = /*@__PURE__*/ createComponent({
     tagName: 'mds-tree',
     elementClass: MdsTreeElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsTree
@@ -1029,7 +1050,7 @@ export const MdsTree = /*@__PURE__*/ createComponent({
 export const MdsTreeItem = /*@__PURE__*/ createComponent({
     tagName: 'mds-tree-item',
     elementClass: MdsTreeItemElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
         onMdsTreeItemExpand: 'mdsTreeItemExpand',
@@ -1040,7 +1061,7 @@ export const MdsTreeItem = /*@__PURE__*/ createComponent({
 export const MdsUrlView = /*@__PURE__*/ createComponent({
     tagName: 'mds-url-view',
     elementClass: MdsUrlViewElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onMdsUrlViewClose: 'mdsUrlViewClose' },
     defineCustomElement: defineMdsUrlView
@@ -1048,7 +1069,7 @@ export const MdsUrlView = /*@__PURE__*/ createComponent({
 export const MdsUsage = /*@__PURE__*/ createComponent({
     tagName: 'mds-usage',
     elementClass: MdsUsageElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsUsage
@@ -1056,7 +1077,7 @@ export const MdsUsage = /*@__PURE__*/ createComponent({
 export const MdsVideoWall = /*@__PURE__*/ createComponent({
     tagName: 'mds-video-wall',
     elementClass: MdsVideoWallElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsVideoWall
@@ -1064,7 +1085,7 @@ export const MdsVideoWall = /*@__PURE__*/ createComponent({
 export const MdsZero = /*@__PURE__*/ createComponent({
     tagName: 'mds-zero',
     elementClass: MdsZeroElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
     defineCustomElement: defineMdsZero

package/dist/types/components.d.ts

@@ -2,7 +2,7 @@
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
-import { type MdsAccordionCustomEvent, type MdsAccordionEventDetail, type MdsAccordionItemCustomEvent, type MdsAccordionItemEventDetail, type MdsAccordionTimerCustomEvent, type MdsAccordionTimerEventDetail, type MdsAccordionTimerItemCustomEvent, type MdsAccordionTimerItemEventDetail, type MdsBreadcrumbCustomEvent, type MdsBreadcrumbEventDetail, type MdsBreadcrumbItemCustomEvent, type MdsBreadcrumbItemEventDetail, type MdsChipCustomEvent, type MdsChipEvent, type MdsDropdownCustomEvent, type MdsDropdownEventDetail, type MdsFileCustomEvent, type MdsFileEventDetail, type MdsFilePreviewCustomEvent, type MdsFilePreviewEventDetail, type MdsFilterCustomEvent, type MdsFilterEventDetail, type MdsFilterItemCustomEvent, type MdsFilterItemEventDetail, type MdsHeaderCustomEvent, type MdsHeaderEventDetail, type MdsHeaderVisibilityEventDetail, type MdsImgCustomEvent, type MdsImgEventDetail, type MdsInputCustomEvent, type MdsInputEventDetail, type MdsInputSelectCustomEvent, type MdsInputSwitchCustomEvent, type MdsInputSwitchEventDetail, type MdsInputUploadCustomEvent, type MdsPaginatorCustomEvent, type MdsPaginatorEventDetail, type MdsPrefAnimationCustomEvent, type MdsPrefChangeEventDetail, type MdsPrefConsumptionCustomEvent, type MdsPrefContrastCustomEvent, type MdsPrefLanguageCustomEvent, type MdsPrefLanguageEventDetail, type MdsPrefLanguageItemCustomEvent, type MdsPrefThemeCustomEvent, type MdsPushNotificationCustomEvent, type MdsPushNotificationEventDetail, type MdsPushNotificationItemCustomEvent, type MdsPushNotificationItemEventDetail, type MdsStepperBarCustomEvent, type MdsStepperBarEventDetail, type MdsStepperBarItemCustomEvent, type MdsStepperBarItemEventDetail, type MdsTabBarCustomEvent, type MdsTabBarEventDetail, type MdsTabCustomEvent, type MdsTabEventDetail, type MdsTabItemCustomEvent, type MdsTabItemEventDetail, type MdsTableCustomEvent, type MdsTableSelectionEventDetail, type MdsTreeItemCustomEvent, type MdsTreeItemEventDetail } from "@maggioli-design-system/magma";
+import { type MdsAccordionCustomEvent, type MdsAccordionEventDetail, type MdsAccordionItemCustomEvent, type MdsAccordionItemEventDetail, type MdsAccordionTimerCustomEvent, type MdsAccordionTimerEventDetail, type MdsAccordionTimerItemCustomEvent, type MdsAccordionTimerItemEventDetail, type MdsBreadcrumbCustomEvent, type MdsBreadcrumbEventDetail, type MdsBreadcrumbItemCustomEvent, type MdsBreadcrumbItemEventDetail, type MdsChipCustomEvent, type MdsChipEvent, type MdsDropdownCustomEvent, type MdsDropdownEventDetail, type MdsFileCustomEvent, type MdsFileEventDetail, type MdsFilePreviewCustomEvent, type MdsFilePreviewEventDetail, type MdsFilterCustomEvent, type MdsFilterEventDetail, type MdsFilterItemCustomEvent, type MdsFilterItemEventDetail, type MdsHeaderCustomEvent, type MdsHeaderEventDetail, type MdsHeaderVisibilityEventDetail, type MdsImgCustomEvent, type MdsImgEventDetail, type MdsInputCustomEvent, type MdsInputEventDetail, type MdsInputSelectCustomEvent, type MdsInputSwitchCustomEvent, type MdsInputSwitchEventDetail, type MdsInputUploadCustomEvent, type MdsPaginatorCustomEvent, type MdsPaginatorEventDetail, type MdsPrefAnimationCustomEvent, type MdsPrefChangeEventDetail, type MdsPrefConsumptionCustomEvent, type MdsPrefContrastCustomEvent, type MdsPrefLanguageCustomEvent, type MdsPrefLanguageEventDetail, type MdsPrefLanguageItemCustomEvent, type MdsPrefThemeCustomEvent, type MdsPrefThemeVariantCustomEvent, type MdsPrefThemeVariantEventDetail, type MdsPrefThemeVariantItemCustomEvent, type MdsPushNotificationCustomEvent, type MdsPushNotificationEventDetail, type MdsPushNotificationItemCustomEvent, type MdsPushNotificationItemEventDetail, type MdsStepperBarCustomEvent, type MdsStepperBarEventDetail, type MdsStepperBarItemCustomEvent, type MdsStepperBarItemEventDetail, type MdsTabBarCustomEvent, type MdsTabBarEventDetail, type MdsTabCustomEvent, type MdsTabEventDetail, type MdsTabItemCustomEvent, type MdsTabItemEventDetail, type MdsTableCustomEvent, type MdsTableSelectionEventDetail, type MdsTreeItemCustomEvent, type MdsTreeItemEventDetail } from "@maggioli-design-system/magma";
 import { MdsAccordionItem as MdsAccordionItemElement } from "@maggioli-design-system/magma/dist/components/mds-accordion-item.js";
 import { MdsAccordionTimerItem as MdsAccordionTimerItemElement } from "@maggioli-design-system/magma/dist/components/mds-accordion-timer-item.js";
 import { MdsAccordionTimer as MdsAccordionTimerElement } from "@maggioli-design-system/magma/dist/components/mds-accordion-timer.js";
@@ -74,6 +74,8 @@ import { MdsPrefConsumption as MdsPrefConsumptionElement } from "@maggioli-desig
 import { MdsPrefContrast as MdsPrefContrastElement } from "@maggioli-design-system/magma/dist/components/mds-pref-contrast.js";
 import { MdsPrefLanguageItem as MdsPrefLanguageItemElement } from "@maggioli-design-system/magma/dist/components/mds-pref-language-item.js";
 import { MdsPrefLanguage as MdsPrefLanguageElement } from "@maggioli-design-system/magma/dist/components/mds-pref-language.js";
+import { MdsPrefThemeVariantItem as MdsPrefThemeVariantItemElement } from "@maggioli-design-system/magma/dist/components/mds-pref-theme-variant-item.js";
+import { MdsPrefThemeVariant as MdsPrefThemeVariantElement } from "@maggioli-design-system/magma/dist/components/mds-pref-theme-variant.js";
 import { MdsPrefTheme as MdsPrefThemeElement } from "@maggioli-design-system/magma/dist/components/mds-pref-theme.js";
 import { MdsPref as MdsPrefElement } from "@maggioli-design-system/magma/dist/components/mds-pref.js";
 import { MdsPriceTableFeaturesCell as MdsPriceTableFeaturesCellElement } from "@maggioli-design-system/magma/dist/components/mds-price-table-features-cell.js";
@@ -365,6 +367,15 @@ export type MdsPrefThemeEvents = {
     onMdsPrefChange: EventName<MdsPrefThemeCustomEvent<MdsPrefChangeEventDetail>>;
 };
 export declare const MdsPrefTheme: StencilReactComponent<MdsPrefThemeElement, MdsPrefThemeEvents>;
+export type MdsPrefThemeVariantEvents = {
+    onMdsPrefThemeVariantChange: EventName<MdsPrefThemeVariantCustomEvent<MdsPrefThemeVariantEventDetail>>;
+    onMdsPrefChange: EventName<MdsPrefThemeVariantCustomEvent<MdsPrefChangeEventDetail>>;
+};
+export declare const MdsPrefThemeVariant: StencilReactComponent<MdsPrefThemeVariantElement, MdsPrefThemeVariantEvents>;
+export type MdsPrefThemeVariantItemEvents = {
+    onMdsPrefThemeVariantItemSelect: EventName<MdsPrefThemeVariantItemCustomEvent<MdsPrefThemeVariantEventDetail>>;
+};
+export declare const MdsPrefThemeVariantItem: StencilReactComponent<MdsPrefThemeVariantItemElement, MdsPrefThemeVariantItemEvents>;
 export type MdsPriceTableEvents = NonNullable<unknown>;
 export declare const MdsPriceTable: StencilReactComponent<MdsPriceTableElement, MdsPriceTableEvents>;
 export type MdsPriceTableFeaturesEvents = NonNullable<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/magma-react",
-  "version": "1.11.8",
+  "version": "2.0.0-alpha.1",
   "main": "dist/components.js",
   "module": "dist/components.js",
   "types": "dist/types/components.d.ts",
@@ -15,10 +15,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@maggioli-design-system/magma": "1.11.8",
+    "@maggioli-design-system/magma": "2.0.0-alpha.1",
     "@stencil/react-output-target": "1.0.2"
   },
   "devDependencies": {
     "typescript": "5.6.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/magma-design-system/magma.git",
+    "directory": "projects/stencil/react"
   }
 }