@photonix/basic 2.2.1 → 2.3.0

package/dist/index.css

@@ -15106,7 +15106,7 @@
 ._aspectRatio13_1n0qt_85 {
   padding-block-start: 300%;
 }
-._overlay_ac6li_4 {
+._overlay_14b7i_4 {
   -webkit-backdrop-filter: blur(var(--dimensions-2));
   backdrop-filter: blur(var(--dimensions-2));
   background-color: var(--color-black-30a);
@@ -15118,15 +15118,16 @@
   right: 0;
   top: var(--mega-menu-top-offset, calc(var(--dimensions-80) - var(--dimensions-8)));
   touch-action: none;
-  transition: opacity .3s ease, visibility .3s ease;
+  transition: opacity var(--motion-duration-normal) var(--motion-ease-out), visibility var(--motion-duration-instant) linear var(--motion-duration-normal);
   visibility: hidden;
   z-index: var(--z-index-overlay);
 }
-._overlayVisible_ac6li_22 {
+._overlayVisible_14b7i_27 {
   opacity: 1;
+  transition: opacity var(--motion-duration-medium) var(--motion-ease-in), visibility var(--motion-duration-instant) linear;
   visibility: visible;
 }
-._panel_ac6li_28 {
+._panel_14b7i_38 {
   background-color: var(--surface-neutral-primary);
   border-block-end: var(--border-sm) solid var(--border-neutral-tertiary);
   box-shadow: var(--down-lg-cast-x) var(--down-lg-cast-y) var(--down-lg-cast-blur) var(--down-lg-cast-spread) var(--down-lg-cast-color);
@@ -15141,33 +15142,49 @@
   padding-block: var(--space-lg) calc(var(--space-lg) + var(--space-2xs));
   padding-inline: var(--layout-grid-margin, var(--space-md));
   position: fixed;
-  transform: translateY(-10px);
-  transition: all .3s cubic-bezier(.16, 1, .3, 1);
+  transform: translateY(calc(var(--dimensions-8) * -1));
+  transition:
+    opacity var(--motion-duration-normal) var(--motion-ease-out),
+    transform var(--motion-duration-normal) var(--motion-ease-out),
+    visibility var(--motion-duration-instant) linear var(--motion-duration-normal);
   visibility: hidden;
   z-index: calc(var(--z-index-overlay) + 1);
 }
-._panelVisible_ac6li_54 {
+._panelVisible_14b7i_70 {
   opacity: 1;
   transform: translateY(0);
+  transition:
+    opacity var(--motion-duration-medium) var(--motion-ease-emphasized),
+    transform var(--motion-duration-medium) var(--motion-ease-emphasized),
+    visibility var(--motion-duration-instant) linear;
   visibility: visible;
 }
+@media (prefers-reduced-motion: reduce) {
+  ._overlay_14b7i_4,
+  ._overlayVisible_14b7i_27,
+  ._panel_14b7i_38,
+  ._panelVisible_14b7i_70 {
+    transform: none;
+    transition: none;
+  }
+}
 @media (max-width: 767px) {
-  ._panel_ac6li_28 {
+  ._panel_14b7i_38 {
     bottom: 0;
   }
-  ._content_ac6li_65:after {
+  ._content_14b7i_95:after {
     content: "";
     display: block;
     padding-block-end: var(--space-2xl);
   }
 }
-._spacer_ac6li_73 {
+._spacer_14b7i_103 {
   align-items: center;
   display: flex;
   flex-shrink: 0;
   visibility: hidden;
 }
-._content_ac6li_65 {
+._content_14b7i_95 {
   flex: 1;
   padding-inline-start: var(--space-none);
 }
@@ -17598,7 +17615,7 @@
     transform: translate(-100%);
   }
 }
-._topNavigationRoot_jj18y_1 {
+._topNavigationRoot_afw3t_1 {
   align-items: center;
   background-color: var(--surface-neutral-primary);
   block-size: calc(var(--dimensions-64) + var(--dimensions-8));
@@ -17610,18 +17627,20 @@
   padding-block: var(--space-none);
   padding-inline: var(--layout-grid-margin);
   position: relative;
+  --top-navigation-surface-transition: background-color var(--motion-duration-medium) var(--motion-ease-emphasized), border-color var(--motion-duration-medium) var(--motion-ease-emphasized);
+  transition: var(--top-navigation-surface-transition);
 }
-._topNavigationLeftSection_jj18y_24 {
+._topNavigationLeftSection_afw3t_34 {
   align-items: center;
   block-size: 100%;
   display: flex;
   flex: 0 0 auto;
   inline-size: calc(var(--dimensions-80) * 3);
 }
-._topNavigationLeftSectionHuge_jj18y_35 {
+._topNavigationLeftSectionHuge_afw3t_45 {
   inline-size: auto;
 }
-._topNavigationCenterSection_jj18y_40 {
+._topNavigationCenterSection_afw3t_50 {
   align-items: center;
   block-size: 100%;
   display: flex;
@@ -17629,10 +17648,10 @@
   justify-content: center;
   min-inline-size: 0;
 }
-._topNavigationCenterSection_jj18y_40 > * {
+._topNavigationCenterSection_afw3t_50 > * {
   max-inline-size: 100%;
 }
-._topNavigationRightSection_jj18y_64 {
+._topNavigationRightSection_afw3t_74 {
   align-items: center;
   block-size: 100%;
   display: flex;
@@ -17640,19 +17659,25 @@
   gap: var(--space-sm);
   justify-content: flex-end;
 }
-._topNavigationNoLeftSection_jj18y_74 ._topNavigationCenterSection_jj18y_40 {
+._topNavigationNoLeftSection_afw3t_84 ._topNavigationCenterSection_afw3t_50 {
   justify-content: flex-start;
 }
-._topNavigationNoDivider_jj18y_79 {
+._topNavigationNoDivider_afw3t_89 {
   border-block-end: none;
 }
-._topNavigationTransparent_jj18y_84 {
+._topNavigationTransparent_afw3t_94 {
+  --top-navigation-surface-transition: background-color var(--motion-duration-normal) var(--motion-ease-out), border-color var(--motion-duration-normal) var(--motion-ease-out);
   background-color: transparent;
 }
-._topNavigationWithDrawer_jj18y_89 {
+@media (prefers-reduced-motion: reduce) {
+  ._topNavigationRoot_afw3t_1 {
+    --top-navigation-surface-transition: none;
+  }
+}
+._topNavigationWithDrawer_afw3t_109 {
   padding-inline-start: var(--space-sm);
 }
-._topNavigationWithDrawerAndLogo_jj18y_96 ._topNavigationCenterSection_jj18y_40 {
+._topNavigationWithDrawerAndLogo_afw3t_116 ._topNavigationCenterSection_afw3t_50 {
   justify-content: flex-start;
   padding-inline-start: var(--layout-grid-margin);
 }