@propbinder/mobile-design 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.2.06",
+  "version": "0.2.07",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"

package/styles/ionic.css

@@ -33,6 +33,43 @@
   --mobile-tab-bar-height: 64px;
   --mobile-content-spacing: 20px;
   
+  /* Tab Bar Height - Used for FAB positioning and other layout calculations */
+  /* This is set by ds-mobile-tab-bar and consumed by ds-mobile-fab */
+  --ds-tab-bar-height: 64px;
+  
+  /* ============================================
+     SPRING ANIMATIONS
+     Physics-based easing curves with natural bounce
+     ============================================ */
+  
+  /* Spring Curves */
+  --spring-curve-bouncy: linear(
+    0, 0.0209, 0.0772, 0.1598, 0.2602, 0.3709, 0.4854, 0.5984, 0.7056, 0.8038, 0.8908, 0.9653, 1.0267, 1.075, 1.111, 1.1354, 1.1497, 1.1551, 1.1532, 1.1455, 1.1335, 1.1184, 1.1014, 1.0837, 1.066, 1.0492, 1.0336, 1.0197, 1.0077, 0.9977, 0.9898, 0.9838, 0.9796, 0.9771, 0.976, 0.9761, 0.9771, 0.9788, 0.9811, 0.9837, 0.9864, 0.9892, 0.9918, 0.9943, 0.9965, 0.9984, 1.0001, 1.0013, 1.0023, 1.003, 1.0035, 1
+  );
+  
+  --spring-curve-gentle: linear(
+    0, 0.2, 0.5, 0.8, 1.02, 1.01, 1
+  );
+  
+  --spring-curve-snappy: linear(
+    0, 0.3, 0.7, 1.05, 0.98, 1
+  );
+  
+  --spring-curve-smooth: linear(
+    0, 0.215, 0.61, 0.855, 1
+  );
+  
+  /* Spring Durations */
+  --spring-duration-fast: 400ms;
+  --spring-duration-medium: 700ms;
+  --spring-duration-slow: 1000ms;
+  
+  /* Spring Presets (curve + duration) */
+  --spring-bouncy: var(--spring-duration-medium) var(--spring-curve-bouncy);
+  --spring-gentle: var(--spring-duration-fast) var(--spring-curve-gentle);
+  --spring-snappy: var(--spring-duration-fast) var(--spring-curve-snappy);
+  --spring-smooth: var(--spring-duration-medium) var(--spring-curve-smooth);
+  
   /* ============================================
      SAFE AREA / STATUS BAR CONFIGURATION
      
@@ -467,20 +504,20 @@ ion-toast {
 /* Animations */
 .ds-mobile-modal.modal-card-enter-active,
 .ds-mobile-modal.modal-sheet-enter-active {
-  animation: slideUpModal 0.3s ease-out;
+  animation: slideUpModal 0.5s ease-out;
 }
 
 .ds-mobile-modal.modal-card-leave-active,
 .ds-mobile-modal.modal-sheet-leave-active {
-  animation: slideDownModal 0.3s ease-in;
+  animation: slideDownModal 0.8s ease-in;
 }
 
 .ds-mobile-modal.modal-fullscreen-enter-active {
-  animation: fadeInModal 0.2s ease-out;
+  animation: fadeInModal 0.4s ease-out;
 }
 
 .ds-mobile-modal.modal-fullscreen-leave-active {
-  animation: fadeOutModal 0.2s ease-in;
+  animation: fadeOutModal 0.4s ease-in;
 }
 
 @keyframes slideUpModal {

package/styles/mobile-page-base.css

@@ -218,7 +218,7 @@
   transform: translateZ(0);
   will-change: transform;
   isolation: isolate;
-  box-shadow: 0 200vh 0 0 var(--color-background-neutral-primary);
+  box-shadow: 0 300px 0 0 var(--color-background-neutral-primary);
   
   /* Fixed 20px horizontal padding globally */
   padding: 20px;
@@ -266,6 +266,9 @@
 
 :host .header-expandable__text {
   margin-bottom: 0;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
 }
 
 :host .header-expandable__title {