@tet/tet-components 1.4.3-testing → 1.4.4-staging

package/dist/collection/components/simple/menu/tet-menu/tet-menu.css

@@ -375,30 +375,26 @@
   /**
   * @prop --menu-text-size: The text size of the menu elements.
   * @prop --menu-line-height: The line height of the menu elements.
-  * @prop --menu-text-color: The text color of the menu elements.
   * @prop --menu-font-family: The font family of the menu elements.
-  * @prop --menu-background-color: The background color of the menu.
-  * @prop --menu-link-active-background-color: The background color of the menu element link when active.
-  * @prop --menu-link-hover-background-color: The background color of the menu element link on hover.
-  * @prop --menu-dropdown-border-color: The border color of the menu dropdown.
-  * @prop --menu-dropdown-box-shadow: The box shadow of the menu dropdown.
   * @prop --menu-border-radius: The border-radius of the various menu elements.
   */
   --menu-text-size: 0.875rem;
   --menu-line-height: 1.25rem;
-  --menu-text-color: rgb(10, 11, 13);
-  --menu-text-color-dark: rgb(255, 255, 255);
   --menu-font-family: "Inter", var(--font-family-fallback);
-  --menu-background-color: rgb(255, 255, 255);
-  --menu-background-dark-color: rgb(22, 25, 29);
-  --menu-link-active-background-color: rgb(237, 245, 252);
-  --menu-link-hover-background-color: rgba(88, 99, 116, 0.08);
-  --menu-link-hover-background-dark-color: rgba(153, 160, 174, 0.12);
-  --menu-dropdown-border-color: rgba(192, 197, 206, 0.12);
-  --menu-dropdown-box-shadow: 0 0.063rem 0.125rem rgba(10, 11, 13, 0.05),
-  0 0.313rem 0.688rem rgba(10, 11, 13, 0.12);
   --menu-border-radius: 0.625rem;
+  --menu-text-color: var(--tc-text-primary);
+  --menu-text-inverse-color: var(--tc-button-text-primary);
+  --menu-text-secondary-color: var(--tc-text-secondary);
+  --menu-background-color: var(--tc-background-white-black);
+  --menu-link-active-background-color: var(--tc-blue-00);
+  --menu-link-hover-background-color: var(--tc-menu-item-hover);
+  --menu-dropdown-border-color: var(--tc-grey-20);
+  --menu-dropdown-box-shadow: var(--tc-elevation-three);
   --menu-focus-outline-color: var(--tc-blue-40);
+  --menu-login-button-background-color: var(--tc-button-primary-background-default);
+  --menu-login-button-background-hover-color: var(--tc-button-primary-background-hover);
+  --menu-separator-line-color: var(--tc-grey-20);
+  --menu-badge-background-color: var(--tc-menu-item-badge);
   display: inline-block;
   position: relative;
   box-sizing: border-box;
@@ -413,6 +409,81 @@
   font-size: var(--menu-text-size);
   font-weight: 500;
 }
