@flux-ui/application 3.1.6 → 3.1.7

package/dist/index.css

@@ -1,4 +1,4 @@
-:root {
+@charset "UTF-8";:root {
   --application-duration: 360ms;
   --application-menu-surface: var(--gray-100);
   --application-menu-surface-stroke: var(--gray-200);
@@ -121,6 +121,7 @@ html[data-application-resizing] .application-menu-backdrop {
   flex-grow: 1;
 }
 .application-content-full > .calendar {
+  border-top: 0;
   border-left: 0;
   border-right: 0;
   border-radius: 0;
@@ -181,7 +182,8 @@ html[data-application-resizing] .application-menu-backdrop {
   margin: 0;
   color: var(--foreground-secondary);
   font-size: 18px;
-}.application-menu {
+}
+.application-menu {
   position: fixed;
   display: flex;
   top: 0;
@@ -292,6 +294,25 @@ html[data-application-resizing] .application-menu-backdrop {
 
 .application-menu .menu-sub-header {
   --surface: var(--application-menu-surface);
+  height: auto;
+  overflow: hidden;
+  interpolate-size: allow-keywords;
+  transition: var(--application-duration) var(--swift-out);
+  transition-property: height, margin, opacity, padding, display;
+  transition-behavior: allow-discrete;
+}
+@starting-style {
+  .application-menu .menu-sub-header {
+    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;
+    padding-bottom: 0;
+    opacity: 0;
+  }
 }
 
 .application-menu .menu-item {
@@ -413,6 +434,7 @@ html[data-application-resizing] .application-menu-backdrop {
   background: var(--gray-25);
   border: 1px solid var(--application-menu-surface-stroke);
   border-radius: var(--radius);
+  transition: opacity var(--application-duration) var(--swift-out);
 }
 
 .application-menu-promo > .icon {
@@ -428,7 +450,7 @@ html[data-application-resizing] .application-menu-backdrop {
   font-size: 14px;
 }
 
-.application-menu-promo-content a {
+.application-menu-promo-content a:not([class]) {
   color: var(--gray-700);
 }
 
@@ -453,6 +475,9 @@ html[data-application-resizing] .application-menu-backdrop {
 }
 
 @media (min-width: 1024px) {
+  .application-menu-promo {
+    width: calc(var(--application-menu-width) - 25px);
+  }
   .application-menu[data-collapsed][data-collapsible] {
     width: var(--application-menu-width-collapsed);
   }
@@ -461,6 +486,19 @@ html[data-application-resizing] .application-menu-backdrop {
     opacity: 0;
     translate: -12px 0;
   }
+  .application-menu[data-collapsed][data-collapsible] .menu-sub-header {
+    display: none;
+    height: 0;
+    /* Keep the sub-header's negative margins (sum -12px = one panel gap) while
+       it is a zero-height flex item, so the space it leaves equals the single
+       gap that remains after `display: none` removes it — avoiding a jump of
+       the group below at the end of the collapse. */
+    margin-top: -9px;
+    margin-bottom: -3px;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+  }
   .application-menu[data-collapsed][data-collapsible] .application-menu-promo,
   .application-menu[data-collapsed][data-collapsible] .application-menu-context {
     opacity: 0;
@@ -487,6 +525,8 @@ html[data-application-resizing] .application-menu-footer,
 html[data-application-resizing] .application-menu-footer::before,
 html[data-application-resizing] .application-menu-header,
 html[data-application-resizing] .application-menu-track,
+html[data-application-resizing] .application-menu-promo,
+html[data-application-resizing] .application-menu .menu-sub-header,
 html[data-application-resizing] .application-menu .menu-item-label,
 html[data-application-resizing] .application-menu-context-pill-content strong,
 html[data-application-resizing] .application-menu-context-pill-content span {
@@ -637,6 +677,6 @@ html[data-application-resizing] .application-menu-context-pill-content span {
     margin-right: -15px;
   }
 }
-.application-top:has(+ .application-content-full > .table) {
+.application-top:has(+ .application-content-full > :is(.calendar, .table)) {
   border-bottom-color: var(--surface-stroke-out);
 }/*$vite$:1*/

package/dist/index.js

@@ -3660,7 +3660,7 @@ var HttpAdapter = _HttpAdapter = class HttpAdapter {
 HttpAdapter = _HttpAdapter = __decorate([adapter_default], HttpAdapter);
 RegExp(`[a-z]`), RegExp(`[A-Z]`), RegExp(`[0-9]`), RegExp(`[!"#$%&'()*+,-./:;<=>?@[\\\\\\]^_\`{|}~]`);
 //#endregion
-//#region ../internals/dist/composable-DPolUL3R.js
+//#region ../internals/dist/composable-ByAxh3HA.js
 function O(t, n, r, i = { passive: !0 }) {
 	watch(t, (a, o, s) => {
 		let c = v(t) ?? (a instanceof EventTarget ? a : null);
@@ -3707,7 +3707,7 @@ function M(e) {
 	};
 }
 //#endregion
-//#region ../internals/dist/directive-CYxYO4lS.js
+//#region ../internals/dist/directive-wk7DX8wQ.js
 var i = class {
 	#e;
 	#t;
@@ -4406,6 +4406,7 @@ var ApplicationTop_module_default = {
 	icon: `icon`,
 	applicationMenuToggle: `application-menu-toggle`,
 	applicationContentFull: `application-content-full`,
+	calendar: `calendar`,
 	table: `table`
 };
 //#endregion