@tet/tet-components 1.4.91-testing → 1.4.92-staging

package/dist/collection/components/advanced/cards/tet-compare-card-v2/tet-compare-card-v2.css

@@ -9963,33 +9963,33 @@
   --tc-navigation-button-pressed-dark: var(--tc-brown-70-dark);
   --tc-navigation-button-active-dark: var(--tc-brown-60-dark);
   --tc-menu-item-yellow-background-default-dark: var(--tc-yellow-80-dark);
-  --tc-menu-item-yellow-background-hover-dark: var(--tc-yellow-70-dark);
-  --tc-menu-item-yellow-background-pressed-dark: var(--tc-yellow-60-dark);
-  --tc-menu-item-yellow-background-active-dark: var(--tc-yellow-50-dark);
+  --tc-menu-item-yellow-background-hover-dark: var(--tc-yellow-80-dark);
+  --tc-menu-item-yellow-background-pressed-dark: var(--tc-yellow-70-dark);
+  --tc-menu-item-yellow-background-active-dark: var(--tc-yellow-60-dark);
   --tc-menu-item-yellow-gradient-main-dark: rgba(255, 237, 179, 1);
   --tc-menu-item-yellow-gradient-accent-dark: rgba(255, 208, 38, 1);
   --tc-menu-item-blue-background-default-dark: var(--tc-blue-80-dark);
-  --tc-menu-item-blue-background-hover-dark: var(--tc-blue-70-dark);
-  --tc-menu-item-blue-background-pressed-dark: var(--tc-blue-60-dark);
-  --tc-menu-item-blue-background-active-dark: var(--tc-blue-50-dark);
+  --tc-menu-item-blue-background-hover-dark: var(--tc-blue-80-dark);
+  --tc-menu-item-blue-background-pressed-dark: var(--tc-blue-70-dark);
+  --tc-menu-item-blue-background-active-dark: var(--tc-blue-60-dark);
   --tc-menu-item-blue-gradient-main-dark: rgba(131,172,232, 1);
   --tc-menu-item-blue-gradient-accent-dark: rgba(25, 98, 212, 1);
   --tc-menu-item-red-background-default-dark: var(--tc-red-80-dark);
-  --tc-menu-item-red-background-hover-dark: var(--tc-red-70-dark);
-  --tc-menu-item-red-background-pressed-dark: var(--tc-red-60-dark);
-  --tc-menu-item-red-background-active-dark: var(--tc-red-50-dark);
+  --tc-menu-item-red-background-hover-dark: var(--tc-red-80-dark);
+  --tc-menu-item-red-background-pressed-dark: var(--tc-red-70-dark);
+  --tc-menu-item-red-background-active-dark: var(--tc-red-60-dark);
   --tc-menu-item-red-gradient-main-dark: rgba(247, 196, 192, 1);
   --tc-menu-item-red-gradient-accent-dark: rgba(233, 69, 54, 1);
   --tc-menu-item-green-background-default-dark: var(--tc-green-80-dark);
-  --tc-menu-item-green-background-hover-dark: var(--tc-green-70-dark);
-  --tc-menu-item-green-background-pressed-dark: var(--tc-green-60-dark);
-  --tc-menu-item-green-background-active-dark: var(--tc-green-50-dark);
+  --tc-menu-item-green-background-hover-dark: var(--tc-green-80-dark);
+  --tc-menu-item-green-background-pressed-dark: var(--tc-green-70-dark);
+  --tc-menu-item-green-background-active-dark: var(--tc-green-60-dark);
   --tc-menu-item-green-gradient-main-dark: rgba(179, 236, 202, 1);
   --tc-menu-item-green-gradient-accent-dark: rgba(22, 197, 95, 1);
   --tc-menu-item-violet-background-default-dark: var(--tc-violet-80-dark);