+.menu.menu__dark {
+  --menu-text-color: var(--tc-text-primary-dark);
+  --menu-text-inverse-color: var(--tc-button-text-primary-dark);
+  --menu-text-secondary-color: var(--tc-text-secondary-dark);
+  --menu-background-color: var(--tc-background-secondary-dark);
+  --menu-link-active-background-color: rgba(24, 40, 59, 1);
+  --menu-link-hover-background-color: var(--tc-menu-item-hover-dark);
+  --menu-dropdown-border-color: var(--tc-grey-80);
+  --menu-dropdown-box-shadow: var(--tc-elevation-three-dark);
+  --menu-focus-outline-color: var(--tc-blue-40-dark);
+  --menu-login-button-background-color: var(--tc-button-primary-background-default-dark);
+  --menu-login-button-background-hover-color: var(--tc-button-primary-background-hover-dark);
+  --menu-separator-line-color: var(--tc-grey-80);
+  --menu-badge-background-color: var(--tc-menu-item-badge-dark);
+}
+.menu.menu__dark .menu__first-level--theme-yellow {
+  --menu-item-theme-bg: var(--tc-menu-item-yellow-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-yellow-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-yellow-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-yellow-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-yellow-gradient-main-dark) 30%,
+    var(--tc-menu-item-yellow-gradient-accent-dark) 50%,
+    var(--tc-menu-item-yellow-gradient-main-dark) 70%
+  );
+}
+.menu.menu__dark .menu__first-level--theme-red {
+  --menu-item-theme-bg: var(--tc-menu-item-red-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-red-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-red-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-red-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-red-gradient-main-dark) 30%,
+    var(--tc-menu-item-red-gradient-accent-dark) 50%,
+    var(--tc-menu-item-red-gradient-main-dark) 70%
+  );
+}
+.menu.menu__dark .menu__first-level--theme-green {
+  --menu-item-theme-bg: var(--tc-menu-item-green-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-green-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-green-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-green-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-green-gradient-main-dark) 30%,
+    var(--tc-menu-item-green-gradient-accent-dark) 50%,
+    var(--tc-menu-item-green-gradient-main-dark) 70%
+  );
+}
+.menu.menu__dark .menu__first-level--theme-violet {
+  --menu-item-theme-bg: var(--tc-menu-item-violet-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-violet-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-violet-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-violet-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-violet-gradient-main-dark) 30%,
+    var(--tc-menu-item-violet-gradient-accent-dark) 50%,
+    var(--tc-menu-item-violet-gradient-main-dark) 70%
+  );
+}
+.menu.menu__dark .menu__first-level--theme-blue {
+  --menu-item-theme-bg: var(--tc-menu-item-blue-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-blue-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-blue-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-blue-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-blue-gradient-main-dark) 30%,
+    var(--tc-menu-item-blue-gradient-accent-dark) 50%,
+    var(--tc-menu-item-blue-gradient-main-dark) 70%
+  );
+}
 .menu a {
   color: var(--menu-text-color);
   text-decoration: none;
@@ -443,6 +514,12 @@
   transition: outline 0s;
   outline-color: var(--menu-focus-outline-color);
 }
+.menu__badge {
+  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  background-color: var(--menu-badge-background-color);
+}
 .menu__icon {
   display: none;
 }
@@ -507,9 +584,6 @@
 .menu__main {
   --menu-text-size: 1rem;
   --menu-line-height: 1.5rem;
-  --menu-dropdown-box-shadow: 0 0 0.063rem rgba(10, 11, 13, 0.08),
-  0 0.063rem 0.188rem rgba(10, 11, 13, 0.12);
-  --menu-dropdown-border-color: rgba(10, 11, 13, 0.08);
 }
 .menu__main .menu__first-level {
   padding: 0.375rem 0.75rem;
@@ -519,6 +593,95 @@
   --icon-size: 1.25rem;
   margin-left: 0;
 }
+.menu__main .menu__first-level--theme-yellow {
+  --menu-item-theme-bg: var(--tc-menu-item-yellow-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-yellow-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-yellow-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-yellow-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-yellow-gradient-main) 30%,
+    var(--tc-menu-item-yellow-gradient-accent) 50%,
+    var(--tc-menu-item-yellow-gradient-main) 70%
+  );
+}
+.menu__main .menu__first-level--theme-red {
+  --menu-item-theme-bg: var(--tc-menu-item-red-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-red-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-red-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-red-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-red-gradient-main) 30%,
+    var(--tc-menu-item-red-gradient-accent) 50%,
+    var(--tc-menu-item-red-gradient-main) 70%
+  );
+}
+.menu__main .menu__first-level--theme-green {
+  --menu-item-theme-bg: var(--tc-menu-item-green-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-green-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-green-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-green-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-green-gradient-main) 30%,
+    var(--tc-menu-item-green-gradient-accent) 50%,
+    var(--tc-menu-item-green-gradient-main) 70%
+  );
+}
+.menu__main .menu__first-level--theme-violet {
+  --menu-item-theme-bg: var(--tc-menu-item-violet-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-violet-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-violet-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-violet-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-violet-gradient-main) 30%,
+    var(--tc-menu-item-violet-gradient-accent) 50%,
+    var(--tc-menu-item-violet-gradient-main) 70%
+  );
+}
+.menu__main .menu__first-level--theme-blue {
+  --menu-item-theme-bg: var(--tc-menu-item-blue-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-blue-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-blue-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-blue-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+    135deg,
+    var(--tc-menu-item-blue-gradient-main) 30%,
+    var(--tc-menu-item-blue-gradient-accent) 50%,
+    var(--tc-menu-item-blue-gradient-main) 70%
+  );
+}
+.menu__main .menu__first-level--themed {
+  position: relative;
+  padding: 0.25rem 0.625rem;
+  isolation: isolate;
+  color: var(--menu-text-color);
+  border: 0.125rem solid transparent;
+  background-image: linear-gradient(var(--menu-item-theme-bg)), var(--menu-item-theme-gradient);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  background-size: 100% 100%, 300% 100%;
+  background-position: 0 0, 120% 120%;
+}
+.menu__main .menu__first-level--themed.menu--active {
+  border-color: var(--menu-item-theme-active-bg);
+  background-image: linear-gradient(var(--menu-item-theme-active-bg), var(--menu-item-theme-active-bg));
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-clip: border-box;
+}
+.menu__main .menu__first-level--themed:hover {
+  border-color: var(--menu-item-theme-hover-bg);
+  background-image: linear-gradient(var(--menu-item-theme-hover-bg), var(--menu-item-theme-hover-bg));
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-clip: border-box;
+}
+.menu__main .menu__first-level--themed.show-animation:not(:hover, .menu--active) {
+  animation: gradient-border-cycle 4s ease-in-out infinite;
+}
 .menu__main .menu__first-level.menu--active {
   background-color: var(--menu-link-active-background-color);
 }
