@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/display-blocks/notification.md

@@ -0,0 +1,1410 @@
+# Notification
+
+Notification message displayed in the corner of the page.
+
+```yaml
+- id: notif_status_success
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: success
+    title: Changes Saved
+    description: Your changes have been saved successfully.
+- id: notif_status_error
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: error
+    title: Save Failed
+    description: Failed to save your changes. Please try again.
+- id: notif_status_warning
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: warning
+    title: Disk Space Low
+    description: Server storage is running below 10% capacity.
+- id: notif_status_info
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Update Available
+    description: A new version of the application is available.
+- id: btn_status_success
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Success
+    color: primary
+    variant: outlined
+    icon: AiOutlineCheckCircle
+  events:
+    onClick:
+      - id: open_status_success
+        type: CallMethod
+        params:
+          blockId: notif_status_success
+          method: open
+- id: btn_status_error
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Error
+    color: danger
+    variant: outlined
+    icon: AiOutlineCloseCircle
+  events:
+    onClick:
+      - id: open_status_error
+        type: CallMethod
+        params:
+          blockId: notif_status_error
+          method: open
+- id: btn_status_warning
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Warning
+    color: default
+    variant: outlined
+    icon: AiOutlineWarning
+  events:
+    onClick:
+      - id: open_status_warning
+        type: CallMethod
+        params:
+          blockId: notif_status_warning
+          method: open
+- id: btn_status_info
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Info
+    color: primary
+    variant: text
+    icon: AiOutlineInfoCircle
+  events:
+    onClick:
+      - id: open_status_info
+        type: CallMethod
+        params:
+          blockId: notif_status_info
+          method: open
+```
+
+```yaml
+- id: notif_place_top_right
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Top Right
+    description: Default placement position.
+    placement: topRight
+- id: notif_place_top_left
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Top Left
+    description: Appears at the top left corner.
+    placement: topLeft
+- id: notif_place_bottom_right
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Bottom Right
+    description: Appears at the bottom right corner.
+    placement: bottomRight
+- id: notif_place_bottom_left
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Bottom Left
+    description: Appears at the bottom left corner.
+    placement: bottomLeft
+- id: btn_place_top_right
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Top Right
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_place_top_right
+        type: CallMethod
+        params:
+          blockId: notif_place_top_right
+          method: open
+- id: btn_place_top_left
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Top Left
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_place_top_left
+        type: CallMethod
+        params:
+          blockId: notif_place_top_left
+          method: open
+- id: btn_place_bottom_right
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Bottom Right
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_place_bottom_right
+        type: CallMethod
+        params:
+          blockId: notif_place_bottom_right
+          method: open
+- id: btn_place_bottom_left
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Bottom Left
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_place_bottom_left
+        type: CallMethod
+        params:
+          blockId: notif_place_bottom_left
+          method: open
+```
+
+```yaml
+- id: notif_dur_short
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Quick Notice
+    description: Disappears in 2 seconds.
+    duration: 2
+- id: notif_dur_default
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Default Duration
+    description: Auto-closes after 4.5 seconds (default).
+- id: notif_dur_long
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Extended Duration
+    description: Stays visible for 10 seconds.
+    duration: 10
+- id: notif_dur_sticky
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: warning
+    title: Persistent
+    description: Will not auto-close (duration 0). Must be dismissed manually.
+    duration: 0
+- id: btn_dur_short
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: 2 seconds
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_dur_short
+        type: CallMethod
+        params:
+          blockId: notif_dur_short
+          method: open
+- id: btn_dur_default
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Default (4.5s)
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_dur_default
+        type: CallMethod
+        params:
+          blockId: notif_dur_default
+          method: open
+- id: btn_dur_long
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: 10 seconds
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_dur_long
+        type: CallMethod
+        params:
+          blockId: notif_dur_long
+          method: open
+- id: btn_dur_sticky
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Sticky (duration 0)
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_dur_sticky
+        type: CallMethod
+        params:
+          blockId: notif_dur_sticky
+          method: open
+```
+
+```yaml
+- id: notif_icon_string
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: success
+    title: Download Complete
+    description: Your file has been downloaded successfully.
+    icon: AiOutlineDownload
+- id: notif_icon_colored
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Starred Item
+    description: Item has been added to your favorites.
+    icon:
+      name: AiOutlineStar
+      color: "#faad14"
+- id: notif_icon_sized
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: warning
+    title: Session Expiring
+    description: Your session will expire in 5 minutes.
+    icon:
+      name: AiOutlineLock
+      color: "#fa8c16"
+      size: 28
+- id: btn_icon_string
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: String Icon
+    color: primary
+    variant: outlined
+    icon: AiOutlineDownload
+  events:
+    onClick:
+      - id: open_icon_string
+        type: CallMethod
+        params:
+          blockId: notif_icon_string
+          method: open
+- id: btn_icon_colored
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Colored Icon
+    color: default
+    variant: outlined
+    icon: AiOutlineStar
+  events:
+    onClick:
+      - id: open_icon_colored
+        type: CallMethod
+        params:
+          blockId: notif_icon_colored
+          method: open
+- id: btn_icon_sized
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Sized Icon
+    color: default
+    variant: outlined
+    icon: AiOutlineLock
+  events:
+    onClick:
+      - id: open_icon_sized
+        type: CallMethod
+        params:
+          blockId: notif_icon_sized
+          method: open
+```
+
+```yaml
+- id: notif_close_icon_string
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Custom Close
+    description: This notification has a custom close icon.
+    closeIcon: AiOutlineCloseSquare
+    duration: 0
+- id: notif_close_icon_styled
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: warning
+    title: Styled Close
+    description: Close icon with custom color and size.
+    closeIcon:
+      name: AiOutlineCloseCircle
+      color: "#ff4d4f"
+      size: 18
+    duration: 0
+- id: notif_close_icon_arrow
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: success
+    title: Arrow Close
+    description: Uses an arrow icon instead of the default close.
+    closeIcon: AiOutlineArrowRight
+    duration: 0
+- id: btn_close_icon_string
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Square Close
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_close_icon_string
+        type: CallMethod
+        params:
+          blockId: notif_close_icon_string
+          method: open
+- id: btn_close_icon_styled
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Styled Close
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_close_icon_styled
+        type: CallMethod
+        params:
+          blockId: notif_close_icon_styled
+          method: open
+- id: btn_close_icon_arrow
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Arrow Close
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_close_icon_arrow
+        type: CallMethod
+        params:
+          blockId: notif_close_icon_arrow
+          method: open
+```
+
+```yaml
+- id: notif_btn_confirm
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Action Required
+    description: Please review and confirm the pending changes.
+    duration: 0
+    button:
+      title: Confirm
+      icon: AiOutlineCheck
+      color: primary
+      variant: solid
+      size: small
+- id: notif_btn_retry
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: error
+    title: Upload Failed
+    description: The file could not be uploaded. Please try again.
+    duration: 0
+    button:
+      title: Retry
+      icon: AiOutlineReload
+      color: danger
+      variant: solid
+      size: small
+- id: notif_btn_undo
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: success
+    title: Item Deleted
+    description: The record has been removed from the database.
+    duration: 0
+    button:
+      title: Undo
+      color: default
+      variant: outlined
+      size: small
+- id: btn_trigger_confirm
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: With Confirm
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: open_btn_confirm
+        type: CallMethod
+        params:
+          blockId: notif_btn_confirm
+          method: open
+- id: btn_trigger_retry
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: With Retry
+    color: danger
+    variant: outlined
+  events:
+    onClick:
+      - id: open_btn_retry
+        type: CallMethod
+        params:
+          blockId: notif_btn_retry
+          method: open
+- id: btn_trigger_undo
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: With Undo
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_btn_undo
+        type: CallMethod
+        params:
+          blockId: notif_btn_undo
+          method: open
+```
+
+```yaml
+- id: notif_top_offset
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Top Offset
+    description: Positioned 80px from the top of the viewport.
+    placement: topRight
+    top: 80
+- id: notif_bottom_offset
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Bottom Offset
+    description: Positioned 80px from the bottom of the viewport.
+    placement: bottomRight
+    bottom: 80
+- id: notif_default_offset
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Default Offset
+    description: Uses the default 24px offset.
+    placement: topRight
+- id: btn_top_offset
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Top 80px
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_top_offset
+        type: CallMethod
+        params:
+          blockId: notif_top_offset
+          method: open
+- id: btn_bottom_offset
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Bottom 80px
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_bottom_offset
+        type: CallMethod
+        params:
+          blockId: notif_bottom_offset
+          method: open
+- id: btn_default_offset
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Default (24px)
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_default_offset
+        type: CallMethod
+        params:
+          blockId: notif_default_offset
+          method: open
+```
+
+```yaml
+- id: notif_html_bold
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: success
+    title: <b>Deployment</b> Complete
+    description: Deployed to <b>production</b>. Visit <a
+      href="https://lowdefy.com">the site</a> to verify.
+- id: notif_html_styled
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: warning
+    title: Maintenance Scheduled
+    description: '<span style="color: #fa8c16; font-weight: bold;">Downtime:</span>
+      Saturday 2:00 AM - 6:00 AM UTC.'
+- id: notif_html_list
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Release Notes
+    description: <ul><li>Fixed login timeout issue</li><li>Added dark mode
+      support</li><li>Improved dashboard performance</li></ul>
+    duration: 0
+- id: btn_html_bold
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Bold and Link
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_html_bold
+        type: CallMethod
+        params:
+          blockId: notif_html_bold
+          method: open
+- id: btn_html_styled
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Styled HTML
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_html_styled
+        type: CallMethod
+        params:
+          blockId: notif_html_styled
+          method: open
+- id: btn_html_list
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: HTML List
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_html_list
+        type: CallMethod
+        params:
+          blockId: notif_html_list
+          method: open
+```
+
+```yaml
+- id: notif_style_border
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: success
+    title: Custom Border
+    description: This notification has a left green border.
+  style:
+    .element:
+      borderLeft: 4px solid
+- id: notif_style_bg
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: warning
+    title: Custom Background
+    description: This notification has a custom background color.
+  style:
+    .element:
+      background: rgba(250, 173, 20, 0.1)
+- id: notif_style_shadow
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Heavy Shadow
+    description: This notification has an elevated shadow.
+  style:
+    .element:
+      boxShadow: 0 6px 24px rgba(0, 0, 0, 0.2)
+- id: btn_style_border
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Left Border
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_style_border
+        type: CallMethod
+        params:
+          blockId: notif_style_border
+          method: open
+- id: btn_style_bg
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom Background
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_style_bg
+        type: CallMethod
+        params:
+          blockId: notif_style_bg
+          method: open
+- id: btn_style_shadow
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Heavy Shadow
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_style_shadow
+        type: CallMethod
+        params:
+          blockId: notif_style_shadow
+          method: open
+```
+
+```yaml
+- id: notif_override_base
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Default Title
+    description: Default notification description.
+- id: btn_override_success
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Override as Success
+    color: primary
+    variant: solid
+    icon: AiOutlineCheckCircle
+  events:
+    onClick:
+      - id: open_override_success
+        type: CallMethod
+        params:
+          blockId: notif_override_base
+          method: open
+          args:
+            - status: success
+              title: Overridden Title
+              description: Status, title, and description overridden at call time.
+- id: btn_override_error
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Override as Error
+    color: danger
+    variant: solid
+    icon: AiOutlineCloseCircle
+  events:
+    onClick:
+      - id: open_override_error
+        type: CallMethod
+        params:
+          blockId: notif_override_base
+          method: open
+          args:
+            - status: error
+              title: Error Override
+              description: This error notification was overridden at call time.
+- id: btn_override_duration
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Override Duration
+    color: default
+    variant: outlined
+    icon: AiOutlineClockCircle
+  events:
+    onClick:
+      - id: open_override_duration
+        type: CallMethod
+        params:
+          blockId: notif_override_base
+          method: open
+          args:
+            - duration: 1
+              title: Quick Flash
+              description: This closes after just 1 second.
+```
+
+```yaml
+- id: notif_events_demo
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Interactive Notification
+    description: Click the notification body or close it to trigger events.
+    duration: 0
+  events:
+    onClick:
+      - id: events_click_msg
+        type: DisplayMessage
+        params:
+          content: Notification body clicked!
+          status: info
+    onClose:
+      - id: events_close_msg
+        type: DisplayMessage
+        params:
+          content: Notification was closed.
+          status: success
+- id: notif_events_close_action
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: warning
+    title: Session Timeout
+    description: Your session is about to expire. Close to extend.
+    duration: 0
+    button:
+      title: Extend Session
+      color: primary
+      variant: solid
+      size: small
+  events:
+    onClose:
+      - id: events_extend_msg
+        type: DisplayMessage
+        params:
+          content: Session extended for 30 minutes.
+          status: success
+- id: notif_events_click_nav
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: success
+    title: New Comment
+    description: Click this notification to view the comment.
+    duration: 8
+  events:
+    onClick:
+      - id: events_nav_msg
+        type: DisplayMessage
+        params:
+          content: Navigating to comments section...
+          status: info
+- id: btn_events_demo
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Interactive
+    color: primary
+    variant: solid
+  events:
+    onClick:
+      - id: open_events_demo
+        type: CallMethod
+        params:
+          blockId: notif_events_demo
+          method: open
+- id: btn_events_close_action
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Session Timeout
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_events_close
+        type: CallMethod
+        params:
+          blockId: notif_events_close_action
+          method: open
+- id: btn_events_click_nav
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Click to Navigate
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_events_click_nav
+        type: CallMethod
+        params:
+          blockId: notif_events_click_nav
+          method: open
+```
+
+```yaml
+- id: notif_css_tailwind
+  type: Notification
+  layout:
+    span: 0
+  class: shadow-2xl
+  properties:
+    status: success
+    title: Tailwind Shadow
+    description: This notification uses a Tailwind shadow-2xl class.
+- id: notif_css_rounded
+  type: Notification
+  layout:
+    span: 0
+  class: rounded-xl
+  properties:
+    status: info
+    title: Rounded Corners
+    description: Notification with extra-rounded corners via Tailwind.
+- id: notif_css_inline
+  type: Notification
+  layout:
+    span: 0
+  style:
+    .element:
+      borderRadius: 12
+      border: 2px solid
+  properties:
+    status: info
+    title: Inline Style
+    description: This notification uses inline style with a blue border.
+- id: btn_css_tailwind
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Tailwind Shadow
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_css_tailwind
+        type: CallMethod
+        params:
+          blockId: notif_css_tailwind
+          method: open
+- id: btn_css_rounded
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Rounded Corners
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_css_rounded
+        type: CallMethod
+        params:
+          blockId: notif_css_rounded
+          method: open
+- id: btn_css_inline
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Inline Style
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_css_inline
+        type: CallMethod
+        params:
+          blockId: notif_css_inline
+          method: open
+```
+
+```yaml
+- id: notif_theme_wide
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Wide Notification
+    description: This notification is wider than the default 384px.
+    theme:
+      width: 500
+- id: notif_theme_zindex
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: warning
+    title: High Z-Index
+    description: This notification has an elevated z-index of 2000.
+    theme:
+      zIndexPopup: 2000
+- id: notif_theme_progress
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: success
+    title: Custom Progress Bar
+    description: The auto-close progress bar has a custom gradient.
+    duration: 8
+    theme:
+      progressBg: "linear-gradient(to right, #52c41a, #1890ff)"
+- id: notif_theme_combined
+  type: Notification
+  layout:
+    span: 0
+  properties:
+    status: info
+    title: Combined Tokens
+    description: Wide notification with custom progress bar.
+    duration: 6
+    theme:
+      width: 450
+      progressBg: "linear-gradient(to right, #722ed1, #eb2f96)"
+- id: btn_theme_wide
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Wide (500px)
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_theme_wide
+        type: CallMethod
+        params:
+          blockId: notif_theme_wide
+          method: open
+- id: btn_theme_zindex
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Z-Index 2000
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_theme_zindex
+        type: CallMethod
+        params:
+          blockId: notif_theme_zindex
+          method: open
+- id: btn_theme_progress
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Custom Progress
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_theme_progress
+        type: CallMethod
+        params:
+          blockId: notif_theme_progress
+          method: open
+- id: btn_theme_combined
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Combined Tokens
+    color: default
+    variant: outlined
+  events:
+    onClick:
+      - id: open_theme_combined
+        type: CallMethod
+        params:
+          blockId: notif_theme_combined
+          method: open
+```
+
+**Customer:** Sarah Johnson
+**Items:** 3 items totaling $247.50
+**Status:** Pending fulfillment
+
+```yaml
+- id: order_card
+  type: Card
+  properties:
+    title: Order
+    size: small
+  blocks:
+    - id: order_status_text
+      type: Markdown
+      properties:
+        content: |
+          **Customer:** Sarah Johnson
+          **Items:** 3 items totaling $247.50
+          **Status:** Pending fulfillment
+    - id: notif_order_shipped
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: Order Shipped
+        description: "Order #12847 has been shipped. Tracking number:
+          <b>1Z999AA10123456784</b>"
+        icon: AiOutlineRocket
+        duration: 0
+        button:
+          title: View Tracking
+          color: primary
+          variant: solid
+          size: small
+      events:
+        onClose:
+          - id: order_close_msg
+            type: DisplayMessage
+            params:
+              content: Notification dismissed.
+              status: info
+    - id: notif_order_cancelled
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: error
+        title: Order Cancelled
+        description: "Order #12847 has been cancelled. Refund of $247.50 initiated."
+        icon: AiOutlineStop
+        duration: 0
+    - id: order_actions
+      type: Box
+      layout:
+        gap: 8
+        justify: flex-end
+      blocks:
+        - id: btn_order_cancel
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Cancel Order
+            color: danger
+            variant: outlined
+            icon: AiOutlineStop
+          events:
+            onClick:
+              - id: order_cancel_notif
+                type: CallMethod
+                params:
+                  blockId: notif_order_cancelled
+                  method: open
+        - id: btn_order_ship
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Mark as Shipped
+            color: primary
+            variant: solid
+            icon: AiOutlineRocket
+          events:
+            onClick:
+              - id: order_ship_notif
+                type: CallMethod
+                params:
+                  blockId: notif_order_shipped
+                  method: open
+```
+
+Monitor system health and receive real-time alerts. Click a button below to simulate different alert types.
+
+```yaml
+- id: alerts_card
+  type: Card
+  properties:
+    title: System Monitor
+    size: small
+  blocks:
+    - id: alerts_description
+      type: Markdown
+      properties:
+        content: >
+          Monitor system health and receive real-time alerts. Click a button
+          below to simulate different alert types.
+    - id: notif_alert_cpu
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: High CPU Usage
+        description: CPU usage has exceeded <b>90%</b> on server <b>web-prod-03</b>.
+          Consider scaling up or optimizing workloads.
+        icon:
+          name: AiOutlineDashboard
+          color: "#fa8c16"
+        duration: 0
+        placement: topRight
+        button:
+          title: View Details
+          color: primary
+          variant: outlined
+          size: small
+      events:
+        onClick:
+          - id: alert_cpu_click
+            type: DisplayMessage
+            params:
+              content: Opening server dashboard...
+              status: info
+    - id: notif_alert_deploy
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: Deployment Successful
+        description: Version <b>2.4.1</b> deployed to production. All health checks passing.
+        icon: AiOutlineCheckCircle
+        duration: 8
+      events:
+        onClose:
+          - id: alert_deploy_close
+            type: DisplayMessage
+            params:
+              content: Deployment alert acknowledged.
+              status: success
+    - id: notif_alert_security
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: error
+        title: Security Alert
+        description: Multiple failed login attempts detected from IP
+          <b>192.168.1.42</b>. Account temporarily locked.
+        icon:
+          name: AiOutlineLock
+          color: "#ff4d4f"
+        duration: 0
+        button:
+          title: Block IP
+          color: danger
+          variant: solid
+          size: small
+      events:
+        onClose:
+          - id: alert_security_close
+            type: SetState
+            params:
+              securityAlertDismissed: true
+    - id: alerts_actions
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: btn_alert_cpu
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: CPU Warning
+            color: default
+            variant: outlined
+            icon: AiOutlineDashboard
+          events:
+            onClick:
+              - id: trigger_alert_cpu
+                type: CallMethod
+                params:
+                  blockId: notif_alert_cpu
+                  method: open
+        - id: btn_alert_deploy
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Deploy Success
+            color: primary
+            variant: outlined
+            icon: AiOutlineCheckCircle
+          events:
+            onClick:
+              - id: trigger_alert_deploy
+                type: CallMethod
+                params:
+                  blockId: notif_alert_deploy
+                  method: open
+        - id: btn_alert_security
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Security Alert
+            color: danger
+            variant: outlined
+            icon: AiOutlineLock
+          events:
+            onClick:
+              - id: trigger_alert_security
+                type: CallMethod
+                params:
+                  blockId: notif_alert_security
+                  method: open
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `bottom` | number | `24` | Distance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels). |
+| `button` | object | - | Button object to customized the close button. Triggers onClose event when clicked. |
+| `description` | string | - | The content of notification box - supports html. |
+| `duration` | number | `4.5` | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically. |
+| `icon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block to customize notification icon. |
+| `closeIcon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block to customize close icon. |
+| `title` | string | - | The title of notification box - supports html. |
+| `placement` | string | `"topRight"` | Position of Notification. Enum: `topLeft`, `topRight`, `bottomLeft`, `bottomRight`. |
+| `top` | number | `24` | Distance from the top of the viewport, when placement is topRight or topLeft (unit: pixels). |
+| `status` | string | - | Notification status type. Enum: `success`, `error`, `info`, `warning`. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design notification tokens](https://ant.design/components/notification#design-token). |
+| `theme.zIndexPopup` | number | `1100` | Z-index of the notification popup. |
+| `theme.width` | number | `384` | Width of the notification box. |
+| `theme.progressBg` | string | - | Background gradient for the auto-close progress bar. Defaults to a gradient from colorPrimaryBorderHover to colorPrimary. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onClose` | \- | Trigger actions when notification is closed. |
+| `onClick` | \- | Trigger actions when notification is clicked. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Notification element. |
+| `/closeIcon` | The close icon in the Notification. |
+| `/icon` | The icon in the Notification. |
+
+No slots defined.