-  --tc-menu-item-violet-background-hover-dark: var(--tc-violet-70-dark);
-  --tc-menu-item-violet-background-pressed-dark: var(--tc-violet-60-dark);
-  --tc-menu-item-violet-background-active-dark: var(--tc-violet-50-dark);
+  --tc-menu-item-violet-background-hover-dark: var(--tc-violet-80-dark);
+  --tc-menu-item-violet-background-pressed-dark: var(--tc-violet-70-dark);
+  --tc-menu-item-violet-background-active-dark: var(--tc-violet-60-dark);
   --tc-menu-item-violet-gradient-main-dark: rgba(194, 176, 240, 1);
   --tc-menu-item-violet-gradient-accent-dark: rgba(149, 116, 231, 1);
   --tc-theme-switcher-background-light-theme-default-dark: rgb(255, 255, 255);
@@ -10354,33 +10354,33 @@
   --tc-navigation-button-pressed: var(--tc-yellow-10);
   --tc-navigation-button-active: var(--tc-yellow-20);
   --tc-menu-item-yellow-background-default: var(--tc-yellow-00);
-  --tc-menu-item-yellow-background-hover: var(--tc-yellow-10);
-  --tc-menu-item-yellow-background-pressed: var(--tc-yellow-20);
-  --tc-menu-item-yellow-background-active: var(--tc-yellow-30);
+  --tc-menu-item-yellow-background-hover: var(--tc-yellow-00);
+  --tc-menu-item-yellow-background-pressed: var(--tc-yellow-10);
+  --tc-menu-item-yellow-background-active: var(--tc-yellow-20);
   --tc-menu-item-yellow-gradient-main: var(--tc-yellow-20);
   --tc-menu-item-yellow-gradient-accent: rgba(255, 208, 38, 1);
   --tc-menu-item-blue-background-default: var(--tc-blue-00);
-  --tc-menu-item-blue-background-hover: var(--tc-blue-10);
-  --tc-menu-item-blue-background-pressed: var(--tc-blue-20);
-  --tc-menu-item-blue-background-active: var(--tc-blue-30);
+  --tc-menu-item-blue-background-hover: var(--tc-blue-00);
+  --tc-menu-item-blue-background-pressed: var(--tc-blue-10);
+  --tc-menu-item-blue-background-active: var(--tc-blue-20);
   --tc-menu-item-blue-gradient-main: var(--tc-blue-20);
   --tc-menu-item-blue-gradient-accent: rgba(25, 98, 212, 1);
   --tc-menu-item-red-background-default: var(--tc-red-00);
-  --tc-menu-item-red-background-hover: var(--tc-red-10);
-  --tc-menu-item-red-background-pressed: var(--tc-red-20);
-  --tc-menu-item-red-background-active: var(--tc-red-30);
+  --tc-menu-item-red-background-hover: var(--tc-red-00);
+  --tc-menu-item-red-background-pressed: var(--tc-red-10);
+  --tc-menu-item-red-background-active: var(--tc-red-20);
   --tc-menu-item-red-gradient-main: var(--tc-red-20);
   --tc-menu-item-red-gradient-accent: rgba(233, 69, 54, 1);
   --tc-menu-item-green-background-default: var(--tc-green-00);
-  --tc-menu-item-green-background-hover: var(--tc-green-10);
-  --tc-menu-item-green-background-pressed: var(--tc-green-20);
-  --tc-menu-item-green-background-active: var(--tc-green-30);
+  --tc-menu-item-green-background-hover: var(--tc-green-00);
+  --tc-menu-item-green-background-pressed: var(--tc-green-10);
+  --tc-menu-item-green-background-active: var(--tc-green-20);
   --tc-menu-item-green-gradient-main: var(--tc-green-20);
   --tc-menu-item-green-gradient-accent: rgba(22, 197, 95, 1);
   --tc-menu-item-violet-background-default: var(--tc-violet-00);