@@ -561,23 +724,31 @@
   right: 0.375rem;
   bottom: -0.438rem;
   height: 0.063rem;
-  background: rgb(235, 237, 239);
+  background: var(--menu-separator-line-color);
 }
 .menu__main .menu__dropdown__list__sub-title {
   display: block;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: rgb(67, 75, 86);
+  color: var(--menu-text-secondary-color);
 }
-.menu__main .menu__icon {
+.menu__main .menu__first-level > .menu__icon {
+  display: flex;
+  margin-right: 0.25rem;
+}
+.menu__main .menu__first-level > .menu__icon tet-icon {
+  --icon-size: 1.25rem;
+  --icon-container-display: flex;
+}
+.menu__main .menu__dropdown .menu__icon {
   width: 2.75rem;
   padding-right: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.menu__main .menu__icon img,
-.menu__main .menu__icon svg {
+.menu__main .menu__dropdown .menu__icon img,
+.menu__main .menu__dropdown .menu__icon svg {
   max-width: 2rem;
   max-height: 2rem;
 }
@@ -615,6 +786,11 @@
 .menu__sublist .content a {
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   border-radius: unset;
+  white-space: normal;
+}
+.menu__sublist .content a .menu__badge {
+  margin-left: 0.25rem;
+  vertical-align: middle;
 }
 .menu__sublist .content a:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
@@ -632,19 +808,20 @@
 .menu__login .menu__first-level {
   border-radius: 2rem;
   padding: 0.5rem 0.875rem;
-  background-color: rgb(10, 11, 13);
-  color: rgb(255, 255, 255);
+  background-color: var(--menu-login-button-background-color);
+  color: var(--menu-text-inverse-color);
 }
 .menu__login .menu__first-level .menu__icon tet-icon {
-  --icon-color: rgb(255, 255, 255);
   --icon-size: 1.25rem;
   --icon-container-display: flex;
 }
 .menu__login .menu__first-level .chevron {
   margin-left: 0.5rem;
-  --icon-color: rgb(255, 255, 255);
   --icon-size: 1.25rem;
 }
+.menu__login .menu__first-level:hover {
+  background-color: var(--menu-login-button-background-hover-color);
+}
 .menu__login .menu--highlighted {
   position: relative;
   display: flex;
@@ -661,7 +838,7 @@
   right: 0.5rem;
   bottom: -0.438rem;
   height: 0.063rem;
-  background: rgb(235, 237, 239);
+  background: var(--menu-separator-line-color);
 }
 .menu__login .menu__icon {
   display: flex;
@@ -681,7 +858,7 @@
   bottom: auto;
 }
 .menu__login .menu__dropdown__list a.text-color-secondary {
-  color: rgb(67, 75, 86);
+  color: var(--menu-text-secondary-color);
 }
 .menu__language .menu__dropdown {
   min-width: 6rem;
@@ -696,88 +873,6 @@
   right: 0.782rem;
   top: 0.563rem;
 }
-.menu__dark {
-  --menu-focus-outline-color: var(--tc-blue-40-dark);
-}
-.menu__dark .menu__first-level.menu--active {
-  background-color: rgb(24, 40, 59);
-}
-.menu__dark .menu__first-level.menu--active:hover {
-  background-color: var(--menu-link-hover-background-dark-color);
-}
-.menu__dark .menu__first-level:hover {
-  background-color: var(--menu-link-hover-background-dark-color);
-}
-.menu__dark a {
-  color: var(--menu-text-color-dark);
-}
-.menu__dark a .chevron {
-  --icon-color: var(--menu-text-color-dark);
-}
-.menu__dark .menu__dropdown {
-  background: var(--menu-background-dark-color);
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a.menu--active {
-  background-color: var(--menu-link-hover-background-dark-color);
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a.menu--active .menu__dropdown__list__checkmark {
-  --icon-color: var(--menu-text-color-dark);
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a div .menu__dropdown__list__sub-title {
-  color: rgb(153, 160, 174);
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a .menu__icon tet-icon {
-  --icon-color: var(--menu-text-color-dark);
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a .menu__sublist .content {
-  background: var(--menu-background-dark-color);
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a .menu__sublist .content li a {
-  color: var(--menu-text-color-dark);
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a.menu--highlighted:after {
-  background: rgb(35, 40, 46);
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a.menu--highlighted:focus-visible {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline: 0.125rem solid var(--tc-blue-40-dark);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a.menu--highlighted:focus-visible:after {
-  outline: none;
-}
-.menu__dark .menu__dropdown .menu__dropdown__list li a:hover {
-  background-color: var(--menu-link-hover-background-dark-color);
-}
-
-.menu.menu__dark.menu__login .menu__first-level {
-  background-color: rgb(255, 255, 255);
-  color: rgb(10, 11, 13);
-}
-.menu.menu__dark.menu__login .menu__first-level:hover {
-  background-color: rgb(235, 237, 239);
-}
-.menu.menu__dark.menu__login a {
-  background-color: var(--menu-background-dark-color);
-  color: var(--menu-text-color-dark);
-}
-.menu.menu__dark.menu__login a .menu__icon tet-icon,
-.menu.menu__dark.menu__login a .chevron {
-  --icon-color: var(--menu-text-color);
-}
-.menu.menu__dark.menu__login a .menu__dropdown {
-  background: var(--menu-background-dark-color);
-}
-.menu.menu__dark.menu__login a .menu__dropdown .menu__dropdown__list li a.menu--highlighted {
-  background-color: rgba(89, 99, 115, 0.08);
-}
-.menu.menu__dark.menu__login a:hover {
-  background-color: var(--menu-link-hover-background-dark-color);
-}
-.menu.menu__dark.menu__login .menu--highlighted:after {
-  background: rgb(35, 40, 46);
-}
 
 @keyframes showDropdown {
   0% {
@@ -798,4 +893,21 @@
   100% {
     max-height: 0;
   }
+}
+@keyframes gradient-border-cycle {
+  0%, 100% {
+    background-position: 0 0, 0% 0%;
+  }
+  20% {
+    background-position: 0 0, 70% 70%;
+  }
+  30% {
+    background-position: 0 0, 100% 100%;
+  }
+  40% {
+    background-position: 0 0, 120% 120%;
+  }
+  40%, 100% {
+    background-position: 0 0, 120% 120%;
+  }
 }

package/dist/collection/components/simple/menu/tet-menu/tet-menu.js

@@ -11,6 +11,8 @@ export class TetMenu {
         this.firstLevelId = null;
         this.firstLevelLink = '';
         this.firstLevelIcon = '';
+        this.menuItemTheme = '';
+        this.showMenuItemAnimation = true;
         this.subLevels = [];
         this.darkMode = false;
         this.isSubmenuLeft = false;
@@ -25,12 +27,20 @@ export class TetMenu {
      * Renders the first menu level.
      */
     renderFirstLevel() {
-        const { firstLevelTitle, firstLevelLink, firstLevelId, firstLevelIcon, active, clickable, type } = this;
+        const { firstLevelTitle, firstLevelLink, firstLevelId, firstLevelIcon, menuItemTheme, showMenuItemAnimation, active, clickable, type } = this;
         const link = clickable && firstLevelLink.length !== 0 ? firstLevelLink : 'javascript:void(0)';
-        const icon = firstLevelIcon && type === 'login' ? this.renderIcon({ name: firstLevelIcon, invertIcon: true }) : '';
+        const icon = firstLevelIcon ? this.renderIcon({ name: firstLevelIcon, invertIcon: true }) : '';
+        let menuItemThemeClass = '', showAnimation = false;
+        if (type === 'main') {
+            menuItemThemeClass = menuItemTheme ? `menu__first-level--theme-${menuItemTheme}` : '';
+            showAnimation = showMenuItemAnimation;
+        }
         return (h("a", { id: firstLevelId, href: link, class: {
                 'menu__first-level': true,
-                'menu--active': active
+                'menu--active': active && type !== 'login',
+                'menu__first-level--themed': menuItemThemeClass.length > 0,
+                ...(menuItemThemeClass && { [menuItemThemeClass]: true }),
+                ...(showAnimation && { 'show-animation': true })
             } }, icon, firstLevelTitle, this.renderChevron()));
     }
     /**
@@ -112,7 +122,9 @@ export class TetMenu {
                 'text-color-secondary': subLevel.textColorSecondary,
                 'translation-none': subLevel.translationNone,
                 'menu--submenu': !!subMenuItems?.length
-            }, tabIndex: 0 }, iconLeft, h("div", null, h("div", null, subLevel.title), subTitle, this.renderCheckmark(subLevel)), iconRight, !!subMenuItems && (h("tet-icon", { class: "menu__chevron", name: "chevron-right", theme: this.darkMode ? 'dark' : 'light' })), !!subMenuItems && (h("div", { class: { left: this.isSubmenuLeft, right: !this.isSubmenuLeft, menu__sublist: true } }, h("ul", { class: { content: true } }, subMenuItems))))));
+            }, tabIndex: 0 }, iconLeft, h("div", null, !!subLevel.badgeText
+            ? h("span", { class: "menu__badge" }, subLevel.badgeText)
+            : null, h("div", null, subLevel.title), subTitle, this.renderCheckmark(subLevel)), iconRight, !!subMenuItems && (h("tet-icon", { class: "menu__chevron", name: "chevron-right", theme: this.darkMode ? 'dark' : 'light' })), !!subMenuItems && (h("div", { class: { left: this.isSubmenuLeft, right: !this.isSubmenuLeft, menu__sublist: true } }, h("ul", { class: { content: true } }, subMenuItems))))));
     }
     /**
      * Renders the sub-levels of the menu.
@@ -146,7 +158,9 @@ export class TetMenu {
                 'menu--highlighted': subLevel.highlighted,
                 'line-top': subLevel.lineTop,
                 'text-color-secondary': subLevel.textColorSecondary
-            }, tabIndex: 0 }, iconLeft, h("div", null, h("div", null, subLevel.title), this.renderCheckmark(subLevel)), iconRight)));
+            }, tabIndex: 0 }, iconLeft, h("div", null, h("div", null, h("span", null, subLevel.title), !!subLevel.badgeText
+            ? h("span", { class: "menu__badge" }, subLevel.badgeText)
+            : null), this.renderCheckmark(subLevel)), iconRight)));
     }
     /**
      * Renders an icon.
@@ -197,7 +211,7 @@ export class TetMenu {
     }
     render() {
         const { type } = this;
-        return (h(Host, { key: '26c377e3f2d8175e59fdb9adf2150f59a49bf086' }, h("div", { key: '65de2f17adfbe97d23ad51ffae6b3416004e14fc', class: {
+        return (h(Host, { key: 'b5e7d0036349ad26088f3d6ae019b610a7da0a98' }, h("div", { key: '1e21dac704b99b08c42ac51bfc32057f280a95c4', class: {
                 menu: true,
                 menu__main: type === 'main',
                 menu__language: type === 'language',
@@ -345,6 +359,48 @@ export class TetMenu {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "menuItemTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuItemTheme | ''",
+                    "resolved": "\"\" | \"blue\" | \"green\" | \"red\" | \"violet\" | \"yellow\"",
+                    "references": {
+                        "MenuItemTheme": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/simple/menu/tet-menu/tet-menu.tsx",
+                            "id": "src/components/simple/menu/tet-menu/tet-menu.tsx::MenuItemTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color theme for the first level menu item with type main."
+                },
+                "attribute": "menu-item-theme",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "showMenuItemAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the show menu item border animation."
+                },
+                "attribute": "show-menu-item-animation",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "subLevels": {
                 "type": "unknown",
                 "mutable": false,