@strands.gg/accui 1.7.2 → 1.7.3

package/dist/accui.css

@@ -218,8 +218,7 @@
 .accui-component-scope img,
 .accui-component-scope picture,
 .accui-component-scope video,
-.accui-component-scope canvas,
-.accui-component-scope svg {
+.accui-component-scope canvas {
   display: block;
   max-width: 100%;
 }
@@ -4267,19 +4266,19 @@ to {
 }
 
 /* Container Styles */
-.profile-container-width[data-v-31d6a9db] {
+.profile-container-width[data-v-b880e15b] {
   width: 100%;
 }
-.profile-max-width[data-v-31d6a9db] {
+.profile-max-width[data-v-b880e15b] {
   max-width: 56rem;
 }
-.profile-centered[data-v-31d6a9db] {
+.profile-centered[data-v-b880e15b] {
   margin: 0 auto;
 }
-.profile-animated[data-v-31d6a9db] {
-  animation: slideUp-31d6a9db 0.3s ease-out;
+.profile-animated[data-v-b880e15b] {
+  animation: slideUp-b880e15b 0.3s ease-out;
 }
-@keyframes slideUp-31d6a9db {
+@keyframes slideUp-b880e15b {
 from {
     opacity: 0;
     transform: translateY(20px);
@@ -4289,12 +4288,12 @@ to {
     transform: translateY(0);
 }
 }
-.profile-content-layout[data-v-31d6a9db] {
+.profile-content-layout[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.profile-card-modern[data-v-31d6a9db] {
+.profile-card-modern[data-v-b880e15b] {
   background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 1rem;
@@ -4303,10 +4302,10 @@ to {
 }
 
 /* Modal-specific styles */
-.profile-container-modal[data-v-31d6a9db] {
+.profile-container-modal[data-v-b880e15b] {
   /* Remove any container-specific styles when in modal */
 }
-.profile-content-modal[data-v-31d6a9db] {
+.profile-content-modal[data-v-b880e15b] {
   /* Remove card styling when in modal */
   background: transparent;
   border: none;
@@ -4316,39 +4315,39 @@ to {
 }
 
 /* Header */
-.profile-header[data-v-31d6a9db] {
+.profile-header[data-v-b880e15b] {
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.profile-title[data-v-31d6a9db] {
+.profile-title[data-v-b880e15b] {
   font-size: 1.5rem;
   font-weight: 700;
   color: #EA00A8;
 }
-.profile-subtitle[data-v-31d6a9db] {
+.profile-subtitle[data-v-b880e15b] {
   color: #4b5563;
   font-size: 0.875rem;
 }
 
 /* Profile Image Section */
-.profile-image-section[data-v-31d6a9db] {
+.profile-image-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.profile-image-container[data-v-31d6a9db] {
+.profile-image-container[data-v-b880e15b] {
   position: relative;
 }
-.profile-image-wrapper[data-v-31d6a9db] {
+.profile-image-wrapper[data-v-b880e15b] {
   position: relative;
   display: inline-block;
 }
-.profile-image-wrapper:hover .profile-upload-overlay[data-v-31d6a9db] {
+.profile-image-wrapper:hover .profile-upload-overlay[data-v-b880e15b] {
   opacity: 1;
 }
-.profile-progress-ring[data-v-31d6a9db] {
+.profile-progress-ring[data-v-b880e15b] {
   position: absolute;
   z-index: 10;
   top: 50%;
@@ -4356,22 +4355,22 @@ to {
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
-.profile-avatar[data-v-31d6a9db] {
+.profile-avatar[data-v-b880e15b] {
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
   position: relative;
 }
-.profile-avatar-with-image[data-v-31d6a9db] {
+.profile-avatar-with-image[data-v-b880e15b] {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
-.profile-avatar-image[data-v-31d6a9db] {
+.profile-avatar-image[data-v-b880e15b] {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.profile-avatar-initials[data-v-31d6a9db] {
+.profile-avatar-initials[data-v-b880e15b] {
   background-color: #EA00A8;
   display: flex;
   align-items: center;
@@ -4382,7 +4381,7 @@ to {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   z-index: 10;
 }
-.profile-upload-overlay[data-v-31d6a9db] {
+.profile-upload-overlay[data-v-b880e15b] {
   position: absolute;
   inset: 0;
   border-radius: 50%;
@@ -4396,64 +4395,64 @@ to {
   border: none;
   cursor: pointer;
 }
-.profile-upload-overlay[data-v-31d6a9db]:disabled {
+.profile-upload-overlay[data-v-b880e15b]:disabled {
   cursor: not-allowed;
 }
-.profile-upload-icon[data-v-31d6a9db] {
+.profile-upload-icon[data-v-b880e15b] {
   width: 1.5rem;
   height: 1.5rem;
   color: white;
 }
-.profile-file-input[data-v-31d6a9db] {
+.profile-file-input[data-v-b880e15b] {
   display: none;
 }
 
 /* Profile Form */
-.profile-form[data-v-31d6a9db] {
+.profile-form[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.profile-form-grid[data-v-31d6a9db] {
+.profile-form-grid[data-v-b880e15b] {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
 }
 @media (min-width: 768px) {
-.profile-form[data-v-31d6a9db] {
+.profile-form[data-v-b880e15b] {
     gap: 1.5rem;
 }
-.profile-form-grid[data-v-31d6a9db] {
+.profile-form-grid[data-v-b880e15b] {
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
 }
-.profile-title[data-v-31d6a9db] {
+.profile-title[data-v-b880e15b] {
     font-size: 1.875rem;
 }
-.profile-subtitle[data-v-31d6a9db] {
+.profile-subtitle[data-v-b880e15b] {
     font-size: 1rem;
 }
 }
 
 /* Section Styles */
-.profile-section[data-v-31d6a9db] {
+.profile-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 @media (min-width: 768px) {
-.profile-section[data-v-31d6a9db] {
+.profile-section[data-v-b880e15b] {
     gap: 1rem;
 }
 }
-.profile-section-title[data-v-31d6a9db] {
+.profile-section-title[data-v-b880e15b] {
   font-size: 1.125rem;
   font-weight: 600;
   color: #111827;
 }
 
 /* Setting Cards */
-.profile-setting-card[data-v-31d6a9db] {
+.profile-setting-card[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -4461,49 +4460,49 @@ to {
   background-color: #f9fafb;
   border-radius: 0.75rem;
 }
-.profile-setting-header[data-v-31d6a9db] {
+.profile-setting-header[data-v-b880e15b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-.profile-setting-title[data-v-31d6a9db] {
+.profile-setting-title[data-v-b880e15b] {
   font-weight: 500;
   color: #111827;
 }
-.profile-setting-subtitle[data-v-31d6a9db] {
+.profile-setting-subtitle[data-v-b880e15b] {
   font-size: 0.875rem;
   color: #4b5563;
 }
 
 /* Transitions */
-.expand-enter-active[data-v-31d6a9db] {
+.expand-enter-active[data-v-b880e15b] {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
-.expand-leave-active[data-v-31d6a9db] {
+.expand-leave-active[data-v-b880e15b] {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
-.expand-enter-from[data-v-31d6a9db] {
+.expand-enter-from[data-v-b880e15b] {
   max-height: 0;
   opacity: 0;
   transform: translateY(-10px);
 }
-.expand-leave-to[data-v-31d6a9db] {
+.expand-leave-to[data-v-b880e15b] {
   max-height: 0;
   opacity: 0;
   transform: translateY(-10px);
 }
-.expand-enter-to[data-v-31d6a9db],
-.expand-leave-from[data-v-31d6a9db] {
+.expand-enter-to[data-v-b880e15b],
+.expand-leave-from[data-v-b880e15b] {
   max-height: 300px;
   opacity: 1;
   transform: translateY(0);
 }
 
 /* MFA Device Chip */
-.mfa-device-chip[data-v-31d6a9db] {
+.mfa-device-chip[data-v-b880e15b] {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
@@ -4517,13 +4516,13 @@ to {
 
 
 /* New semantic classes for Tailwind conversion */
-.profile-change-form[data-v-31d6a9db] {
+.profile-change-form[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   overflow: hidden;
 }
-.profile-field-section[data-v-31d6a9db] {
+.profile-field-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -4531,76 +4530,76 @@ to {
   background-color: #f9fafb;
   border-radius: 0.75rem;
 }
-.profile-field-header[data-v-31d6a9db] {
+.profile-field-header[data-v-b880e15b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-.profile-field-header-vertical[data-v-31d6a9db] {
+.profile-field-header-vertical[data-v-b880e15b] {
   align-items: flex-start;
   gap: 1rem;
 }
-.profile-password-section[data-v-31d6a9db] {
+.profile-password-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 @media (min-width: 768px) {
-.profile-password-section[data-v-31d6a9db] {
+.profile-password-section[data-v-b880e15b] {
     gap: 1rem;
 }
 }
-.profile-mfa-content[data-v-31d6a9db] {
+.profile-mfa-content[data-v-b880e15b] {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
-.profile-mfa-chips[data-v-31d6a9db] {
+.profile-mfa-chips[data-v-b880e15b] {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
-.profile-actions-section[data-v-31d6a9db] {
+.profile-actions-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   padding-top: 1.5rem;
   border-top: 1px solid #e5e7eb;
-  animation: slideUp-31d6a9db 0.3s ease-out;
+  animation: slideUp-b880e15b 0.3s ease-out;
 }
 @media (min-width: 640px) {
-.profile-actions-section[data-v-31d6a9db] {
+.profile-actions-section[data-v-b880e15b] {
     flex-direction: row;
 }
 }
-.profile-help-item[data-v-31d6a9db] {
+.profile-help-item[data-v-b880e15b] {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
 }
-.profile-help-icon[data-v-31d6a9db] {
+.profile-help-icon[data-v-b880e15b] {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
-.profile-footer-actions[data-v-31d6a9db] {
+.profile-footer-actions[data-v-b880e15b] {
   display: flex;
   gap: 1rem;
   align-items: stretch;
 }
-.profile-action-icon[data-v-31d6a9db] {
+.profile-action-icon[data-v-b880e15b] {
   width: 1rem;
   height: 1rem;
 }
-.profile-footer-text[data-v-31d6a9db] {
+.profile-footer-text[data-v-b880e15b] {
   color: #9ca3af;
   font-size: 0.875rem;
 }
 
 /* Avatar Editor Modal */
-.profile-avatar-modal-overlay[data-v-31d6a9db] {
+.profile-avatar-modal-overlay[data-v-b880e15b] {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -4610,7 +4609,7 @@ to {
   z-index: 50;
   padding: 1rem;
 }
-.profile-avatar-modal[data-v-31d6a9db] {
+.profile-avatar-modal[data-v-b880e15b] {
   background-color: #ffffff;
   border-radius: 0.75rem;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
@@ -4619,18 +4618,18 @@ to {
   max-height: 90vh;
   overflow-y: auto;
 }
-.profile-avatar-modal-content[data-v-31d6a9db] {
+.profile-avatar-modal-content[data-v-b880e15b] {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.profile-avatar-modal-header[data-v-31d6a9db] {
+.profile-avatar-modal-header[data-v-b880e15b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.profile-avatar-modal-close[data-v-31d6a9db] {
+.profile-avatar-modal-close[data-v-b880e15b] {
   color: #9ca3af;
   transition: color 0.2s ease;
   background: none;
@@ -4639,50 +4638,50 @@ to {
   padding: 0.25rem;
   border-radius: 0.25rem;
 }
-.profile-avatar-modal-close[data-v-31d6a9db]:hover {
+.profile-avatar-modal-close[data-v-b880e15b]:hover {
   color: #4b5563;
 }
-.profile-avatar-modal-close-icon[data-v-31d6a9db] {
+.profile-avatar-modal-close-icon[data-v-b880e15b] {
   width: 1.5rem;
   height: 1.5rem;
 }
 
 /* Profile field styles */
-.profile-field-title[data-v-31d6a9db] {
+.profile-field-title[data-v-b880e15b] {
   font-weight: 500;
   color: #111827;
 }
-.profile-field-subtitle[data-v-31d6a9db] {
+.profile-field-subtitle[data-v-b880e15b] {
   font-size: 0.875rem;
   color: #6b7280;
 }
-.profile-availability-message[data-v-31d6a9db] {
+.profile-availability-message[data-v-b880e15b] {
   font-size: 0.75rem;
 }
-.profile-availability-message.success[data-v-31d6a9db] {
+.profile-availability-message.success[data-v-b880e15b] {
   color: #16a34a;
 }
-.profile-availability-message.error[data-v-31d6a9db] {
+.profile-availability-message.error[data-v-b880e15b] {
   color: #dc2626;
 }
-.profile-toggle-container[data-v-31d6a9db] {
+.profile-toggle-container[data-v-b880e15b] {
   flex-shrink: 0;
 }
-.profile-alert-message[data-v-31d6a9db] {
+.profile-alert-message[data-v-b880e15b] {
   font-weight: 500;
 }
-.profile-modal-title[data-v-31d6a9db] {
+.profile-modal-title[data-v-b880e15b] {
   font-size: 1.25rem;
   font-weight: 700;
   color: #111827;
 }
 
 /* Sign out button styles */
-.profile-sign-out-button[data-v-31d6a9db] {
+.profile-sign-out-button[data-v-b880e15b] {
   width: 100%;
 }
 @media (min-width: 640px) {
-.profile-sign-out-button[data-v-31d6a9db] {
+.profile-sign-out-button[data-v-b880e15b] {
     width: auto;
 }
 }
@@ -5006,11 +5005,11 @@ to {
   gap: 0.75rem;
 }
 
-.signed-in-fallback[data-v-ab5f199f] {
+.signed-in-fallback[data-v-669fa3b4] {
   text-align: center;
   padding: 2rem 0;
 }
-.signed-in-icon-container[data-v-ab5f199f] {
+.signed-in-icon-container[data-v-669fa3b4] {
   width: 4rem;
   height: 4rem;
   margin: 0 auto 1rem;
@@ -5020,22 +5019,22 @@ to {
   align-items: center;
   justify-content: center;
 }
-.signed-in-icon[data-v-ab5f199f] {
+.signed-in-icon[data-v-669fa3b4] {
   width: 2rem;
   height: 2rem;
   color: #a3a3a3;
 }
-.signed-in-title[data-v-ab5f199f] {
+.signed-in-title[data-v-669fa3b4] {
   font-size: 1.125rem;
   font-weight: 600;
   color: #171717;
   margin-bottom: 0.5rem;
 }
-.signed-in-subtitle[data-v-ab5f199f] {
+.signed-in-subtitle[data-v-669fa3b4] {
   color: #525252;
   margin-bottom: 1rem;
 }
-.signed-in-button[data-v-ab5f199f] {
+.signed-in-button[data-v-669fa3b4] {
   background-color: #EA00A8;
   color: white;
   width: auto;
@@ -5046,7 +5045,7 @@ to {
   font-weight: 600;
   transition: background-color 0.2s ease;
 }
-.signed-in-button[data-v-ab5f199f]:hover {
+.signed-in-button[data-v-669fa3b4]:hover {
   background-color: #B8006F;
 }
 
@@ -5096,7 +5095,7 @@ to {
 }
 
 /* User Button */
-.user-button[data-v-5acc4f6e] {
+.user-button[data-v-9e187d2c] {
   position: relative;
   display: flex;
   align-items: center;
@@ -5110,44 +5109,44 @@ to {
   cursor: pointer;
   transition: all 0.15s;
 }
-.user-button[data-v-5acc4f6e]:hover {
+.user-button[data-v-9e187d2c]:hover {
   background-color: #d1d5db;
 }
-.user-button[data-v-5acc4f6e]:focus {
+.user-button[data-v-9e187d2c]:focus {
   outline: none;
   box-shadow: 0 0 0 2px #EA00A8;
 }
-.user-button-content[data-v-5acc4f6e] {
+.user-button-content[data-v-9e187d2c] {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
-.user-info[data-v-5acc4f6e] {
+.user-info[data-v-9e187d2c] {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
-.user-name[data-v-5acc4f6e] {
+.user-name[data-v-9e187d2c] {
   font-size: 0.875rem;
   font-weight: 500;
   color: #111827;
 }
-.avatar-container[data-v-5acc4f6e] {
+.avatar-container[data-v-9e187d2c] {
   position: relative;
   flex-shrink: 0;
 }
-.avatar-wrapper[data-v-5acc4f6e] {
+.avatar-wrapper[data-v-9e187d2c] {
   position: relative;
   width: 2rem;
   height: 2rem;
 }
-.avatar-image[data-v-5acc4f6e] {
+.avatar-image[data-v-9e187d2c] {
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   object-fit: cover;
 }
-.avatar-default[data-v-5acc4f6e] {
+.avatar-default[data-v-9e187d2c] {
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -5156,27 +5155,24 @@ to {
   align-items: center;
   justify-content: center;
 }
-.avatar-icon[data-v-5acc4f6e] {
+.avatar-icon[data-v-9e187d2c] {
   width: 1.25rem;
   height: 1.25rem;
   color: #6b7280;
 }
-.dropdown-arrow[data-v-5acc4f6e] {
+.dropdown-arrow[data-v-9e187d2c] {
   width: 1rem;
   height: 1rem;
   color: #9ca3af;
   transition: transform 0.15s;
 }
-.dropdown-arrow-open[data-v-5acc4f6e] {
+.dropdown-arrow-open[data-v-9e187d2c] {
   transform: rotate(180deg);
 }
 
 /* Dropdown Menu */
-.dropdown-menu[data-v-5acc4f6e] {
+.dropdown-menu[data-v-9e187d2c] {
   position: absolute;
-  right: 0;
-  top: 100%;
-  margin-top: 0.5rem;
   width: 18rem;
   background: white;
   border-radius: 0.5rem;
@@ -5184,10 +5180,40 @@ to {
   border: 1px solid #e5e7eb;
   z-index: 50;
 }
-.dropdown-content[data-v-5acc4f6e] {
+
+/* Horizontal alignment */
+.dropdown-menu-align-left[data-v-9e187d2c] {
+  left: 0;
+}
+.dropdown-menu-align-right[data-v-9e187d2c] {
+  right: 0;
+}
+.dropdown-menu-align-center[data-v-9e187d2c] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Vertical alignment */
+.dropdown-menu-vertical-bottom[data-v-9e187d2c] {
+  top: 100%;
+  margin-top: 0.5rem;
+}
+.dropdown-menu-vertical-top[data-v-9e187d2c] {
+  bottom: 100%;
+  margin-bottom: 0.5rem;
+}
+
+/* Center horizontal alignment needs special handling for transforms */
+.dropdown-menu-align-center.dropdown-menu-vertical-bottom[data-v-9e187d2c] {
+  transform: translateX(-50%);
+}
+.dropdown-menu-align-center.dropdown-menu-vertical-top[data-v-9e187d2c] {
+  transform: translateX(-50%);
+}
+.dropdown-content[data-v-9e187d2c] {
   padding: 0.5rem;
 }
-.dropdown-header[data-v-5acc4f6e] {
+.dropdown-header[data-v-9e187d2c] {
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -5195,10 +5221,10 @@ to {
   border-radius: 0.5rem;
   background-color: #f9fafb;
 }
-.dropdown-avatar-container[data-v-5acc4f6e] {
+.dropdown-avatar-container[data-v-9e187d2c] {
   position: relative;
 }
-.level-progress-overlay[data-v-5acc4f6e] {
+.level-progress-overlay[data-v-9e187d2c] {
   position: absolute;
   z-index: 10;
   top: 50%;
@@ -5206,13 +5232,13 @@ to {
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
-.dropdown-avatar-image[data-v-5acc4f6e] {
+.dropdown-avatar-image[data-v-9e187d2c] {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 50%;
   object-fit: cover;
 }
-.dropdown-avatar-default[data-v-5acc4f6e] {
+.dropdown-avatar-default[data-v-9e187d2c] {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 50%;
@@ -5221,17 +5247,17 @@ to {
   align-items: center;
   justify-content: center;
 }
-.dropdown-avatar-icon[data-v-5acc4f6e] {
+.dropdown-avatar-icon[data-v-9e187d2c] {
   width: 1.25rem;
   height: 1.25rem;
   color: #6b7280;
 }
-.dropdown-user-details[data-v-5acc4f6e] {
+.dropdown-user-details[data-v-9e187d2c] {
   flex: 1;
   min-width: 0;
   text-align: left;
 }
-.dropdown-user-name[data-v-5acc4f6e] {
+.dropdown-user-name[data-v-9e187d2c] {
   font-size: 0.875rem;
   font-weight: 500;
   color: #111827;
@@ -5239,24 +5265,24 @@ to {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.dropdown-user-email[data-v-5acc4f6e] {
+.dropdown-user-email[data-v-9e187d2c] {
   font-size: 0.875rem;
   color: #6b7280;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.dropdown-divider[data-v-5acc4f6e] {
+.dropdown-divider[data-v-9e187d2c] {
   height: 1px;
   background-color: #e5e7eb;
   margin: 0.5rem 0;
 }
-.dropdown-menu-items[data-v-5acc4f6e] {
+.dropdown-menu-items[data-v-9e187d2c] {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
-.dropdown-menu-item[data-v-5acc4f6e] {
+.dropdown-menu-item[data-v-9e187d2c] {
   width: 100%;
   display: flex;
   align-items: center;
@@ -5271,29 +5297,29 @@ to {
   transition: all 0.15s;
   text-align: left;
 }
-.dropdown-menu-item[data-v-5acc4f6e]:hover,
-.dropdown-menu-item[data-v-5acc4f6e]:focus {
+.dropdown-menu-item[data-v-9e187d2c]:hover,
+.dropdown-menu-item[data-v-9e187d2c]:focus {
   background-color: #f3f4f6;
   outline: none;
 }
-.dropdown-menu-item-danger[data-v-5acc4f6e] {
+.dropdown-menu-item-danger[data-v-9e187d2c] {
   color: #dc2626;
 }
-.dropdown-menu-item-danger[data-v-5acc4f6e]:hover,
-.dropdown-menu-item-danger[data-v-5acc4f6e]:focus {
+.dropdown-menu-item-danger[data-v-9e187d2c]:hover,
+.dropdown-menu-item-danger[data-v-9e187d2c]:focus {
   background-color: #fef2f2;
 }
-.dropdown-menu-icon[data-v-5acc4f6e] {
+.dropdown-menu-icon[data-v-9e187d2c] {
   width: 1rem;
   height: 1rem;
   color: #9ca3af;
 }
-.dropdown-menu-icon-danger[data-v-5acc4f6e] {
+.dropdown-menu-icon-danger[data-v-9e187d2c] {
   color: #ef4444;
 }
 
 /* Sign In Button */
-.sign-in-button[data-v-5acc4f6e] {
+.sign-in-button[data-v-9e187d2c] {
   position: relative;
   display: flex;
   align-items: center;
@@ -5308,30 +5334,30 @@ to {
   cursor: pointer;
   transition: all 0.15s;
 }
-.sign-in-button[data-v-5acc4f6e]:hover {
+.sign-in-button[data-v-9e187d2c]:hover {
   background-color: #B8006F;
 }
-.sign-in-button[data-v-5acc4f6e]:focus {
+.sign-in-button[data-v-9e187d2c]:focus {
   outline: none;
   box-shadow: 0 0 0 2px #EA00A8, 0 0 0 4px white;
 }
-.sign-in-icon[data-v-5acc4f6e] {
+.sign-in-icon[data-v-9e187d2c] {
   width: 1rem;
   height: 1rem;
 }
 
 /* Modal Styles */
-.modal-header[data-v-5acc4f6e] {
+.modal-header[data-v-9e187d2c] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.modal-title[data-v-5acc4f6e] {
+.modal-title[data-v-9e187d2c] {
   font-size: 1.25rem;
   font-weight: 600;
   color: #111827;
 }
-.modal-close-button[data-v-5acc4f6e] {
+.modal-close-button[data-v-9e187d2c] {
   padding: 0.25rem;
   border-radius: 0.5rem;
   color: #9ca3af;
@@ -5340,37 +5366,61 @@ to {
   cursor: pointer;
   transition: all 0.2s;
 }
-.modal-close-button[data-v-5acc4f6e]:hover {
+.modal-close-button[data-v-9e187d2c]:hover {
   color: #6b7280;
   background-color: #f3f4f6;
 }
-.modal-close-icon[data-v-5acc4f6e] {
+.modal-close-icon[data-v-9e187d2c] {
   width: 1.25rem;
   height: 1.25rem;
 }
 
 /* Transitions */
-.dropdown-enter-active[data-v-5acc4f6e],
-.dropdown-leave-active[data-v-5acc4f6e] {
+.dropdown-enter-active[data-v-9e187d2c],
+.dropdown-leave-active[data-v-9e187d2c] {
   transition: all 0.15s ease;
 }
-.dropdown-enter-from[data-v-5acc4f6e],
-.dropdown-leave-to[data-v-5acc4f6e] {
+.dropdown-enter-from[data-v-9e187d2c],
+.dropdown-leave-to[data-v-9e187d2c] {
   opacity: 0;
-  transform: scale(0.95) translateY(4px);
 }
-.dropdown-enter-to[data-v-5acc4f6e],
-.dropdown-leave-from[data-v-5acc4f6e] {
+.dropdown-enter-to[data-v-9e187d2c],
+.dropdown-leave-from[data-v-9e187d2c] {
   opacity: 1;
+}
+
+/* Transform-based transitions for different alignments */
+.dropdown-menu-align-left.dropdown-enter-from[data-v-9e187d2c],
+.dropdown-menu-align-left.dropdown-leave-to[data-v-9e187d2c] {
+  transform: scale(0.95) translateY(4px);
+}
+.dropdown-menu-align-left.dropdown-enter-to[data-v-9e187d2c],
+.dropdown-menu-align-left.dropdown-leave-from[data-v-9e187d2c] {
   transform: scale(1) translateY(0);
 }
+.dropdown-menu-align-right.dropdown-enter-from[data-v-9e187d2c],
+.dropdown-menu-align-right.dropdown-leave-to[data-v-9e187d2c] {
+  transform: scale(0.95) translateY(4px);
+}
+.dropdown-menu-align-right.dropdown-enter-to[data-v-9e187d2c],
+.dropdown-menu-align-right.dropdown-leave-from[data-v-9e187d2c] {
+  transform: scale(1) translateY(0);
+}
+.dropdown-menu-align-center.dropdown-enter-from[data-v-9e187d2c],
+.dropdown-menu-align-center.dropdown-leave-to[data-v-9e187d2c] {
+  transform: translateX(-50%) scale(0.95) translateY(4px);
+}
+.dropdown-menu-align-center.dropdown-enter-to[data-v-9e187d2c],
+.dropdown-menu-align-center.dropdown-leave-from[data-v-9e187d2c] {
+  transform: translateX(-50%) scale(1) translateY(0);
+}
 
 /* Responsive adjustments */
 @media (max-width: 640px) {
-.dropdown-menu[data-v-5acc4f6e] {
+.dropdown-menu[data-v-9e187d2c] {
     width: 16rem;
 }
-.user-info[data-v-5acc4f6e] {
+.user-info[data-v-9e187d2c] {
     display: none;
 }
 }