-  --tc-menu-item-violet-background-hover: var(--tc-violet-10);
-  --tc-menu-item-violet-background-pressed: var(--tc-violet-20);
-  --tc-menu-item-violet-background-active: var(--tc-violet-30);
+  --tc-menu-item-violet-background-hover: var(--tc-violet-00);
+  --tc-menu-item-violet-background-pressed: var(--tc-violet-10);
+  --tc-menu-item-violet-background-active: var(--tc-violet-20);
   --tc-menu-item-violet-gradient-main: var(--tc-violet-20);
   --tc-menu-item-violet-gradient-accent: rgba(149, 116, 231, 1);
   --tc-theme-switcher-background-light-theme-default: rgb(255, 255, 255);

package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.css

@@ -9964,33 +9964,33 @@
   --tc-navigation-button-pressed-dark: var(--tc-brown-70-dark);
   --tc-navigation-button-active-dark: var(--tc-brown-60-dark);
   --tc-menu-item-yellow-background-default-dark: var(--tc-yellow-80-dark);
-  --tc-menu-item-yellow-background-hover-dark: var(--tc-yellow-70-dark);
-  --tc-menu-item-yellow-background-pressed-dark: var(--tc-yellow-60-dark);
-  --tc-menu-item-yellow-background-active-dark: var(--tc-yellow-50-dark);
+  --tc-menu-item-yellow-background-hover-dark: var(--tc-yellow-80-dark);
+  --tc-menu-item-yellow-background-pressed-dark: var(--tc-yellow-70-dark);
+  --tc-menu-item-yellow-background-active-dark: var(--tc-yellow-60-dark);
   --tc-menu-item-yellow-gradient-main-dark: rgba(255, 237, 179, 1);
   --tc-menu-item-yellow-gradient-accent-dark: rgba(255, 208, 38, 1);
   --tc-menu-item-blue-background-default-dark: var(--tc-blue-80-dark);
-  --tc-menu-item-blue-background-hover-dark: var(--tc-blue-70-dark);
-  --tc-menu-item-blue-background-pressed-dark: var(--tc-blue-60-dark);
-  --tc-menu-item-blue-background-active-dark: var(--tc-blue-50-dark);
+  --tc-menu-item-blue-background-hover-dark: var(--tc-blue-80-dark);
+  --tc-menu-item-blue-background-pressed-dark: var(--tc-blue-70-dark);
+  --tc-menu-item-blue-background-active-dark: var(--tc-blue-60-dark);
   --tc-menu-item-blue-gradient-main-dark: rgba(131,172,232, 1);
   --tc-menu-item-blue-gradient-accent-dark: rgba(25, 98, 212, 1);
   --tc-menu-item-red-background-default-dark: var(--tc-red-80-dark);
-  --tc-menu-item-red-background-hover-dark: var(--tc-red-70-dark);
-  --tc-menu-item-red-background-pressed-dark: var(--tc-red-60-dark);
-  --tc-menu-item-red-background-active-dark: var(--tc-red-50-dark);
+  --tc-menu-item-red-background-hover-dark: var(--tc-red-80-dark);
+  --tc-menu-item-red-background-pressed-dark: var(--tc-red-70-dark);
+  --tc-menu-item-red-background-active-dark: var(--tc-red-60-dark);
   --tc-menu-item-red-gradient-main-dark: rgba(247, 196, 192, 1);
   --tc-menu-item-red-gradient-accent-dark: rgba(233, 69, 54, 1);
   --tc-menu-item-green-background-default-dark: var(--tc-green-80-dark);
-  --tc-menu-item-green-background-hover-dark: var(--tc-green-70-dark);
-  --tc-menu-item-green-background-pressed-dark: var(--tc-green-60-dark);
-  --tc-menu-item-green-background-active-dark: var(--tc-green-50-dark);
+  --tc-menu-item-green-background-hover-dark: var(--tc-green-80-dark);
+  --tc-menu-item-green-background-pressed-dark: var(--tc-green-70-dark);
+  --tc-menu-item-green-background-active-dark: var(--tc-green-60-dark);
   --tc-menu-item-green-gradient-main-dark: rgba(179, 236, 202, 1);
   --tc-menu-item-green-gradient-accent-dark: rgba(22, 197, 95, 1);
   --tc-menu-item-violet-background-default-dark: var(--tc-violet-80-dark);
