@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/components/page-main/ds-mobile-page-main.css

@@ -0,0 +1,346 @@
+/* ============================================
+   DS MOBILE PAGE MAIN
+   Reusable mobile page component for main/tab pages
+   ============================================ */
+
+/* ============================================
+   HOST
+   ============================================ */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+/* ============================================
+   ION-HEADER - Fixed Header at Top
+   ============================================ */
+
+ion-header {
+  background: var(--color-brand-secondary);
+  box-shadow: none;
+  height: 72px;
+  min-height: 72px;
+}
+
+ion-header ion-toolbar {
+  --background: var(--color-brand-secondary);
+  --border-width: 0;
+  --box-shadow: none;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --min-height: 72px;
+  height: 100%;
+  min-height: 72px;
+  padding: 0;
+}
+
+ion-header ion-toolbar::part(native) {
+  height: 100%;
+  min-height: 72px;
+  padding: 0;
+}
+
+/* Hide header on desktop when using ds-mobile-tabs top bar */
+@media (min-width: 768px) {
+  ion-header {
+    display: none;
+    height: auto;
+  }
+}
+
+/* ============================================
+   HEADER HOME - Logo + Title + Avatar
+   ============================================ */
+
+.header-home {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  background: var(--color-brand-secondary);
+  position: relative;
+  height: 100%;
+}
+
+.header-home__title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(-100%);
+  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;
+}
+
+/* Show title when scrolled */
+.header-scrolled .header-home__title {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.header-home__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-home__actions ds-avatar {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.logomark {
+  height: 28px;
+  width: auto;
+  flex-shrink: 0;
+}
+
+@media (min-width: 768px) {
+  .header-home {
+    padding: 16px 24px;
+  }
+  
+  .logomark {
+    height: 32px;
+  }
+
+  /* Hide title on desktop - not needed */
+  .header-home__title {
+    display: none;
+  }
+}
+
+/* ============================================
+   ION-CONTENT
+   ============================================ */
+
+ion-content {
+  --background: var(--color-brand-secondary);
+  --padding-top: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  border-radius: 24px 24px 24px 24px;
+  overflow: hidden;
+}
+
+/* Make ion-content scroll area a flex container */
+ion-content::part(scroll) {
+  display: flex;
+  flex-direction: column;
+}
+
+/* iOS-specific: White background for bottom overshoot */
+.plt-ios ion-content {
+  --background: var(--color-background-neutral-primary);
+}
+
+/* Desktop only: remove bottom radius */
+@media (min-width: 768px) {
+  ion-content {
+    border-radius: 24px 24px 0 0;
+  }
+}
+
+ion-content::part(scroll) {
+  -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 */
+  /* Flex container for content to expand properly */
+  display: flex;
+  flex-direction: column;
+}
+
+/* ============================================
+   CONDENSED HEADER
+   ============================================ */
+
+ion-header[collapse="condense"] {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  ion-header[collapse="condense"] {
+    display: none;
+  }
+}
+
+/* ============================================
+   REFRESHER
+   ============================================ */
+
+ion-refresher {
+  z-index: 0;
+}
+
+ion-refresher-content {
+  --color: white;
+}
+
+/* ============================================
+   HEADER EXPANDABLE - Purple Header Section
+   ============================================ */
+
+.header-expandable {
+  background: var(--color-brand-secondary);
+  padding: 32px 20px 24px 20px;
+  color: white;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
+}
+
+.header-expandable-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.header-expandable__text {
+  margin-bottom: 0;
+}
+
+.header-expandable__title {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  color: white;
+  margin: 0;
+}
+
+.header-expandable__subtitle {
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  color: white;
+  opacity: 0.85;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .header-expandable {
+    padding: 48px var(--content-padding-md);
+  }
+
+  .header-expandable__title {
+    font-size: var(--font-size-3xl);
+  }
+
+  .header-expandable__subtitle {
+    font-size: var(--font-size-base);
+  }
+}
+
+@media (min-width: 992px) {
+  .header-expandable {
+    padding-left: var(--content-padding-lg);
+    padding-right: var(--content-padding-lg);
+  }
+}
+
+@media (min-width: 1440px) {
+  .header-expandable {
+    padding-left: var(--content-padding-xl);
+    padding-right: var(--content-padding-xl);
+  }
+}
+
+@media (min-width: 1768px) {
+  .header-expandable {
+    padding-left: var(--content-padding-2xl);
+    padding-right: var(--content-padding-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  .header-expandable {
+    padding-left: var(--content-padding-3xl);
+    padding-right: var(--content-padding-3xl);
+  }
+}
+
+/* ============================================
+   CONTENT WRAPPER - White Rounded Content
+   ============================================ */
+
+.content-wrapper {
+  position: relative;
+  z-index: 20;
+  padding: 0;
+  /* Flex child that grows to fill available space */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 768px) {
+  .content-wrapper {
+    width: 100%;
+  }
+}
+
+.content-inner {
+  /* Visual styling - background, border-radius, and shadow extend */
+  background: var(--color-background-neutral-primary);
+  border-radius: 24px 24px 0 0;
+  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;
+  
+  /* Fixed 20px horizontal padding globally */
+  padding: 24px 20px 32px 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));
+}
+
+@media (min-width: 768px) {
+  .content-inner {
+    border-radius: 16px 16px 0 0;
+    padding: 32px var(--content-padding-md) !important; /* Override inline styles on desktop */
+    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+@media (min-width: 992px) {
+  .content-inner {
+    padding: 32px var(--content-padding-lg) !important;
+    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
+  }
+}
+
+@media (min-width: 1440px) {
+  .content-inner {
+    padding: 32px var(--content-padding-xl) !important;
+    max-width: calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));
+  }
+}
+
+@media (min-width: 1768px) {
+  .content-inner {
+    padding: 32px var(--content-padding-2xl) !important;
+  }
+}
+
+@media (min-width: 1920px) {
+  .content-inner {
+    padding: 32px var(--content-padding-3xl) !important;
+  }
+}
+

package/src/components/page-main/ds-mobile-page-main.ts

@@ -0,0 +1,331 @@
+import { Component, input, output, HostListener, ElementRef, ViewChild, AfterViewInit, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle,
+  IonContent, 
+  IonRefresher, 
+  IonRefresherContent,
+  Platform,
+  ModalController
+} from '@ionic/angular/standalone';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { MobilePageBase } from '../shared/mobile-page-base';
+import { DsMobileActionsBottomSheetComponent, ActionResult } from '../bottom-sheet';
+
+/**
+ * DsMobilePageMainComponent
+ * 
+ * A complete mobile page layout for main/tab pages with:
+ * - Fixed header with logomark + title + avatar
+ * - Purple expandable header section (scrolls with content)
+ * - White rounded content wrapper
+ * - Pull-to-refresh support
+ * - Auto scroll title fade-in
+ * 
+ * @example
+ * ```html
+ * <!-- Simple page -->
+ * <ds-mobile-page-main
+ *   title="Inquiries"
+ *   [avatarInitials]="'JD'">
+ *   <div class="page-content">
+ *     <!-- Your content -->
+ *   </div>
+ * </ds-mobile-page-main>
+ * 
+ * <!-- Page with custom header content -->
+ * <ds-mobile-page-main
+ *   title="Home"
+ *   headerTitle="Welcome, Lars"
+ *   headerSubtitle="Your rental property at a glance."
+ *   [avatarInitials]="'L'">
+ *   
+ *   <div header-content class="property-tiles">
+ *     <!-- Custom header content like tiles -->
+ *   </div>
+ *   
+ *   <div class="page-content">
+ *     <!-- Main page content -->
+ *   </div>
+ * </ds-mobile-page-main>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-page-main',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonRefresher,
+    IonRefresherContent,
+    DsAvatarComponent
+  ],
+  styleUrls: ['./ds-mobile-page-main.css'],
+  template: `
+    <!-- Fixed header at top -->
+    <ion-header>
+      <ion-toolbar>
+        <div class="header-home">
+          <!-- Propbinder Logomark -->
+          <svg class="logomark" width="36" height="32" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M33.9862 5.51709H23.1724V8.82743H26.0413C26.2841 8.82743 26.4827 9.02606 26.4827 9.26881V12.7998C26.4827 13.0426 26.2841 13.2412 26.0413 13.2412H23.1724V14.3447H26.0413C26.2841 14.3447 26.4827 14.5433 26.4827 14.7861V18.3171C26.4827 18.5598 26.2841 18.7585 26.0413 18.7585H23.1724V19.8619H26.0413C26.2841 19.8619 26.4827 20.0605 26.4827 20.3033V23.8343C26.4827 24.0771 26.2841 24.2757 26.0413 24.2757H23.1724V26.2619C23.1724 26.7496 23.0267 27.2043 22.7773 27.5861H27.5862L32 31.9999V27.5861H33.9862C34.7167 27.5861 35.3103 26.9924 35.3103 26.2619V6.84123C35.3103 6.11075 34.7167 5.51709 33.9862 5.51709ZM32 23.8343C32 24.0771 31.8013 24.2757 31.5586 24.2757H28.0276C27.7848 24.2757 27.5862 24.0771 27.5862 23.8343V20.3033C27.5862 20.0605 27.7848 19.8619 28.0276 19.8619H31.5586C31.8013 19.8619 32 20.0605 32 20.3033V23.8343ZM32 18.3171C32 18.5598 31.8013 18.7585 31.5586 18.7585H28.0276C27.7848 18.7585 27.5862 18.5598 27.5862 18.3171V14.7861C27.5862 14.5433 27.7848 14.3447 28.0276 14.3447H31.5586C31.8013 14.3447 32 14.5433 32 14.7861V18.3171ZM32 12.7998C32 13.0426 31.8013 13.2412 31.5586 13.2412H28.0276C27.7848 13.2412 27.5862 13.0426 27.5862 12.7998V9.26881C27.5862 9.02606 27.7848 8.82743 28.0276 8.82743H31.5586C31.8013 8.82743 32 9.02606 32 9.26881V12.7998Z" fill="white"/>
+            <path d="M20.7448 0H1.32414C0.593655 0 0 0.593655 0 1.32414V26.2621C0 26.9926 0.593655 27.5862 1.32414 27.5862H3.31034V32L7.72414 27.5862H20.7448C21.4753 27.5862 22.069 26.9926 22.069 26.2621V1.32414C22.069 0.593655 21.4753 0 20.7448 0ZM7.72414 23.8345C7.72414 24.0772 7.52552 24.2759 7.28276 24.2759H3.75172C3.50897 24.2759 3.31034 24.0772 3.31034 23.8345V20.3034C3.31034 20.0607 3.50897 19.8621 3.75172 19.8621H7.28276C7.52552 19.8621 7.72414 20.0607 7.72414 20.3034V23.8345ZM7.72414 18.3172C7.72414 18.56 7.52552 18.7586 7.28276 18.7586H3.75172C3.50897 18.7586 3.31034 18.56 3.31034 18.3172V14.7862C3.31034 14.5434 3.50897 14.3448 3.75172 14.3448H7.28276C7.52552 14.3448 7.72414 14.5434 7.72414 14.7862V18.3172ZM7.72414 12.8C7.72414 13.0428 7.52552 13.2414 7.28276 13.2414H3.75172C3.50897 13.2414 3.31034 13.0428 3.31034 12.8V9.26897C3.31034 9.02621 3.50897 8.82759 3.75172 8.82759H7.28276C7.52552 8.82759 7.72414 9.02621 7.72414 9.26897V12.8ZM7.72414 7.28276C7.72414 7.52552 7.52552 7.72414 7.28276 7.72414H3.75172C3.50897 7.72414 3.31034 7.52552 3.31034 7.28276V3.75172C3.31034 3.50897 3.50897 3.31034 3.75172 3.31034H7.28276C7.52552 3.31034 7.72414 3.50897 7.72414 3.75172V7.28276ZM13.2414 23.8345C13.2414 24.0772 13.0428 24.2759 12.8 24.2759H9.26897C9.02621 24.2759 8.82759 24.0772 8.82759 23.8345V20.3034C8.82759 20.0607 9.02621 19.8621 9.26897 19.8621H12.8C13.0428 19.8621 13.2414 20.0607 13.2414 20.3034V23.8345ZM13.2414 18.3172C13.2414 18.56 13.0428 18.7586 12.8 18.7586H9.26897C9.02621 18.7586 8.82759 18.56 8.82759 18.3172V14.7862C8.82759 14.5434 9.02621 14.3448 9.26897 14.3448H12.8C13.0428 14.3448 13.2414 14.5434 13.2414 14.7862V18.3172ZM13.2414 12.8C13.2414 13.0428 13.0428 13.2414 12.8 13.2414H9.26897C9.02621 13.2414 8.82759 13.0428 8.82759 12.8V9.26897C8.82759 9.02621 9.02621 8.82759 9.26897 8.82759H12.8C13.0428 8.82759 13.2414 9.02621 13.2414 9.26897V12.8ZM13.2414 6.84138V7.28276C13.2414 7.52552 13.0428 7.72414 12.8 7.72414H9.26897C9.02621 7.72414 8.82759 7.52552 8.82759 7.28276V3.75172C8.82759 3.50897 9.02621 3.31034 9.26897 3.31034H12.8C13.0428 3.31034 13.2414 3.50897 13.2414 3.75172V6.84138ZM18.7586 23.8345C18.7586 24.0772 18.56 24.2759 18.3172 24.2759H14.7862C14.5434 24.2759 14.3448 24.0772 14.3448 23.8345V20.3034C14.3448 20.0607 14.5434 19.8621 14.7862 19.8621H18.3172C18.56 19.8621 18.7586 20.0607 18.7586 20.3034V23.8345ZM18.7586 18.3172C18.7586 18.56 18.56 18.7586 18.3172 18.7586H14.7862C14.5434 18.7586 14.3448 18.56 14.3448 18.3172V14.7862C14.3448 14.5434 14.5434 14.3448 14.7862 14.3448H18.3172C18.56 14.3448 18.7586 14.5434 18.7586 14.7862V18.3172ZM18.7586 12.8C18.7586 13.0428 18.56 13.2414 18.3172 13.2414H14.7862C14.5434 13.2414 14.3448 13.0428 14.3448 12.8V9.26897C14.3448 9.02621 14.5434 8.82759 14.7862 8.82759H18.3172C18.56 8.82759 18.7586 9.02621 18.7586 9.26897V12.8ZM18.7586 5.51724V7.28276C18.7586 7.52552 18.56 7.72414 18.3172 7.72414H14.7862C14.5434 7.72414 14.3448 7.52552 14.3448 7.28276V3.75172C14.3448 3.50897 14.5434 3.31034 14.7862 3.31034H18.3172C18.56 3.31034 18.7586 3.50897 18.7586 3.75172V5.51724Z" fill="white"/>
+          </svg>
+          
+          <!-- Title - fades in on scroll -->
+          <ion-title class="header-home__title">{{ title() }}</ion-title>
+          
+          <!-- Avatar -->
+          <div class="header-home__actions">
+            <ds-avatar
+              [size]="'md'"
+              [type]="avatarType()"
+              [initials]="avatarInitials()"
+              [src]="avatarSrc()"
+              [iconName]="avatarIconName()"
+              (click)="handleAvatarClick()"
+              style="cursor: pointer;"
+            />
+          </div>
+        </div>
+      </ion-toolbar>
+    </ion-header>
+
+    <!-- Content with expandable header -->
+    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
+      <!-- Condensed header for Ionic scroll effects -->
+      @if (showCondensedHeader()) {
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">{{ title() }}</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      }
+
+      <!-- Pull to refresh (only on native iOS/Android) -->
+      @if (showRefresh() && isNativePlatform()) {
+        <ion-refresher 
+          slot="fixed" 
+          (ionRefresh)="handleRefresh($event)"
+          [pullFactor]="0.4" 
+          [pullMin]="80" 
+          [pullMax]="240"
+          closeDuration="600ms">
+          <ion-refresher-content
+            pullingIcon="chevron-down-circle-outline"
+            refreshingSpinner="lines">
+          </ion-refresher-content>
+        </ion-refresher>
+      }
+
+      <!-- Expandable header section (purple background) -->
+      <div class="header-expandable">
+        <div class="header-expandable-inner">
+          <div class="header-expandable__text">
+            <h1 class="header-expandable__title">{{ headerTitle() || title() }}</h1>
+            @if (headerSubtitle()) {
+              <p class="header-expandable__subtitle">{{ headerSubtitle() }}</p>
+            }
+          </div>
+          
+          <!-- Slot for custom header content (e.g., property tiles) -->
+          <ng-content select="[header-content]"></ng-content>
+        </div>
+      </div>
+
+      <!-- Content wrapper -->
+      <div class="content-wrapper">
+        <div class="content-inner">
+          <!-- Main page content -->
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </ion-content>
+  `
+})
+export class DsMobilePageMainComponent extends MobilePageBase implements AfterViewInit {
+  @ViewChild(IonContent) ionContent?: IonContent;
+  
+  // Platform detection
+  private platform = inject(Platform);
+  private modalController = inject(ModalController);
+  private router = inject(Router);
+  
+  // Computed property to check if running on native platform
+  isNativePlatform = computed(() => 
+    this.platform.is('ios') || 
+    this.platform.is('android') || 
+    this.platform.is('capacitor')
+  );
+  
+  // Inputs - Title
+  title = input.required<string>(); // For fixed header title
+  headerTitle = input<string>(''); // Optional different title for expandable header
+  headerSubtitle = input<string>('');
+  
+  // Inputs - Avatar
+  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
+  avatarInitials = input<string>('U');
+  avatarSrc = input<string>('');
+  avatarIconName = input<string>('remixUser3Line');
+  
+  // Inputs - Features
+  showRefresh = input<boolean>(true);
+  showCondensedHeader = input<boolean>(true);
+  scrollThreshold = input<number>(160); // Pixels to scroll before title appears
+  headerFadeDistance = input<number>(150); // Distance over which header fades out
+  
+  // Outputs
+  avatarClick = output<void>();
+  refresh = output<any>();
+  scroll = output<any>();
+  
+  constructor(private elementRef: ElementRef) {
+    super();
+  }
+  
+  ngAfterViewInit(): void {
+    // Initial setup if needed
+  }
+  
+  /**
+   * Handle avatar click - opens profile actions bottom sheet
+   */
+  async handleAvatarClick(): Promise<void> {
+    console.log('Avatar clicked - opening profile bottom sheet');
+    
+    // Emit the event for any parent listeners
+    this.avatarClick.emit();
+    
+    const sheet = await this.modalController.create({
+      component: DsMobileActionsBottomSheetComponent,
+      componentProps: {
+        customActionGroups: [
+          {
+            actions: [
+              {
+                action: 'profile',
+                title: 'Min profil',
+                icon: 'remixUser3Line',
+                destructive: false
+              },
+              {
+                action: 'settings',
+                title: 'Indstillinger',
+                icon: 'remixSettings3Line',
+                destructive: false
+              },
+              {
+                action: 'whitelabel-demo',
+                title: 'Whitelabel Demo',
+                icon: 'remixPaletteLine',
+                destructive: false
+              }
+            ]
+          },
+          {
+            actions: [
+              {
+                action: 'logout',
+                title: 'Log ud',
+                icon: 'remixLogoutBoxLine',
+                destructive: true
+              }
+            ]
+          }
+        ]
+      },
+      // Auto-height: no breakpoints, no handle
+      cssClass: 'ds-bottom-sheet auto-height'
+    });
+    
+    await sheet.present();
+    
+    const result = await sheet.onWillDismiss<ActionResult>();
+    if (result.data?.action) {
+      console.log('Profile action selected:', result.data.action);
+      
+      switch (result.data.action) {
+        case 'logout':
+          console.log('Logging out...');
+          // TODO: Implement logout logic
+          break;
+        case 'profile':
+          console.log('Opening profile...');
+          // TODO: Navigate to profile page
+          break;
+        case 'settings':
+          console.log('Opening settings...');
+          // TODO: Navigate to settings page
+          break;
+        case 'whitelabel-demo':
+          console.log('Opening whitelabel demo...');
+          this.router.navigate(['/whitelabel-demo']);
+          break;
+      }
+    }
+  }
+  
+  /**
+   * Handle scroll events
+   * - Shows title in fixed header when scrolled past threshold
+   * - Fades out expandable header content based on scroll position
+   * - Emits scroll event for custom handling
+   */
+  handleScroll(event: any): void {
+    const scrollTop = event.detail.scrollTop;
+    const header = this.elementRef.nativeElement.querySelector('ion-header:not([collapse])');
+    const headerExpandable = this.elementRef.nativeElement.querySelector('.header-expandable');
+    
+    // Show title in fixed header when scrolled past threshold
+    if (scrollTop > this.scrollThreshold()) {
+      header?.classList.add('header-scrolled');
+    } else {
+      header?.classList.remove('header-scrolled');
+    }
+    
+    // Fade out header-expandable content based on scroll
+    if (headerExpandable) {
+      const fadeDistance = this.headerFadeDistance();
+      const fadeProgress = Math.min(scrollTop / fadeDistance, 1);
+      
+      // Calculate opacity (1 to 0)
+      const opacity = 1 - fadeProgress;
+      
+      // Calculate transform (0px to -20px upward)
+      const translateY = fadeProgress * -20;
+      
+      // Apply styles
+      headerExpandable.style.opacity = opacity.toString();
+      headerExpandable.style.transform = `translateY(${translateY}px)`;
+    }
+    
+    this.scroll.emit(event);
+  }
+  
+  /**
+   * Handle pull-to-refresh
+   * Emits refresh event - parent should call event.target.complete()
+   */
+  async handleRefresh(event: any): Promise<void> {
+    // Haptic feedback for pull-to-refresh
+    try {
+      await Haptics.impact({ style: ImpactStyle.Medium });
+    } catch {
+      // Fallback to Web Vibration API if Capacitor Haptics is not available
+      if ('vibrate' in navigator) {
+        navigator.vibrate(50);
+      }
+    }
+    
+    this.refresh.emit(event);
+  }
+}
+

package/src/components/page-main/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-page-main';
+