@propbinder/mobile-design 0.2.17 → 0.2.22

package/package.json

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

package/styles/ionic.css

@@ -106,7 +106,7 @@ html {
 html,
 body {
   /* Background color must match theme-color for iOS PWA status bar */
-  background-color: var(--color-brand-secondary);
+  background-color: var(--color-header-surface);
   color: var(--text-color-default-primary);
   font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
   
@@ -122,16 +122,16 @@ body {
 /* iOS-specific: Purple background for overshoot areas to match dark header */
 .plt-ios html,
 .plt-ios body {
-  background-color: var(--color-brand-secondary) !important;
+  background-color: var(--color-header-surface) !important;
 }
 
 .plt-ios ion-app {
-  background-color: var(--color-brand-secondary) !important;
+  background-color: var(--color-header-surface) !important;
 }
 
 /* When modal opens, ensure purple background is maintained */
 body.backdrop-no-scroll {
-  background-color: var(--color-brand-secondary) !important;
+  background-color: var(--color-header-surface) !important;
 }
 
 /* Ionic Component Styles - Map to Design System */
@@ -139,15 +139,14 @@ body.backdrop-no-scroll {
 
 :root {
   /* Override Ionic's primary color to use our brand color */
-  --ion-color-primary: var(--color-brand-base);
-  --ion-color-primary-rgb: 107, 95, 245;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: var(--color-brand-base-hover);
-  --ion-color-primary-tint: var(--color-brand-base);
+  /* Note: RGB values and hover/active states are set dynamically by WhitelabelService */
+  --ion-color-primary: var(--color-accent);
+  --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-brand-secondary);
+  --ion-background-color: var(--color-header-surface);
   --ion-text-color: var(--text-color-default-primary);
 }
 
@@ -166,17 +165,17 @@ ion-content {
 
 /* iOS: Set base ion-content background to brand secondary for pages */
 .plt-ios ion-content {
-  background: var(--color-brand-secondary) !important;
+  background: var(--color-header-surface) !important;
 }
 
 /* iOS: Also target any inner background parts */
 .plt-ios ion-content::part(background) {
-  background: var(--color-brand-secondary) !important;
+  background: var(--color-header-surface) !important;
 }
 
 /* iOS: Target the inner container if it exists */
 .plt-ios ion-content .inner-scroll {
-  background: var(--color-brand-secondary) !important;
+  background: var(--color-header-surface) !important;
 }
 
 /* Default: Block browser overscroll on all platforms */
@@ -202,18 +201,18 @@ ion-content::part(scroll)::-webkit-scrollbar {
   overscroll-behavior-y: contain;
   /* iOS: Set scroll container background to match brand secondary */
   /* This prevents white background from showing when header fades on scroll */
-  background: var(--color-brand-secondary) !important;
+  background: var(--color-header-surface) !important;
 }
 
 .plt-ios .ion-page {
   overscroll-behavior-y: contain;
   /* Set page background to brand secondary to match header on iOS */
-  background: var(--color-brand-secondary) !important;
+  background: var(--color-header-surface) !important;
 }
 
 /* iOS-specific: Override ion-content background for pages (not modals) */
 .plt-ios .ion-page > ion-content {
-  --background: var(--color-brand-secondary);
+  --background: var(--color-header-surface);
 }
 
 /* iOS: Ensure modal content stays with neutral background */
@@ -233,13 +232,33 @@ ion-content::part(scroll)::-webkit-scrollbar {
   background: var(--color-background-neutral-primary) !important;
 }
 
+/* Exception: Lightbox modals should have black background */
+.plt-ios ion-modal .lightbox-content.pdf-viewer,
+.plt-ios ion-modal .lightbox-content.pdf-viewer::part(scroll),
+.plt-ios ion-modal .lightbox-content.pdf-viewer::part(background),
+.plt-ios ion-modal .lightbox-content.pdf-viewer .inner-scroll {
+  background: #000000 !important;
+}
+
+/* Also ensure lightbox is black on all platforms */
+ion-modal .lightbox-content.pdf-viewer {
+  --background: #000000 !important;
+  background: #000000 !important;
+}
+
+ion-modal .lightbox-content.pdf-viewer::part(scroll),
+ion-modal .lightbox-content.pdf-viewer::part(background),
+ion-modal .lightbox-content.pdf-viewer .inner-scroll {
+  background: #000000 !important;
+}
+
 ion-footer {
   box-shadow: none;
 }
 
 ion-router-outlet {
-  --background: var(--color-brand-secondary);
-  background: var(--color-brand-secondary);
+  --background: var(--color-header-surface);
+  background: var(--color-header-surface);
 }
 
 ion-refresher {
@@ -253,11 +272,11 @@ ion-refresher-content {
 
 /* Force spinner color to brand */
 ion-spinner {
-  --color: var(--color-brand-base) !important;
-  color: var(--color-brand-base) !important;
+  --color: var(--color-accent) !important;
+  color: var(--color-accent) !important;
 }
 
-ion-modal {
+ion-modal:not(.ds-bottom-sheet) {
   --background: var(--color-background-neutral-primary);
   --border-radius: 16px;
   --box-shadow: var(--box-shadow-lg);
@@ -267,7 +286,7 @@ ion-modal {
 }
 
 /* Prevent modal container from resizing when keyboard appears */
-ion-modal::part(content) {
+ion-modal:not(.ds-bottom-sheet)::part(content) {
   position: fixed !important;
   height: 100% !important;
   max-height: 100vh !important;
@@ -284,7 +303,7 @@ ion-action-sheet {
   --color: var(--text-color-default-primary);
   --button-background: var(--color-background-neutral-secondary);
   --button-background-hover: var(--color-background-neutral-tertiary);
-  --button-background-selected: var(--color-background-brand);
+  --button-background-selected: var(--color-accent);
   --button-color: var(--text-color-default-primary);
 }
 
@@ -310,9 +329,15 @@ ion-toast {
   --box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.12);
   --backdrop-opacity: 0.4;
   transition: --backdrop-opacity 0.3s ease;
-  /* Modal at top:0 so backdrop covers full screen including status bar */
-  top: 0;
-  height: 100%;
+  
+  /* Position the modal container to fill screen */
+  top: 0 !important;
+  height: 100% !important;
+
+  /* Align the actual sheet at the bottom */
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 /* Backdrop styling */
@@ -330,18 +355,21 @@ ion-toast {
   margin-bottom: 8px;
 }
 
-/* Content area styling */
+/* Content area styling - Support auto-height by default for sheets */
 .ds-bottom-sheet::part(content) {
   /* Offset content below status bar (backdrop still covers full screen) */
   margin-top: var(--app-sheet-top-offset);
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   background: var(--color-background-neutral-primary, #ffffff);
   box-shadow: var(--box-shadow);
-  position: absolute !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  height: 100% !important;
-  max-height: 100% !important;
+
+  /* Auto-height logic: Only as tall as content */
+  height: auto !important;
+  max-height: calc(100dvh - var(--app-sheet-top-offset)) !important;
+
+  /* Sit at the bottom of the flex container */
+  position: relative !important;
+  margin-top: auto !important;
 }
 
 /* Remove border radius when fully expanded */
@@ -378,48 +406,27 @@ ion-toast {
    Make action sheets auto-size to their content
    ============================================ */
 
-/* Auto-height modal - override base bottom sheet styles */
-.ds-bottom-sheet.auto-height {
-  top: 0 !important;
-  height: 100% !important;
-  --height: fit-content;
-  --max-height: 80vh;
-  display: flex;
-  align-items: flex-end;
-}
-
-.ds-bottom-sheet.auto-height .modal-wrapper {
-  position: relative !important;
-  bottom: auto !important;
-  left: auto !important;
-  right: auto !important;
-  height: auto !important;
-  max-height: 80vh !important;
-  top: auto !important;
-  width: 100%;
-}
-
-.ds-bottom-sheet.auto-height::part(content) {
-  position: relative !important;
-  height: auto !important;
-  max-height: 80vh !important;
-  top: auto !important;
-  bottom: auto !important;
-}
+/* Auto-height behavior is now part of .ds-bottom-sheet base */
 
 /* Ensure action sheet component sizes naturally */
-.ds-bottom-sheet.auto-height ds-mobile-actions-bottom-sheet {
+.ds-bottom-sheet ds-mobile-actions-bottom-sheet {
   display: block;
   height: auto;
 }
 
 /* Ensure action list scrolls if needed */
-.ds-bottom-sheet.auto-height .actions-list {
-  max-height: calc(80vh - 80px); /* Account for handle, padding, and safe area */
+.ds-bottom-sheet .actions-list {
+  max-height: calc(85dvh - 80px); /* Account for handle, padding, and safe area */
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
+/* Ensure ion-content doesn't force 100% height in sheets */
+.ds-bottom-sheet ion-content {
+  height: auto !important;
+  --height: auto;
+}
+
 /* ============================================
    Mobile Modal Styles (Generic Modal Service)
    ============================================ */
@@ -834,3 +841,23 @@ ion-app ion-router-outlet.ion-page-hidden {
 
 /* Dark mode support removed - modals should not change based on system dark mode */
 
+/* ============================================
+   GLOBAL BUTTON INTERACTIVE STATES
+   Consistent button behavior across all ds-button instances
+   ============================================ */
+
+/* Base transition */
+ds-button .btn {
+  transition: all 0.2s ease !important;
+}
+
+/* Active/pressed/click state - scale down slightly */
+ds-button .btn:active:not(:disabled) {
+  transform: scale(0.98) !important;
+}
+
+/* FORCE hover background color directly - only for primary variant */
+ds-button[variant="primary"]:hover .btn {
+  background-color: var(--color-accent-hover) !important;
+}
+

package/styles/mobile-common.css

@@ -77,7 +77,7 @@
 
 /* Section Headlines */
 .section-headline {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: 600;
   color: var(--text-color-default-primary);
   padding: 16px 0;

package/styles/mobile-page-base.css

@@ -14,7 +14,7 @@
   align-items: center;
   height: 100%;
   /* Solid background to cover overlay from page underneath during transitions */
-  background: var(--color-secondary-surface);
+  background: var(--color-header-surface);
   width: 100%;
 }
 
@@ -23,7 +23,7 @@
    ============================================ */
 
 :host ion-header {
-  background: var(--color-brand-secondary);
+  background: var(--color-header-surface);
   box-shadow: none;
   height: 72px;
   min-height: 72px;
@@ -31,7 +31,7 @@
 }
 
 :host ion-header ion-toolbar {
-  --background: var(--color-brand-secondary);
+  --background: var(--color-header-surface);
   --border-width: 0;
   --box-shadow: none;
   --padding-top: 0;
@@ -78,7 +78,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: var(--color-brand-secondary);
+  background: var(--color-header-surface);
   position: relative;
 }
 
@@ -91,10 +91,10 @@
   transform: translateX(-50%);
   font-size: var(--font-size-base);
   font-weight: 600;
-  color: white;
+  color: var(--color-header-content);
   margin: 0;
   padding: 0;
-  --color: white;
+  --color: var(--color-header-content);
 }
 
 /* Scroll behavior for header-details title (hidden initially, shows on scroll) */
@@ -122,7 +122,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: white;
+  color: var(--color-header-content);
   transition: opacity var(--transition-duration-fast, 0.2s) var(--ease-smooth, ease);
   z-index: 10;
   position: relative;
@@ -143,7 +143,7 @@
    ============================================ */
 
 :host ion-content {
-  --background: var(--color-brand-secondary);
+  --background: var(--color-header-surface);
   --padding-top: 0;
   --padding-start: 0;
   --padding-end: 0;
@@ -196,7 +196,7 @@
 }
 
 :host ion-refresher-content {
-  --color: white;
+  --color: var(--color-header-content);
 }
 
 /* ============================================
@@ -213,6 +213,7 @@
   flex-direction: column;
   background: var(--color-background-neutral-primary);
   border-radius: 24px 24px 0 0;
+  overflow: scroll;
   
   /* Visual styling for iOS overshoot - extend background below using box-shadow */
   transform: translateZ(0);
@@ -220,9 +221,11 @@
   isolation: isolate;
   box-shadow: 0 300px 0 0 var(--color-background-neutral-primary);
   
-  /* Fixed 20px horizontal padding globally */
-  padding: 20px;
-  /* Add bottom padding on mobile to account for fixed tab bar */
+  /* No top padding - ds-mobile-section provides its own */
+  padding-top: 0;
+  padding-left: var(--content-wrapper-padding, 20px);
+  padding-right: var(--content-wrapper-padding, 20px);
+  /* Bottom padding ALWAYS preserved for safe area and tab bar */
   padding-bottom: calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px));
 }
 
@@ -238,7 +241,10 @@
 
 @media (min-width: 768px) {
   :host .content-wrapper {
-    padding: 32px 20px;
+    /* Remove top padding since ds-mobile-section provides its own */
+    padding-top: 0;
+    padding-left: var(--content-wrapper-padding, 20px);
+    padding-right: var(--content-wrapper-padding, 20px);
   }
 }
 
@@ -247,7 +253,7 @@
    ============================================ */
 
 :host .header-expandable {
-  background: var(--color-brand-secondary);
+  background: var(--color-header-surface);
   padding: 32px 20px 24px 20px;
   color: var(--header-content-color, white);
   position: sticky;