-  --tc-menu-item-violet-background-hover-dark: var(--tc-violet-70-dark);
-  --tc-menu-item-violet-background-pressed-dark: var(--tc-violet-60-dark);
-  --tc-menu-item-violet-background-active-dark: var(--tc-violet-50-dark);
+  --tc-menu-item-violet-background-hover-dark: var(--tc-violet-80-dark);
+  --tc-menu-item-violet-background-pressed-dark: var(--tc-violet-70-dark);
+  --tc-menu-item-violet-background-active-dark: var(--tc-violet-60-dark);
   --tc-menu-item-violet-gradient-main-dark: rgba(194, 176, 240, 1);
   --tc-menu-item-violet-gradient-accent-dark: rgba(149, 116, 231, 1);
   --tc-theme-switcher-background-light-theme-default-dark: rgb(255, 255, 255);
@@ -10355,33 +10355,33 @@
   --tc-navigation-button-pressed: var(--tc-yellow-10);
   --tc-navigation-button-active: var(--tc-yellow-20);
   --tc-menu-item-yellow-background-default: var(--tc-yellow-00);
-  --tc-menu-item-yellow-background-hover: var(--tc-yellow-10);
-  --tc-menu-item-yellow-background-pressed: var(--tc-yellow-20);
-  --tc-menu-item-yellow-background-active: var(--tc-yellow-30);
+  --tc-menu-item-yellow-background-hover: var(--tc-yellow-00);
+  --tc-menu-item-yellow-background-pressed: var(--tc-yellow-10);
+  --tc-menu-item-yellow-background-active: var(--tc-yellow-20);
   --tc-menu-item-yellow-gradient-main: var(--tc-yellow-20);
   --tc-menu-item-yellow-gradient-accent: rgba(255, 208, 38, 1);
   --tc-menu-item-blue-background-default: var(--tc-blue-00);
-  --tc-menu-item-blue-background-hover: var(--tc-blue-10);
-  --tc-menu-item-blue-background-pressed: var(--tc-blue-20);
-  --tc-menu-item-blue-background-active: var(--tc-blue-30);
+  --tc-menu-item-blue-background-hover: var(--tc-blue-00);
+  --tc-menu-item-blue-background-pressed: var(--tc-blue-10);
+  --tc-menu-item-blue-background-active: var(--tc-blue-20);
   --tc-menu-item-blue-gradient-main: var(--tc-blue-20);
   --tc-menu-item-blue-gradient-accent: rgba(25, 98, 212, 1);
   --tc-menu-item-red-background-default: var(--tc-red-00);
-  --tc-menu-item-red-background-hover: var(--tc-red-10);
-  --tc-menu-item-red-background-pressed: var(--tc-red-20);
-  --tc-menu-item-red-background-active: var(--tc-red-30);
+  --tc-menu-item-red-background-hover: var(--tc-red-00);
+  --tc-menu-item-red-background-pressed: var(--tc-red-10);
+  --tc-menu-item-red-background-active: var(--tc-red-20);
   --tc-menu-item-red-gradient-main: var(--tc-red-20);
   --tc-menu-item-red-gradient-accent: rgba(233, 69, 54, 1);
   --tc-menu-item-green-background-default: var(--tc-green-00);
-  --tc-menu-item-green-background-hover: var(--tc-green-10);
-  --tc-menu-item-green-background-pressed: var(--tc-green-20);
-  --tc-menu-item-green-background-active: var(--tc-green-30);
+  --tc-menu-item-green-background-hover: var(--tc-green-00);
+  --tc-menu-item-green-background-pressed: var(--tc-green-10);
+  --tc-menu-item-green-background-active: var(--tc-green-20);
   --tc-menu-item-green-gradient-main: var(--tc-green-20);
   --tc-menu-item-green-gradient-accent: rgba(22, 197, 95, 1);
   --tc-menu-item-violet-background-default: var(--tc-violet-00);
