@propbinder/mobile-design 0.1.22 → 0.2.0

package/package.json

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

package/styles/ionic.css

@@ -631,6 +631,58 @@ ion-app ion-router-outlet.ion-page-hidden {
   }
 }
 
+/* ============================================
+   Chat Modal Styles
+   ============================================ */
+
+.ds-chat-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh; /* Full viewport height - content top offset creates gap */
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-chat-modal::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+  /* Use top positioning instead of margin-top to work with fixed positioning */
+  top: var(--app-sheet-top-offset) !important;
+  height: calc(100% - var(--app-sheet-top-offset)) !important;
+  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
+}
+
+.ds-chat-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-chat-modal ion-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ds-chat-modal {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-chat-modal::part(content) {
+    background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-chat-modal::part(backdrop) {
+    background: rgba(0, 0, 0, 0.6);
+  }
+  
+  .ds-chat-modal ion-content {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+}
+
 /* ============================================
    Handbook Detail Modal Styles
    ============================================ */
@@ -690,9 +742,8 @@ ion-app ion-router-outlet.ion-page-hidden {
   --background: var(--color-background-neutral-primary, #ffffff);
   --width: 100%;
   --max-width: 640px;
-  --height: 100dvh;
+  --height: 100dvh; /* Full viewport height - content top offset creates gap */
   --border-radius: 16px 16px 0 0;
-  margin-top: var(--app-sheet-top-offset);
 }
 
 .ds-whitelabel-demo-modal::part(content) {
@@ -701,6 +752,10 @@ ion-app ion-router-outlet.ion-page-hidden {
   background: var(--color-background-neutral-primary, #ffffff);
   max-width: 640px;
   margin: 0 auto;
+  /* Use top positioning instead of margin-top to work with fixed positioning */
+  top: var(--app-sheet-top-offset) !important;
+  height: calc(100% - var(--app-sheet-top-offset)) !important;
+  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
 }
 
 .ds-whitelabel-demo-modal::part(backdrop) {
@@ -712,3 +767,22 @@ ion-app ion-router-outlet.ion-page-hidden {
   --background: #ffffff;
 }
 
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ds-whitelabel-demo-modal {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-whitelabel-demo-modal::part(content) {
+    background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-whitelabel-demo-modal::part(backdrop) {
+    background: rgba(0, 0, 0, 0.6);
+  }
+  
+  .ds-whitelabel-demo-modal ion-content {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+}
+

package/styles/mobile-page-base.css

@@ -5,44 +5,30 @@
    ============================================ */
 
 /* ============================================
-   ION-CONTENT
+   HOST
    ============================================ */
 
-ion-content {
-  --background: transparent;
-  --padding-top: 0;
-  --padding-start: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  border-radius: 24px 24px 0 0;
-  overflow: hidden;
-}
-
-ion-content::part(scroll) {
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior-y: none;
-}
-
-/* Desktop/Tablet adjustments */
-@media (min-width: 768px) {
-  ion-content {
-    border-radius: 16px 16px 0 0;
-  }
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
 }
 
 /* ============================================
-   ION-HEADER
+   SHARED ION-HEADER STYLES
    ============================================ */
 
-ion-header {
-  background: transparent;
+:host ion-header {
+  background: var(--color-brand-secondary);
   box-shadow: none;
   height: 72px;
   min-height: 72px;
+  margin-top: var(--app-header-top-offset);
 }
 
-ion-header ion-toolbar {
-  --background: transparent;
+:host ion-header ion-toolbar {
+  --background: var(--color-brand-secondary);
   --border-width: 0;
   --box-shadow: none;
   --padding-top: 0;
@@ -55,158 +41,239 @@ ion-header ion-toolbar {
   padding: 0;
 }
 
-/* Hide header on desktop when using ds-mobile-tabs top bar */
 @media (min-width: 768px) {
-  ion-header {
-    display: none;
-    height: auto;
+  :host ion-header {
+    height: 88px;
+    min-height: 88px;
   }
-}
-
-/* ============================================
-   REFRESHER
-   ============================================ */
 
-ion-refresher {
-  z-index: 0;
+  :host ion-header ion-toolbar {
+    --min-height: 88px;
+    height: 88px;
+    min-height: 88px;
+  }
 }
 
-ion-refresher-content {
-  --color: white;
+/* Hide header on desktop when using ds-mobile-tabs top bar */
+/* Note: This only applies to components using ds-mobile-page-main/ds-mobile-page-details */
+/* Pages that need the header visible on desktop should override this */
+@media (min-width: 768px) {
+  :host ion-header {
+    display: none;
+    height: auto;
+  }
 }
 
 /* ============================================
-   HEADER VARIANTS
+   SHARED HEADER CONTAINER PATTERNS
    ============================================ */
 
-.header-home {
+/* Common flex container pattern for header content */
+:host .header-main,
+:host .header-details,
+.header-details {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
   background: var(--color-brand-secondary);
-  height: 72px;
+  position: relative;
 }
 
-.header-home__title {
+/* Common centered title pattern */
+:host .header-main__title,
+:host .header-details .header-title,
+.header-details .header-title {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%) translateY(-100%);
+  transform: translateX(-50%);
   font-size: var(--font-size-base);
   font-weight: 600;
   color: white;
-  opacity: 0;
-  transition: transform 0.6s ease, opacity 0.6s ease;
   margin: 0;
   padding: 0;
   --color: white;
 }
 
-.header-home__actions {
+/* Scroll behavior for header-details title (hidden initially, shows on scroll) */
+.header-details .header-title {
+  transform: translateX(-50%) translateY(-100%);
+  opacity: 0 !important;
+  pointer-events: none;
+  transition: transform 0.2s ease, opacity 0.2s ease !important;
+}
+
+/* Show title when scrolled */
+.header-scrolled .header-details .header-title {
+  opacity: 1 !important;
+  pointer-events: auto;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Back button styles for detail pages */
+:host .header-details .back-button,
+.header-details .back-button {
+  background: none;
+  border: none;
+  padding: 0;
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  cursor: pointer;
+  color: white;
+  transition: opacity var(--transition-duration-fast, 0.2s) var(--ease-smooth, ease);
+  z-index: 10;
+  position: relative;
 }
 
-.logomark {
-  height: 28px;
-  width: auto;
-  flex-shrink: 0;
+:host .header-details .back-button:hover,
+.header-details .back-button:hover {
+  opacity: 0.8;
 }
 
-/* Condensed header - hidden by default on mobile */
-ion-header[collapse="condense"] {
-  display: none;
+:host .header-details .back-button:active,
+.header-details .back-button:active {
+  opacity: 0.6;
 }
 
-/* Show title in top header when scrolled past condensed header */
-.header-scrolled .header-home__title {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
+/* ============================================
+   SHARED ION-CONTENT STYLES
+   ============================================ */
+
+:host ion-content {
+  --background: var(--color-brand-secondary);
+  --padding-top: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  border-radius: 24px 24px 0 0;
+  overflow: hidden;
+}
+
+/* Make ion-content scroll area a flex container */
+:host ion-content::part(scroll) {
+  display: flex;
+  flex-direction: column;
+  -webkit-overflow-scrolling: touch;
+  /* Note: Do NOT set overscroll-behavior-y here as it prevents ion-refresher from working */
+  /* overscroll-behavior on ion-app is sufficient to block native browser pull-to-refresh */
+}
+
+/* iOS-specific: White background for bottom overshoot */
+.plt-ios :host ion-content {
+  --background: var(--color-background-neutral-primary);
 }
 
+/* Desktop only: remove bottom radius */
 @media (min-width: 768px) {
-  .header-home {
-    padding: 16px 24px;
-  }
-  
-  .logomark {
-    height: 32px;
+  :host ion-content {
+    border-radius: 24px 24px 0 0;
   }
+}
 
-  /* Hide title on desktop - not needed */
-  .header-home__title {
-    display: none;
-  }
+/* ============================================
+   CONDENSED HEADER
+   ============================================ */
 
-  /* Hide condensed header on desktop */
-  ion-header[collapse="condense"] {
+:host ion-header[collapse="condense"] {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  :host ion-header[collapse="condense"] {
     display: none;
   }
 }
 
 /* ============================================
-   EXPANDABLE HEADER
+   REFRESHER
    ============================================ */
 
-.header-expandable {
-  background: var(--color-brand-secondary);
-  padding: 24px 16px;
-  color: var(--header-content-color, white);
-  position: sticky;
-  top: 0;
-  z-index: 10;
+:host ion-refresher {
+  z-index: 0;
 }
 
-.header-expandable-inner {
+:host ion-refresher-content {
+  --color: white;
+}
+
+/* ============================================
+   SHARED CONTENT WRAPPER STYLES
+   ============================================ */
+
+:host .content-wrapper {
+  width: 100%;
+  position: relative;
+  z-index: 20;
+  /* Flex child that grows to fill available space */
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  background: var(--color-background-neutral-primary);
+  border-radius: 24px 24px 0 0;
+  
+  /* Fixed 20px horizontal padding globally */
+  padding: 20px;
+  /* Add bottom padding on mobile to account for fixed tab bar */
+  padding-bottom: calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px));
+}
+
+:host .content-inner {
+  /* Visual styling - background, border-radius, and shadow extend */
+  transform: translateZ(0);
+  will-change: transform;
+  isolation: isolate;
+  /* Extend white background below for iOS overshoot using box-shadow */
+  box-shadow: 0 200vh 0 0 var(--color-background-neutral-primary);
+  
+  /* Grow to fill parent flex container */
+  flex: 1;
+  
+  /* Mobile-first: max-width 640px, centered */
   max-width: 640px;
   margin: 0 auto;
+  width: 100%;
 }
 
 @media (min-width: 768px) {
-  .header-expandable {
-    padding: 32px var(--content-padding-md);
+  :host .content-wrapper {
+    padding: 32px 20px;
   }
 }
 
-@media (min-width: 992px) {
-  .header-expandable {
-    padding-left: var(--content-padding-lg);
-    padding-right: var(--content-padding-lg);
-  }
-}
+/* ============================================
+   EXPANDABLE HEADER (for main pages only)
+   ============================================ */
 
-@media (min-width: 1440px) {
-  .header-expandable {
-    padding-left: var(--content-padding-xl);
-    padding-right: var(--content-padding-xl);
-  }
+:host .header-expandable {
+  background: var(--color-brand-secondary);
+  padding: 32px 20px 24px 20px;
+  color: var(--header-content-color, white);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
 }
 
-@media (min-width: 1768px) {
-  .header-expandable {
-    padding-left: var(--content-padding-2xl);
-    padding-right: var(--content-padding-2xl);
-  }
+:host .header-expandable-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 640px;
+  margin: 0 auto;
 }
 
-@media (min-width: 1920px) {
-  .header-expandable {
-    padding-left: var(--content-padding-3xl);
-    padding-right: var(--content-padding-3xl);
-  }
+:host .header-expandable__text {
+  margin-bottom: 0;
 }
 
-.header-expandable__text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+:host .header-expandable__title {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  color: var(--header-content-color, white);
+  margin: 0;
 }
 
-.header-expandable__subtitle {
+:host .header-expandable__subtitle {
   font-size: var(--font-size-sm);
   font-weight: 400;
   color: var(--header-content-color, white);
@@ -215,68 +282,43 @@ ion-header[collapse="condense"] {
 }
 
 @media (min-width: 768px) {
-  .header-expandable__subtitle {
-    font-size: var(--font-size-base);
+  :host .header-expandable {
+    padding: 48px 20px 32px 20px;
   }
-}
-
-/* ============================================
-   CONTENT WRAPPER
-   ============================================ */
-
-.content-wrapper {
-  position: relative;
-  z-index: 10;
-  background: var(--color-background-neutral-primary);
-  border-radius: 24px 24px 0 0;
-  padding: 0;
-}
 
-@media (min-width: 768px) {
-  .content-wrapper {
-    border-radius: 16px 16px 0 0;
-    width: 100%;
+  :host .header-expandable__title {
+    font-size: var(--font-size-3xl);
   }
-}
-
-.content-inner {
-  padding: 20px 16px;
-}
 
-@media (min-width: 768px) {
-  .content-inner {
-    padding: 32px var(--content-padding-md);
-    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
-    margin: 0 auto;
-    width: 100%;
+  :host .header-expandable__subtitle {
+    font-size: var(--font-size-base);
   }
 }
 
 @media (min-width: 992px) {
-  .content-inner {
-    padding: 32px var(--content-padding-lg);
-    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
+  :host .header-expandable {
+    padding-left: var(--content-padding-lg);
+    padding-right: var(--content-padding-lg);
   }
 }
 
 @media (min-width: 1440px) {
-  .content-inner {
-    padding: 32px var(--content-padding-lg);
-    max-width: calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));
+  :host .header-expandable {
+    padding-left: var(--content-padding-xl);
+    padding-right: var(--content-padding-xl);
   }
 }
 
 @media (min-width: 1768px) {
-  .content-inner {
-    /* Keep xl max-width, only increase padding */
-    padding: 32px var(--content-padding-2xl);
+  :host .header-expandable {
+    padding-left: var(--content-padding-2xl);
+    padding-right: var(--content-padding-2xl);
   }
 }
 
 @media (min-width: 1920px) {
-  .content-inner {
-    /* Keep xl max-width, only increase padding */
-    padding: 32px var(--content-padding-3xl);
+  :host .header-expandable {
+    padding-left: var(--content-padding-3xl);
+    padding-right: var(--content-padding-3xl);
   }
 }
-