@propbinder/mobile-design 0.2.46 → 0.2.48

package/index.d.ts

@@ -43,6 +43,13 @@ type NetworkStatus = 'online' | 'offline' | 'unknown';
  * @internal This is a base class and should not be used directly.
  */
 declare abstract class MobilePageBase implements OnDestroy {
+    /**
+     * Shows a loading overlay above page content area.
+     *
+     * Non-breaking: defaults to false, so existing pages are unchanged
+     * until they explicitly opt in.
+     */
+    contentLoading: _angular_core.InputSignal<boolean>;
     /**
      * Maximum content width (desktop only)
      *
@@ -136,7 +143,7 @@ declare abstract class MobilePageBase implements OnDestroy {
      */
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobilePageBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobilePageBase, never, never, { "contentWidth": { "alias": "contentWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobilePageBase, never, never, { "contentLoading": { "alias": "contentLoading"; "required": false; "isSignal": true; }; "contentWidth": { "alias": "contentWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface ActionResult {
@@ -731,7 +738,7 @@ declare class DsMobilePageMainComponent extends MobilePageBase implements AfterV
     title: _angular_core.InputSignal<string>;
     headerTitle: _angular_core.InputSignal<string>;
     headerSubtitle: _angular_core.InputSignal<string>;
-    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarType: _angular_core.InputSignal<"photo" | "initials" | "icon">;
     avatarInitials: _angular_core.InputSignal<string>;
     avatarSrc: _angular_core.InputSignal<string>;
     avatarIconName: _angular_core.InputSignal<string>;
@@ -1577,11 +1584,19 @@ declare class DsMobileCommentComponent {
     /**
      * Avatar type
      */
-    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarType: _angular_core.InputSignal<"photo" | "initials" | "icon">;
     /**
      * Whether the comment is clickable
      */
     clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * - `true`  — more button visible on **all** breakpoints, long press enabled
+     * - `false` — more button hidden, long press suppressed
+     * - `undefined` (default) — falls back to desktop-only button
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
+    shouldShowMoreButton: _angular_core.Signal<boolean>;
     /**
      * Whether this comment belongs to the current user
      */
@@ -1668,7 +1683,7 @@ declare class DsMobileCommentComponent {
      */
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCommentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCommentComponent, "ds-mobile-comment", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "isOwnComment": { "alias": "isOwnComment"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; }, { "likeToggled": "likeToggled"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCommentComponent, "ds-mobile-comment", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; "isOwnComment": { "alias": "isOwnComment"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; }, { "likeToggled": "likeToggled"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 /**
@@ -1696,7 +1711,7 @@ declare class DsMobilePostComposerComponent {
     /**
      * Avatar type
      */
-    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarType: _angular_core.InputSignal<"photo" | "initials" | "icon">;
     /**
      * Avatar photo source (for photo type)
      */
@@ -1988,7 +2003,7 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
     /**
      * Avatar type
      */
-    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarType: _angular_core.InputSignal<"photo" | "initials" | "icon">;
     /**
      * Avatar photo source (for photo type)
      */
@@ -2309,7 +2324,7 @@ declare class DsMobileMessageBubbleComponent {
     /**
      * Avatar type
      */
-    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarType: _angular_core.InputSignal<"photo" | "initials" | "icon">;
     /**
      * Avatar photo source (for photo type)
      */
@@ -2603,11 +2618,22 @@ declare class DsMobileListItemComponent implements AfterViewInit {
     enableLongPress: _angular_core.InputSignal<boolean>;
     /**
      * Show "more actions" button on desktop for items with long-press enabled
-     * Only visible on desktop (hover: hover) and when enableLongPress is true
-     * Clicking this button triggers the same handler as long-press on mobile
+     * @deprecated Use `moreActions` instead. Kept for backwards compatibility.
      * @default true
      */
     showDesktopMoreButton: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * - `true`  — more button visible on **all** breakpoints, long press enabled
+     * - `false` — more button hidden, long press suppressed
+     * - `undefined` (default) — falls back to legacy `enableLongPress` + `showDesktopMoreButton` + desktop check
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Resolved visibility of the more-actions button.
+     * When `moreActions` is set it takes precedence; otherwise legacy inputs + breakpoint apply.
+     */
+    shouldShowMoreButton: _angular_core.Signal<boolean>;
     /**
      * Offset distance for the interactive background pseudo-element
      * Extends the background beyond the content bounds
@@ -2679,7 +2705,7 @@ declare class DsMobileListItemComponent implements AfterViewInit {
      */
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileListItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileListItemComponent, "ds-mobile-list-item", never, { "leadingSize": { "alias": "leadingSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "showDesktopMoreButton": { "alias": "showDesktopMoreButton"; "required": false; "isSignal": true; }; "interactiveOffset": { "alias": "interactiveOffset"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dividerSpacing": { "alias": "dividerSpacing"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "moreButtonClick": "moreButtonClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, [{ directive: typeof DsMobileLongPressDirective; inputs: {}; outputs: { "longPress": "longPress"; }; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileListItemComponent, "ds-mobile-list-item", never, { "leadingSize": { "alias": "leadingSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "showDesktopMoreButton": { "alias": "showDesktopMoreButton"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; "interactiveOffset": { "alias": "interactiveOffset"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dividerSpacing": { "alias": "dividerSpacing"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "moreButtonClick": "moreButtonClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, [{ directive: typeof DsMobileLongPressDirective; inputs: {}; outputs: { "longPress": "longPress"; }; }]>;
 }
 
 /**
@@ -2825,7 +2851,7 @@ declare class DsMobileInteractiveListItemPostComponent {
     /**
      * Avatar type
      */
-    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarType: _angular_core.InputSignal<"photo" | "initials" | "icon">;
     /**
      * Avatar photo source (for photo type)
      */
@@ -2862,6 +2888,11 @@ declare class DsMobileInteractiveListItemPostComponent {
      * @default true
      */
     enableLongPress: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * When set, takes precedence over `enableLongPress`.
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
     /**
      * Emits when the post card is clicked (if clickable)
      */
@@ -2879,7 +2910,7 @@ declare class DsMobileInteractiveListItemPostComponent {
     handleLongPress(): void;
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemPostComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemPostComponent, "ds-mobile-interactive-list-item-post", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; }, { "postClick": "postClick"; "commentClick": "commentClick"; "longPress": "longPress"; }, never, ["post-menu", "post-content", "post-actions"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemPostComponent, "ds-mobile-interactive-list-item-post", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; }, { "postClick": "postClick"; "commentClick": "commentClick"; "longPress": "longPress"; }, never, ["post-menu", "post-content", "post-actions"], true, never>;
 }
 /**
  * PostContentComponent
@@ -3089,6 +3120,11 @@ declare class DsMobileInteractiveListItemInquiryComponent {
      * @default true
      */
     enableLongPress: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * When set, takes precedence over `enableLongPress`.
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
     /**
      * Emits when the inquiry item is clicked (if clickable)
      */
@@ -3105,7 +3141,7 @@ declare class DsMobileInteractiveListItemInquiryComponent {
     handleLongPress(): void;
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemInquiryComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemInquiryComponent, "ds-mobile-interactive-list-item-inquiry", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; }, { "inquiryClick": "inquiryClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemInquiryComponent, "ds-mobile-interactive-list-item-inquiry", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; }, { "inquiryClick": "inquiryClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 /**
@@ -3153,7 +3189,7 @@ declare class DsMobileInteractiveListItemMessageComponent {
     /**
      * Avatar type
      */
-    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
+    avatarType: _angular_core.InputSignal<"photo" | "initials" | "icon">;
     /**
      * Avatar photo source (for photo type)
      */
@@ -3328,6 +3364,11 @@ declare class DsMobileInteractiveListItemBookingComponent {
      * @default true
      */
     enableLongPress: _angular_core.InputSignal<boolean>;
+    /**
+     * Unified toggle for contextual actions (more button + long press).
+     * When set, takes precedence over `enableLongPress`.
+     */
+    moreActions: _angular_core.InputSignal<boolean | undefined>;
     /**
      * Emits when the booking item is clicked (if clickable)
      */
@@ -3344,7 +3385,7 @@ declare class DsMobileInteractiveListItemBookingComponent {
     handleLongPress(): void;
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemBookingComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemBookingComponent, "ds-mobile-interactive-list-item-booking", never, { "thumbnail": { "alias": "thumbnail"; "required": false; "isSignal": true; }; "facilityTitle": { "alias": "facilityTitle"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "bookingDate": { "alias": "bookingDate"; "required": false; "isSignal": true; }; "bookingTime": { "alias": "bookingTime"; "required": false; "isSignal": true; }; "availabilityStatus": { "alias": "availabilityStatus"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; }, { "bookingClick": "bookingClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemBookingComponent, "ds-mobile-interactive-list-item-booking", never, { "thumbnail": { "alias": "thumbnail"; "required": false; "isSignal": true; }; "facilityTitle": { "alias": "facilityTitle"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "bookingDate": { "alias": "bookingDate"; "required": false; "isSignal": true; }; "bookingTime": { "alias": "bookingTime"; "required": false; "isSignal": true; }; "availabilityStatus": { "alias": "availabilityStatus"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "moreActions": { "alias": "moreActions"; "required": false; "isSignal": true; }; }, { "bookingClick": "bookingClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 interface TabConfig {
@@ -4535,6 +4576,13 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * @default false
      */
     isAutoHeight: _angular_core.InputSignal<boolean>;
+    /**
+     * Controls how modal content behaves when the keyboard opens.
+     * - 'follow': content is pushed to follow keyboard movement
+     * - 'overlay': keyboard/footer overlays lower content (no auto scroll push)
+     * @default 'follow'
+     */
+    keyboardContentBehavior: _angular_core.InputSignal<"overlay" | "follow">;
     /**
      * Emitted when modal is closed
      */
@@ -4581,8 +4629,16 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * @protected
      */
     protected isThisModal(modalElement: HTMLIonModalElement): boolean;
+    /**
+     * Returns true when keyboard should overlay content without push-scrolling.
+     */
+    private isOverlayBehavior;
+    /**
+     * Computes scroll bottom inset for current keyboard behavior.
+     */
+    private getScrollPadding;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileModalBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "isAutoHeight": { "alias": "isAutoHeight"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "isAutoHeight": { "alias": "isAutoHeight"; "required": false; "isSignal": true; }; "keyboardContentBehavior": { "alias": "keyboardContentBehavior"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
 }
 
 /**
@@ -4597,6 +4653,7 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
  * - Default loading and error state templates (with override capability)
  * - Fixed bottom component support (e.g., message composer)
  * - Automatic keyboard handling
+ * - Configurable keyboard content behavior (`follow` or `overlay`)
  * - Safe area support
  *
  * **Slot Structure:**
@@ -4639,7 +4696,8 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
  * <ds-mobile-modal-base
  *   headerTitle="Create Inquiry"
  *   [hasFixedBottom]="true"
- *   [enableKeyboardHandling]="true">
+ *   [enableKeyboardHandling]="true"
+ *   [keyboardContentBehavior]="'overlay'">
  *
  *   <div class="content">
  *     <input type="text" placeholder="Type something..." />
@@ -4694,6 +4752,10 @@ declare class DsMobileModalBaseComponent extends MobileModalBase implements OnIn
      * Determine if header should be shown based on showHeader input and content detection
      */
     shouldShowHeader(): boolean;
+    /**
+     * Check whether header-leading slot has actual projected content.
+     */
+    hasHeaderLeadingContent(): boolean;
     /**
      * Check if a content child slot has actual content
      */
@@ -4831,6 +4893,10 @@ declare class DsMobilePostDetailModalComponent implements OnInit, AfterViewInit
     currentUserInitialsInput: string;
     loading: boolean;
     error: string | undefined;
+    onTogglePostLike?: (payload: {
+        postId: string;
+        active: boolean;
+    }) => void;
     onSubmitComment?: (payload: {
         postId: string;
         text: string;
@@ -4891,6 +4957,13 @@ declare class DsMobilePostDetailModalComponent implements OnInit, AfterViewInit
      * Handle edit comment
      */
     handleEditComment(comment: CommentData): void;
+    /**
+     * Handle post like/unlike toggle
+     */
+    handlePostLikeToggle(ev: {
+        active: boolean;
+        count: number;
+    }): void;
     /**
      * Handle comment like/unlike toggle
      * @param comment The comment being liked/unliked
@@ -4913,7 +4986,7 @@ declare class DsMobilePostDetailModalComponent implements OnInit, AfterViewInit
      */
     handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostDetailModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; "currentUserName": { "alias": "currentUserName"; "required": false; }; "currentUserInitialsInput": { "alias": "currentUserInitialsInput"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "onSubmitComment": { "alias": "onSubmitComment"; "required": false; }; "onToggleCommentLike": { "alias": "onToggleCommentLike"; "required": false; }; "onEditComment": { "alias": "onEditComment"; "required": false; }; "onDeleteComment": { "alias": "onDeleteComment"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; "currentUserName": { "alias": "currentUserName"; "required": false; }; "currentUserInitialsInput": { "alias": "currentUserInitialsInput"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "onTogglePostLike": { "alias": "onTogglePostLike"; "required": false; }; "onSubmitComment": { "alias": "onSubmitComment"; "required": false; }; "onToggleCommentLike": { "alias": "onToggleCommentLike"; "required": false; }; "onEditComment": { "alias": "onEditComment"; "required": false; }; "onDeleteComment": { "alias": "onDeleteComment"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -5047,6 +5120,10 @@ declare class DsMobilePostDetailModalService extends BaseModalService {
     open(postData: PostDetailData, options?: {
         loading?: boolean;
         error?: string;
+        onTogglePostLike?: (payload: {
+            postId: string;
+            active: boolean;
+        }) => void;
         onSubmitComment?: (payload: {
             postId: string;
             text: string;
@@ -5505,7 +5582,7 @@ declare class DsMobileChatModalComponent implements OnInit, AfterViewInit {
     participant: _angular_core.WritableSignal<ChatParticipant>;
     messages: _angular_core.WritableSignal<ChatMessage[]>;
     currentUserInitials: _angular_core.WritableSignal<string>;
-    currentUserAvatarType: _angular_core.WritableSignal<"initials" | "photo" | "icon">;
+    currentUserAvatarType: _angular_core.WritableSignal<"photo" | "initials" | "icon">;
     currentUserAvatarSrc: _angular_core.WritableSignal<string>;
     autoFocus: _angular_core.WritableSignal<boolean>;
     /**
@@ -5763,6 +5840,7 @@ interface NewInquiryData {
 declare class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit {
     private modalController;
     titleInputRef?: ElementRef<HTMLElement>;
+    descriptionInputRef?: ElementRef<HTMLElement>;
     titleInput?: DsTextareaComponent;
     fileInput?: ElementRef<HTMLInputElement>;
     /**
@@ -5815,10 +5893,18 @@ declare class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit
      * Auto-resize the title textarea based on content
      */
     private autoResizeTitleTextarea;
+    /**
+     * Auto-resize the description textarea based on content
+     */
+    private autoResizeDescriptionTextarea;
     /**
      * Handle title change with auto-resize
      */
     handleTitleChange(value: string): void;
+    /**
+     * Handle description change with auto-resize
+     */
+    handleDescriptionChange(value: string): void;
     /**
      * Validate form fields
      */
@@ -6167,6 +6253,7 @@ declare class DsMobileFacilityCreationModalComponent implements OnInit, AfterVie
     private modalController;
     private bottomSheetService;
     titleInputRef?: ElementRef<HTMLElement>;
+    descriptionInputRef?: ElementRef<HTMLElement>;
     titleInput?: DsTextareaComponent;
     fileInput?: ElementRef<HTMLInputElement>;
     /**
@@ -6235,10 +6322,18 @@ declare class DsMobileFacilityCreationModalComponent implements OnInit, AfterVie
      * Auto-resize the title textarea based on content
      */
     private autoResizeTitleTextarea;
+    /**
+     * Auto-resize the description textarea based on content
+     */
+    private autoResizeDescriptionTextarea;
     /**
      * Handle title change with auto-resize
      */
     handleTitleChange(value: string): void;
+    /**
+     * Handle description change with auto-resize
+     */
+    handleDescriptionChange(value: string): void;
     /**
      * Validate form fields
      */
@@ -7096,7 +7191,7 @@ declare class DsMobileHandbookFolderMiniComponent {
  * ```
  */
 declare class DsTextInputComponent implements ControlValueAccessor {
-    type: _angular_core.InputSignal<"search" | "text" | "url" | "email" | "tel" | "password">;
+    type: _angular_core.InputSignal<"search" | "text" | "email" | "tel" | "url" | "password">;
     placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     readonly: _angular_core.InputSignal<boolean>;
@@ -7104,7 +7199,7 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     hasError: _angular_core.InputSignal<boolean>;
     errorMessage: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
-    inputmode: _angular_core.InputSignal<"search" | "text" | "url" | "numeric" | "email" | "tel" | undefined>;
+    inputmode: _angular_core.InputSignal<"search" | "text" | "email" | "tel" | "url" | "numeric" | undefined>;
     autoClearError: _angular_core.InputSignal<boolean>;
     validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
     valueChange: _angular_core.OutputEmitterRef<string>;
@@ -7469,7 +7564,7 @@ declare class UserService {
     private _avatarSrc;
     private _profileMenuItems;
     readonly avatarInitials: _angular_core.Signal<string>;
-    readonly avatarType: _angular_core.Signal<"initials" | "photo" | "icon">;
+    readonly avatarType: _angular_core.Signal<"photo" | "initials" | "icon">;
     readonly avatarSrc: _angular_core.Signal<string>;
     readonly profileMenuItems: _angular_core.Signal<ActionGroup[] | undefined>;
     private profileActionSelectedSubject;
@@ -7687,6 +7782,7 @@ declare class MobileHomePageComponent implements OnInit {
     private postsService;
     private postModal;
     private trackingPermissionService;
+    private bottomSheet;
     pageComponent: DsMobilePageMainComponent;
     recentPosts: _angular_core.Signal<_propbinder_mobile_design.Post[]>;
     private allInquiries;
@@ -7697,13 +7793,14 @@ declare class MobileHomePageComponent implements OnInit {
         status: "open";
         timestamp: string;
     }[]>;
-    constructor(router: Router, userService: UserService, postsService: PostsService, postModal: DsMobilePostDetailModalService, trackingPermissionService: TrackingPermissionService);
+    constructor(router: Router, userService: UserService, postsService: PostsService, postModal: DsMobilePostDetailModalService, trackingPermissionService: TrackingPermissionService, bottomSheet: DsMobileBottomSheetService);
     ngOnInit(): void;
     handleRefresh(event: any): void;
     openPost(postId: string, focusComment?: boolean): Promise<void>;
     openInquiryDetail(inquiryId: string): void;
     navigateToCommunity(): void;
     navigateToInquiries(): void;
+    handlePostLongPress(postId: string): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHomePageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHomePageComponent, "app-home-page", never, {}, {}, never, never, true, never>;
 }
@@ -7834,9 +7931,10 @@ interface FacilityDetail {
 declare class MobileBookingPageComponent {
     private facilityModal;
     private facilityCreationModal;
+    userService: UserService;
     pageComponent: DsMobilePageMainComponent;
     bookingsSwiper?: DsMobileSwiperComponent;
-    constructor(facilityModal: DsMobileFacilityDetailModalService, facilityCreationModal: DsMobileFacilityCreationModalService);
+    constructor(facilityModal: DsMobileFacilityDetailModalService, facilityCreationModal: DsMobileFacilityCreationModalService, userService: UserService);
     activeBookings: _angular_core.WritableSignal<FacilityDetail[]>;
     availableFacilities: _angular_core.WritableSignal<FacilityDetail[]>;
     handleRefresh(event: any): void;

package/package.json

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

package/styles/ionic.css

@@ -76,14 +76,28 @@
      2. These CSS variables below
      ============================================ */
 
+  /* Normalized safe-area variables consumed by app layout styles.
+     Defaults to env() and can be overridden at runtime from SafeArea plugin. */
+  --app-safe-top: env(safe-area-inset-top, 0px);
+  --app-safe-right: env(safe-area-inset-right, 0px);
+  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --app-safe-left: env(safe-area-inset-left, 0px);
+
   /* 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);
+  --app-sheet-top-offset: calc(max(32px, var(--app-safe-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));
+  --app-header-top-offset: max(0px, calc(var(--app-safe-top, 0px) - 16px));
+}
+
+/* Android-only top safe-area tuning:
+   add 8px extra breathing room above header/sheet content. */
+.plt-android {
+  --app-sheet-top-offset: calc(max(32px, var(--app-safe-top, 32px)) + 20px);
+  --app-header-top-offset: max(0px, calc(var(--app-safe-top, 0px) - 8px));
 }
 
 /* Global Styles for Mobile App */
@@ -197,14 +211,14 @@ ion-content::part(scroll)::-webkit-scrollbar {
 
 /* iOS-specific: Enable native scroll overshoot/bounce effect */
 .plt-ios ion-content::part(scroll) {
-  overscroll-behavior-y: contain;
+  overscroll-behavior-y: auto;
   /* iOS: Set scroll container background to match brand secondary */
   /* This prevents white background from showing when header fades on scroll */
   background: var(--color-header-surface) !important;
 }
 
 .plt-ios .ion-page {
-  overscroll-behavior-y: contain;
+  overscroll-behavior-y: auto;
   /* Set page background to brand secondary to match header on iOS */
   background: var(--color-header-surface) !important;
 }
@@ -278,7 +292,7 @@ ion-spinner {
 ion-modal:not(.ds-bottom-sheet) {
   --background: var(--color-background-neutral-primary);
   --border-radius: 16px;
-  --box-shadow: var(--box-shadow-lg);
+  --box-shadow: none;
   /* Prevent modal from resizing when keyboard appears */
   height: 100% !important;
   max-height: 100vh !important;
@@ -297,6 +311,11 @@ ion-modal ion-content {
   height: 100% !important;
 }
 
+/* Keep neutral cursor over dismissable backdrop areas */
+ion-modal::part(backdrop) {
+  cursor: default !important;
+}
+
 ion-action-sheet {
   --background: var(--color-background-neutral-primary);
   --color: var(--text-color-default-primary);
@@ -325,7 +344,7 @@ ion-toast {
 /* Base bottom sheet styling */
 .ds-bottom-sheet {
   --border-radius: 16px;
-  --box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.12);
+  --box-shadow: none;
   --backdrop-opacity: 0.4;
   transition: --backdrop-opacity 0.3s ease;
   /* Modal at top:0 so backdrop covers full screen including status bar */
@@ -461,7 +480,7 @@ ion-toast {
 .ds-mobile-modal {
   --background: var(--color-background-neutral-primary, #ffffff);
   --border-radius: 16px;
-  --box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  --box-shadow: none;
   --max-width: 640px;
   --width: 100%;
 }

package/styles/mobile-page-base.css

@@ -156,6 +156,7 @@
 :host ion-content::part(scroll) {
   display: flex;
   flex-direction: column;
+  min-height: 100%;
   -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 */
@@ -207,13 +208,13 @@
   width: 100%;
   position: relative;
   z-index: 20;
-  /* Flex child that grows to fill available space */
+  /* Fill remaining viewport height while keeping ion-content as scroller */
   flex: 1;
   display: flex;
   flex-direction: column;
   background: var(--color-background-neutral-primary);
   border-radius: 24px 24px 0 0;
-  overflow: scroll;
+  overflow: visible;
   
   /* Visual styling for iOS overshoot - extend background below using box-shadow */
   transform: translateZ(0);
@@ -226,13 +227,10 @@
   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));
+  padding-bottom: calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px));
 }
 
 :host .content-inner {
-  /* Grow to fill parent flex container */
-  flex: 1;
-  
   /* Mobile-first: max-width 640px, centered */
   max-width: 640px;
   margin: 0 auto;