-  --tc-menu-item-violet-background-hover: var(--tc-violet-10);
-  --tc-menu-item-violet-background-pressed: var(--tc-violet-20);
-  --tc-menu-item-violet-background-active: var(--tc-violet-30);
+  --tc-menu-item-violet-background-hover: var(--tc-violet-00);
+  --tc-menu-item-violet-background-pressed: var(--tc-violet-10);
+  --tc-menu-item-violet-background-active: var(--tc-violet-20);
   --tc-menu-item-violet-gradient-main: var(--tc-violet-20);
   --tc-menu-item-violet-gradient-accent: rgba(149, 116, 231, 1);
   --tc-theme-switcher-background-light-theme-default: rgb(255, 255, 255);

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

@@ -1038,11 +1038,29 @@
   --menu-mega-separator-color: var(--tc-border-quaternary-dark);
   --menu-mega-dropdown-background-color: var(--tc-layer-primary-dark);
 }
+.menu.menu__dark.menu__main .menu__first-level--themed {
+  --menu-item-theme-bg: var(--menu-background-color);
+}
+.menu.menu__dark.menu__main .menu__first-level--themed:is(.menu--active, :hover, :active) {
+  border-color: var(--menu-item-theme-state-bg);
+  background-image: linear-gradient(var(--menu-item-theme-state-bg), var(--menu-item-theme-state-bg));
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-clip: border-box;
+}
+.menu.menu__dark.menu__main .menu__first-level--themed.menu--active {
+  --menu-item-theme-state-bg: var(--menu-link-active-background-color);
+}
+.menu.menu__dark.menu__main .menu__first-level--themed:hover {
+  --menu-item-theme-state-bg: var(--menu-link-hover-background-color);
+}
+.menu.menu__dark.menu__main .menu__first-level--themed:active {
+  --menu-item-theme-state-bg: var(--menu-link-pressed-background-color);
+}
 .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-pressed-bg: var(--tc-menu-item-yellow-background-pressed-dark);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-yellow-gradient-main-dark) 30%,
@@ -1051,10 +1069,9 @@
   );
 }
 .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-pressed-bg: var(--tc-menu-item-red-background-pressed-dark);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-red-gradient-main-dark) 30%,
@@ -1063,10 +1080,9 @@
   );
 }
 .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-pressed-bg: var(--tc-menu-item-green-background-pressed-dark);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-green-gradient-main-dark) 30%,
@@ -1075,10 +1091,9 @@
   );
 }
 .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-pressed-bg: var(--tc-menu-item-violet-background-pressed-dark);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-violet-gradient-main-dark) 30%,
@@ -1087,10 +1102,9 @@
   );
 }
 .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-pressed-bg: var(--tc-menu-item-blue-background-pressed-dark);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-blue-gradient-main-dark) 30%,
@@ -1263,10 +1277,9 @@
   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-pressed-bg: var(--tc-menu-item-yellow-background-pressed);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-yellow-gradient-main) 30%,
@@ -1275,10 +1288,9 @@
   );
 }
 .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-pressed-bg: var(--tc-menu-item-red-background-pressed);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-red-gradient-main) 30%,
@@ -1287,10 +1299,9 @@
   );
 }
 .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-pressed-bg: var(--tc-menu-item-green-background-pressed);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-green-gradient-main) 30%,
@@ -1299,10 +1310,9 @@
   );
 }
 .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-pressed-bg: var(--tc-menu-item-violet-background-pressed);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-violet-gradient-main) 30%,
