@flux-ui/application 3.1.9 → 3.2.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/application",
     "description": "Contains components to create applications with Flux UI.",
-    "version": "3.1.9",
+    "version": "3.2.0-beta.0",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,9 +51,9 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@flux-ui/components": "3.1.9",
-        "@flux-ui/internals": "3.1.9",
-        "@flux-ui/types": "3.1.9",
+        "@flux-ui/components": "3.2.0-beta.0",
+        "@flux-ui/internals": "3.2.0-beta.0",
+        "@flux-ui/types": "3.2.0-beta.0",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
@@ -62,13 +62,13 @@
         "vue-router": "^5.1.0"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.43.0",
-        "@types/node": "^25.9.3",
+        "@basmilius/vite-preset": "^3.45.0",
+        "@types/node": "^26.0.0",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "^6.0.3",
-        "vite": "^8.0.16",
+        "vite": "^8.1.0",
         "vue-tsc": "^3.3.5"
     }
 }

package/src/component/FluxApplication.vue

@@ -40,6 +40,7 @@
         side(): VNode[];
     }>();
 
+    let readyFrame: number | undefined;
     let resizeTimer: ReturnType<typeof setTimeout> | undefined;
 
     const isMenuCollapsed = useRemembered('application-menu-collapsed', true);
@@ -61,6 +62,16 @@
         }
 
         window.addEventListener('resize', onResize, {passive: true});
+
+        // Flag the app as ready one frame past the first paint so the menu
+        // sub-header's `@starting-style` transition does not play on page
+        // load — it should only animate on later collapse / expand.
+        readyFrame = requestAnimationFrame(() => {
+            readyFrame = requestAnimationFrame(() => {
+                readyFrame = undefined;
+                document.documentElement.dataset.applicationReady = '';
+            });
+        });
     });
 
     onUnmounted(() => {
@@ -68,6 +79,11 @@
             window.removeEventListener('resize', onResize);
         }
 
+        if (readyFrame !== undefined) {
+            cancelAnimationFrame(readyFrame);
+            readyFrame = undefined;
+        }
+
         if (resizeTimer !== undefined) {
             clearTimeout(resizeTimer);
             resizeTimer = undefined;
@@ -75,6 +91,7 @@
 
         if (typeof document !== 'undefined') {
             delete document.documentElement.dataset.applicationMenuOpen;
+            delete document.documentElement.dataset.applicationReady;
             delete document.documentElement.dataset.applicationResizing;
         }
     });

package/src/component/FluxApplicationContent.vue

@@ -6,8 +6,7 @@
             layout === 'full' && $style.applicationContentFull,
             layout === 'medium' && $style.applicationContentMedium,
             layout === 'narrow' && $style.applicationContentNarrow
-        )"
-        aria-label="Application Content">
+        )">
         <slot/>
     </main>
 </template>

package/src/css/component/ApplicationMenu.module.scss

@@ -122,9 +122,6 @@
 
     @starting-style {
         height: 0;
-        /* Match the collapsed state's negative margins (sum -12px = one panel gap)
-           so the expand-in animation starts exactly where the collapsed sub-header
-           sat — no jump at the start of the expand. */
         margin-top: -9px;
         margin-bottom: -3px;
         padding-top: 0;
@@ -355,6 +352,10 @@
     }
 }
 
+html:not([data-application-ready]) .applicationMenu :local(.menuSubHeader) {
+    transition: none;
+}
+
 html[data-application-resizing] {
     .applicationMenu,
     .applicationMenuFooter,