@propbinder/mobile-design 0.2.31 → 0.2.34

package/index.d.ts

@@ -1158,7 +1158,7 @@ declare class DsMobileContentComponent {
  */
 declare class SectionHeaderComponent {
     /** Width of the header placeholder */
-    width: _angular_core.InputSignal<"half" | "third" | "full">;
+    width: _angular_core.InputSignal<"full" | "half" | "third">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionHeaderComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionHeaderComponent, "section-header", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/package.json

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

package/styles/ionic.css

@@ -22,54 +22,46 @@
 :root {
   /* Mobile-specific brand color for headers/backgrounds */
   --color-brand-secondary: #221a4c;
-  
+
   /* Ionic Keyboard Appearance - force light theme */
   --ion-keyboard-color: #ffffff;
   --ion-keyboard-background: #ffffff;
   --ion-keyboard-text-color: #000000;
   color-scheme: light;
-  
+
   /* Layout - Mobile Navigation */
   --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-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
      
@@ -83,12 +75,12 @@
      1. app.ts: StatusBar.setOverlaysWebView({ overlay: true/false })
      2. These CSS variables below
      ============================================ */
-  
+
   /* Sheet/modal top offset - positions content below status bar area */
   /* Uses max() to ensure at least 32px offset even on devices without notch */
   /* +12px adds breathing room below the status bar */
   --app-sheet-top-offset: calc(max(32px, env(safe-area-inset-top, 32px)) + 12px);
-  
+
   /* Header top offset - used to fine-tune header position on iOS with overlay: true */
   /* On web (no safe area), this should be 0px. On iOS, it compensates for status bar overlap */
   --app-header-top-offset: max(0px, calc(env(safe-area-inset-top, 0px) - 16px));
@@ -109,13 +101,13 @@ body {
   background-color: var(--color-header-surface);
   color: var(--text-color-default-primary);
   font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
-  
+
   /* Ensure full height for iOS PWA */
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
-  
+
   /* Don't add padding to html/body - let Ionic components handle safe areas */
 }
 
@@ -127,6 +119,11 @@ body {
 
 .plt-ios ion-app {
   background-color: var(--color-header-surface) !important;
+  height: 100dvh;
+}
+
+ion-app {
+  height: 100dvh;
 }
 
 /* When modal opens, ensure purple background is maintained */
@@ -144,7 +141,7 @@ body.backdrop-no-scroll {
   --ion-color-primary-contrast: var(--color-on-accent);
   --ion-color-primary-shade: var(--color-accent-hover);
   --ion-color-primary-tint: var(--color-accent);
-  
+
   /* Ionic component defaults */
   --ion-background-color: var(--color-header-surface);
   --ion-text-color: var(--text-color-default-primary);
@@ -183,8 +180,10 @@ ion-content::part(scroll) {
   overscroll-behavior-y: none;
   -webkit-overflow-scrolling: touch;
   /* Hide scrollbar while maintaining scroll functionality */
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE/Edge */
 }
 
 /* Hide scrollbar for WebKit browsers (Chrome, Safari, iOS) */
@@ -280,16 +279,17 @@ ion-modal:not(.ds-bottom-sheet) {
   --background: var(--color-background-neutral-primary);
   --border-radius: 16px;
   --box-shadow: var(--box-shadow-lg);
-  /* Prevent modal from resizing when keyboard appears */
-  height: 100% !important;
-  max-height: 100vh !important;
+  --height: auto;
+  max-height: 100dvh;
+  height: 100dvh !important;
 }
 
 /* Prevent modal container from resizing when keyboard appears */
 ion-modal:not(.ds-bottom-sheet)::part(content) {
   position: fixed !important;
-  height: 100% !important;
-  max-height: 100vh !important;
+  max-height: 100dvh !important;
+  /* Ensure content doesn't get cut off by keyboard or safe area */
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
 /* Prevent ion-content inside modals from resizing */
@@ -329,7 +329,7 @@ ion-toast {
   --box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.12);
   --backdrop-opacity: 0.4;
   transition: --backdrop-opacity 0.3s ease;
-  
+
   /* Position the modal container to fill screen */
   top: 0 !important;
   height: 100% !important;
@@ -416,7 +416,8 @@ ion-toast {
 
 /* Ensure action list scrolls if needed */
 .ds-bottom-sheet .actions-list {
-  max-height: calc(85dvh - 80px); /* Account for handle, padding, and safe area */
+  max-height: calc(85dvh - 80px);
+  /* Account for handle, padding, and safe area */
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -544,6 +545,7 @@ ion-toast {
   from {
     transform: translateY(100%);
   }
+
   to {
     transform: translateY(0);
   }
@@ -553,6 +555,7 @@ ion-toast {
   from {
     transform: translateY(0);
   }
+
   to {
     transform: translateY(100%);
   }
@@ -562,6 +565,7 @@ ion-toast {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -571,6 +575,7 @@ ion-toast {
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
@@ -588,6 +593,7 @@ ion-toast {
 
 /* Accessibility: Reduced motion */
 @media (prefers-reduced-motion: reduce) {
+
   .ds-mobile-modal.modal-card-enter-active,
   .ds-mobile-modal.modal-card-leave-active,
   .ds-mobile-modal.modal-sheet-enter-active,
@@ -616,11 +622,11 @@ ion-modal.ds-modal-base {
   --width: 100%;
   --max-width: 640px;
   /* Subtract top offset from total height to avoid bottom clipping */
-    --height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
-    --max-height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
+  --height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
+  --max-height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
   --border-radius: 16px 16px 0 0;
   display: flex !important;
-    align-items: flex-end !important;
+  align-items: flex-end !important;
 }
 
 ion-modal.ds-modal-base::part(content) {
@@ -630,10 +636,10 @@ ion-modal.ds-modal-base::part(content) {
   max-width: 640px;
   margin: 0 auto;
   /* Reset Ionic's default top offset and stick to bottom */
-    top: auto !important;
-    bottom: 0 !important;
-    height: 100% !important;
-    position: relative !important;
+  top: auto !important;
+  bottom: 0 !important;
+  height: 100% !important;
+  position: relative !important;
 }
 
 /* Auto-height support for base modals */
@@ -649,13 +655,14 @@ ion-modal.ds-modal-base::part(content) {
   position: relative !important;
   top: auto !important;
   max-height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
-    bottom: 0 !important;
+  bottom: 0 !important;
 }
 
 .ds-modal-base.auto-height ion-content {
   height: auto !important;
   --height: auto;
 }
+
 .ds-modal-base::part(backdrop) {
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(4px);
@@ -673,7 +680,8 @@ ion-modal.ds-modal-base::part(content) {
   --background: var(--color-background-neutral-primary, #ffffff);
   --width: 100%;
   --max-width: 640px;
-  --height: 100dvh; /* Full viewport height - content top offset creates gap */
+  --height: 100dvh;
+  /* Full viewport height - content top offset creates gap */
   --border-radius: 16px 16px 0 0;
 }
 
@@ -766,7 +774,8 @@ ion-app ion-router-outlet.ion-page-hidden {
   --background: var(--color-background-neutral-primary, #ffffff);
   --width: 100%;
   --max-width: 640px;
-  --height: 100dvh; /* Full viewport height - content top offset creates gap */
+  --height: 100dvh;
+  /* Full viewport height - content top offset creates gap */
   --border-radius: 16px 16px 0 0;
 }
 
@@ -801,7 +810,8 @@ ion-app ion-router-outlet.ion-page-hidden {
   --background: var(--color-background-neutral-primary, #ffffff);
   --width: 100%;
   --max-width: 640px;
-  --height: 100dvh; /* Use dynamic viewport height instead of 100% */
+  --height: 100dvh;
+  /* Use dynamic viewport height instead of 100% */
   --border-radius: 16px 16px 0 0;
   margin-top: var(--app-sheet-top-offset);
 }
@@ -830,15 +840,15 @@ ion-app ion-router-outlet.ion-page-hidden {
   .ds-handbook-detail-modal {
     --background: var(--color-background-neutral-primary-dark, #1a1a1a);
   }
-  
+
   .ds-handbook-detail-modal::part(content) {
     background: var(--color-background-neutral-primary-dark, #1a1a1a);
   }
-  
+
   .ds-handbook-detail-modal::part(backdrop) {
     background: rgba(0, 0, 0, 0.6);
   }
-  
+
   .ds-handbook-detail-modal ion-content {
     --background: var(--color-background-neutral-primary-dark, #1a1a1a);
   }
@@ -852,7 +862,8 @@ ion-app ion-router-outlet.ion-page-hidden {
   --background: var(--color-background-neutral-primary, #ffffff);
   --width: 100%;
   --max-width: 640px;
-  --height: 100dvh; /* Full viewport height - content top offset creates gap */
+  --height: 100dvh;
+  /* Full viewport height - content top offset creates gap */
   --border-radius: 16px 16px 0 0;
 }
 
@@ -897,5 +908,4 @@ ds-button .btn:active:not(:disabled) {
 /* FORCE hover background color directly - only for primary variant */
 ds-button[variant="primary"]:hover .btn {
   background-color: var(--color-accent-hover) !important;
-}
-
+}