@@ -1311,10 +1321,9 @@
   );
 }
 .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-pressed-bg: var(--tc-menu-item-blue-background-pressed);
   --menu-item-theme-gradient: linear-gradient(
     135deg,
     var(--tc-menu-item-blue-gradient-main) 30%,
@@ -1327,8 +1336,9 @@
   padding: 0.25rem 0.625rem;
   isolation: isolate;
   color: var(--menu-text-color);
+  --menu-item-theme-bg: var(--menu-background-color);
   border: 0.125rem solid transparent;
-  background-image: linear-gradient(var(--menu-item-theme-bg)), var(--menu-item-theme-gradient);
+  background-image: linear-gradient(var(--menu-item-theme-bg), 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%;
@@ -1348,6 +1358,13 @@
   background-position: 0 0;
   background-clip: border-box;
 }
+.menu__main .menu__first-level--themed:active {
+  border-color: var(--menu-item-theme-pressed-bg);
+  background-image: linear-gradient(var(--menu-item-theme-pressed-bg), var(--menu-item-theme-pressed-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;
 }

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

@@ -7,6 +7,7 @@ export class TetMenu {
         this.type = 'main';
         this.active = false;
         this.clickable = false;
+        this.closeOnLinkClick = false;
         this.firstLevelTitle = '';
         this.firstLevelId = undefined;
         this.firstLevelLink = '';
@@ -21,6 +22,7 @@ export class TetMenu {
         this.megaActiveSubLevelIndex = -1;
         this.isMegaMenuOpen = false;
         this.isMegaMenuEscapeClosed = false;
+        this.isLinkClickClosed = false;
     }
     /** The host element. */
     el;
@@ -114,6 +116,7 @@ export class TetMenu {
      * opens mega menu when available or notifies mega siblings to close.
      */
     handleFirstLevelInteraction = () => {
+        this.isLinkClickClosed = false;
         if (this.isMegaMenuEnabled()) {
             this.syncLayout();
             this.openMegaMenu();
@@ -125,6 +128,7 @@ export class TetMenu {
      * Resets Escape-dismissed state once pointer fully leaves this menu trigger area.
      */
     handleMenuMouseLeave = () => {
+        this.isLinkClickClosed = false;
         if (!this.isMegaMenuEnabled()) {
             return;
         }
@@ -152,6 +156,7 @@ export class TetMenu {
         if (!this.isMegaMenuOpen && !isEventFromCurrentMenu) {
             return;
         }
+        this.isLinkClickClosed = true;
         this.isMegaMenuEscapeClosed = true;
         this.closeMegaMenu();
         this.blurFocusedMenuItem();
@@ -246,6 +251,42 @@ export class TetMenu {
         }
         this.megaActiveSubLevelIndex = -1;
     };
+    /**
+     * Closes the menu after a link is selected when enabled.
+     */
+    handleLinkClick = () => {
+        if (!this.closeOnLinkClick) {
+            return;
+        }
+        this.isLinkClickClosed = true;
+        this.isMegaMenuEscapeClosed = true;
+        this.closeMegaMenu();
+        this.blurFocusedMenuItem();
+    };
+    /**
+     * Closes the rendered dropdown without removing it from the DOM.
+     */
+    closeDropdown() {
+        const dropdown = this.el.shadowRoot?.querySelector('.menu__dropdown');
+        if (!dropdown) {
+            return;
+        }
+        dropdown.style.maxHeight = '0';
+        dropdown.style.transform = 'scaleY(0)';
+        dropdown.style.animationName = 'hideDropdown';
+    }
+    /**
+     * Restores the dropdown styles controlled by the component stylesheet.
+     */
+    resetDropdownStyles() {
+        const dropdown = this.el.shadowRoot?.querySelector('.menu__dropdown');
+        if (!dropdown) {
+            return;
+        }
+        dropdown.style.removeProperty('max-height');
+        dropdown.style.removeProperty('transform');
+        dropdown.style.removeProperty('animation-name');
+    }
     /**
      * Renders the first menu level.
      */
@@ -260,7 +301,7 @@ export class TetMenu {
             menuItemThemeClass = menuItemTheme ? `menu__first-level--theme-${menuItemTheme}` : '';
             showAnimation = showMenuItemAnimation;
         }
-        return (h("a", { id: firstLevelId, href: link, part: "first-level", onMouseEnter: this.handleFirstLevelInteraction, onFocus: this.handleFirstLevelInteraction, class: {
+        return (h("a", { id: firstLevelId, href: link, onClick: this.handleLinkClick, part: "first-level", onMouseEnter: this.handleFirstLevelInteraction, onFocus: this.handleFirstLevelInteraction, class: {
                 'menu__first-level': true,
                 'menu--active': isFirstLevelActive,
                 'menu__first-level--themed': menuItemThemeClass.length > 0,
@@ -280,6 +321,11 @@ export class TetMenu {
      */
     componentDidRender() {
         this.syncLayout();
+        if (this.isLinkClickClosed) {
+            this.closeDropdown();
+            return;
+        }
+        this.resetDropdownStyles();
     }
     disconnectedCallback() {
         this.setMegaParentElement(null);
@@ -399,7 +445,7 @@ export class TetMenu {
                 right: !isMegaMenuEnabled && !this.isSubmenuLeft,
                 menu__sublist: true
             } }, h("ul", { class: { content: true } }, subMenuItems))) : null;
-        return (h("li", null, h("a", { id: itemId, href: subLevel.link, onMouseEnter: () => this.setMegaActiveSubLevel(index, hasSubMenuItems), onFocus: () => this.setMegaActiveSubLevel(index, hasSubMenuItems), onKeyDown: (event) => this.handleMegaSecondLevelKeyDown(event, index, hasSubMenuItems), class: {
+        return (h("li", null, h("a", { id: itemId, href: subLevel.link, onClick: this.handleLinkClick, onMouseEnter: () => this.setMegaActiveSubLevel(index, hasSubMenuItems), onFocus: () => this.setMegaActiveSubLevel(index, hasSubMenuItems), onKeyDown: (event) => this.handleMegaSecondLevelKeyDown(event, index, hasSubMenuItems), class: {
                 'menu--active': !!subLevel.active || hasActiveDescendant,
                 'menu--mega-current': isMegaMenuEnabled && index === this.megaActiveSubLevelIndex,
                 'menu--highlighted': !!subLevel.highlighted,
@@ -440,7 +486,7 @@ export class TetMenu {
                 });
             }
         }
-        return (h("li", null, h("a", { id: subLevel.id, href: subLevel.link, onKeyDown: this.handleMegaThirdLevelLinkKeyDown, class: {
+        return (h("li", null, h("a", { id: subLevel.id, href: subLevel.link, onClick: this.handleLinkClick, onKeyDown: this.handleMegaThirdLevelLinkKeyDown, class: {
                 'menu--active': !!subLevel.active,
                 'menu--highlighted': !!subLevel.highlighted,
                 'line-top': !!subLevel.lineTop,
@@ -515,7 +561,7 @@ export class TetMenu {
     }
     render() {
         const { type } = this;
-        return (h(Host, { key: '1ef7ec6cf96162d56d60d445eaf517d1c2bde4b6' }, h("div", { key: '68c2cdeb170c08f4246b95941c2d42f042238288', class: {
+        return (h(Host, { key: '5a761f70ae72b4142ca563d90bc9cc9605d0034f' }, h("div", { key: '620cfab27c1ca9cb3c269f73ef50955d85118924', class: {
                 menu: true,
                 menu__main: type === 'main',
                 menu__language: type === 'language',
@@ -593,6 +639,24 @@ export class TetMenu {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "closeOnLinkClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the menu should close after a link is clicked."
+                },
+                "attribute": "close-on-link-click",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "firstLevelTitle": {
                 "type": "string",
                 "mutable": false,
@@ -789,7 +853,8 @@ export class TetMenu {
             "isSubmenuLeft": {},
             "megaActiveSubLevelIndex": {},
             "isMegaMenuOpen": {},
-            "isMegaMenuEscapeClosed": {}
+            "isMegaMenuEscapeClosed": {},
+            "isLinkClickClosed": {}
         };
     }
     static get elementRef() { return "el"; }