@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/container-blocks/tabs.md

@@ -0,0 +1,1718 @@
+# Tabs
+
+Tab panels with card, editable, and positioned variants.
+
+Personal Information
+
+Manage your personal information, display name, and avatar. Changes are saved automatically across all your connected devices.
+
+Preferences
+
+Configure application preferences, notification settings, and keyboard shortcuts. These settings apply to your current workspace.
+
+Billing Details
+
+View your current plan, payment history, and update billing information. Your next invoice is scheduled for the first of next month.
+
+```yaml
+- id: basic_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: profile
+        title: Profile
+      - key: settings
+        title: Settings
+      - key: billing
+        title: Billing
+  slots:
+    profile:
+      blocks:
+        - id: basic_profile_title
+          type: Title
+          properties:
+            content: Personal Information
+            level: 4
+        - id: basic_profile_content
+          type: Paragraph
+          properties:
+            content: Manage your personal information, display name, and avatar. Changes are
+              saved automatically across all your connected devices.
+    settings:
+      blocks:
+        - id: basic_settings_title
+          type: Title
+          properties:
+            content: Preferences
+            level: 4
+        - id: basic_settings_content
+          type: Paragraph
+          properties:
+            content: Configure application preferences, notification settings, and keyboard
+              shortcuts. These settings apply to your current workspace.
+    billing:
+      blocks:
+        - id: basic_billing_title
+          type: Title
+          properties:
+            content: Billing Details
+            level: 4
+        - id: basic_billing_content
+          type: Paragraph
+          properties:
+            content: View your current plan, payment history, and update billing
+              information. Your next invoice is scheduled for the first of next
+              month.
+```
+
+Dashboard overview showing key metrics and recent activity for your project.
+
+Conversion funnel progress for the current quarter.
+
+Generate and download reports for weekly, monthly, and quarterly performance summaries. Select a date range to get started.
+
+Export your data in CSV, JSON, or PDF format. Scheduled exports run daily at midnight UTC.
+
+```yaml
+- id: card_tabs
+  type: Tabs
+  properties:
+    tabType: card
+    tabs:
+      - key: overview
+        title: Overview
+      - key: analytics
+        title: Analytics
+      - key: reports
+        title: Reports
+      - key: exports
+        title: Exports
+  slots:
+    overview:
+      blocks:
+        - id: card_overview_row
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: card_stat_users
+              type: Statistic
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Active Users
+                value: 1284
+            - id: card_stat_sessions
+              type: Statistic
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Sessions Today
+                value: 3567
+            - id: card_stat_revenue
+              type: Statistic
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Revenue
+                value: 48250
+                prefix: $
+        - id: card_overview_content
+          type: Paragraph
+          properties:
+            content: Dashboard overview showing key metrics and recent activity for your
+              project.
+    analytics:
+      blocks:
+        - id: card_analytics_progress_label
+          type: Paragraph
+          properties:
+            content: Conversion funnel progress for the current quarter.
+        - id: card_analytics_progress
+          type: Progress
+          properties:
+            percent: 72
+            status: active
+    reports:
+      blocks:
+        - id: card_reports_content
+          type: Paragraph
+          properties:
+            content: Generate and download reports for weekly, monthly, and quarterly
+              performance summaries. Select a date range to get started.
+    exports:
+      blocks:
+        - id: card_exports_content
+          type: Paragraph
+          properties:
+            content: Export your data in CSV, JSON, or PDF format. Scheduled exports run
+              daily at midnight UTC.
+```
+
+**Top (default):**
+
+Tabs positioned at the top are the most common layout, suitable for primary navigation within a section.
+
+This is the second tab in the top-positioned layout.
+
+This is the third tab in the top-positioned layout.
+
+**Bottom:**
+
+You have 12 unread messages. The most recent is from the engineering team regarding deployment schedules.
+
+Your last sent message was a project status update to the stakeholders group.
+
+You have 3 saved drafts including the quarterly review document and team feedback form.
+
+**Start:**
+
+General application settings including workspace name, default language, and timezone configuration.
+
+Two-factor authentication, session management, and login history for your account.
+
+Connect with third-party services like Slack, GitHub, Jira, and Google Workspace.
+
+Manage API keys for programmatic access. Create, revoke, and monitor usage of your tokens.
+
+**End:**
+
+Premium wireless headphones with active noise cancellation, 30-hour battery life, and comfortable over-ear design.
+
+4.7 out of 5 stars based on 2,340 reviews. Customers praise the sound quality and battery life.
+
+Free standard shipping (3-5 business days). Express shipping available for $9.99 (1-2 business days).
+
+```yaml
+- id: pos_top_label
+  type: Markdown
+  properties:
+    content: "**Top (default):**"
+- id: pos_top_tabs
+  type: Tabs
+  properties:
+    tabPlacement: top
+    tabs:
+      - key: pos_top_first
+        title: First
+      - key: pos_top_second
+        title: Second
+      - key: pos_top_third
+        title: Third
+  slots:
+    pos_top_first:
+      blocks:
+        - id: pos_top_first_content
+          type: Paragraph
+          properties:
+            content: Tabs positioned at the top are the most common layout, suitable for
+              primary navigation within a section.
+    pos_top_second:
+      blocks:
+        - id: pos_top_second_content
+          type: Paragraph
+          properties:
+            content: This is the second tab in the top-positioned layout.
+    pos_top_third:
+      blocks:
+        - id: pos_top_third_content
+          type: Paragraph
+          properties:
+            content: This is the third tab in the top-positioned layout.
+- id: pos_bottom_label
+  type: Markdown
+  properties:
+    content: "**Bottom:**"
+- id: pos_bottom_tabs
+  type: Tabs
+  properties:
+    tabPlacement: bottom
+    tabs:
+      - key: pos_bot_inbox
+        title: Inbox
+      - key: pos_bot_sent
+        title: Sent
+      - key: pos_bot_drafts
+        title: Drafts
+  slots:
+    pos_bot_inbox:
+      blocks:
+        - id: pos_bot_inbox_content
+          type: Paragraph
+          properties:
+            content: You have 12 unread messages. The most recent is from the engineering
+              team regarding deployment schedules.
+    pos_bot_sent:
+      blocks:
+        - id: pos_bot_sent_content
+          type: Paragraph
+          properties:
+            content: Your last sent message was a project status update to the stakeholders
+              group.
+    pos_bot_drafts:
+      blocks:
+        - id: pos_bot_drafts_content
+          type: Paragraph
+          properties:
+            content: You have 3 saved drafts including the quarterly review document and
+              team feedback form.
+- id: pos_start_label
+  type: Markdown
+  properties:
+    content: "**Start:**"
+- id: pos_left_tabs
+  type: Tabs
+  properties:
+    tabPlacement: start
+    tabs:
+      - key: pos_left_general
+        title: General
+      - key: pos_left_security
+        title: Security
+      - key: pos_left_integrations
+        title: Integrations
+      - key: pos_left_api
+        title: API Keys
+  slots:
+    pos_left_general:
+      blocks:
+        - id: pos_left_general_content
+          type: Paragraph
+          properties:
+            content: General application settings including workspace name, default
+              language, and timezone configuration.
+    pos_left_security:
+      blocks:
+        - id: pos_left_security_content
+          type: Paragraph
+          properties:
+            content: Two-factor authentication, session management, and login history for
+              your account.
+    pos_left_integrations:
+      blocks:
+        - id: pos_left_integrations_content
+          type: Paragraph
+          properties:
+            content: Connect with third-party services like Slack, GitHub, Jira, and Google
+              Workspace.
+    pos_left_api:
+      blocks:
+        - id: pos_left_api_content
+          type: Paragraph
+          properties:
+            content: Manage API keys for programmatic access. Create, revoke, and monitor
+              usage of your tokens.
+- id: pos_end_label
+  type: Markdown
+  properties:
+    content: "**End:**"
+- id: pos_right_tabs
+  type: Tabs
+  properties:
+    tabPlacement: end
+    tabs:
+      - key: pos_right_desc
+        title: Description
+      - key: pos_right_reviews
+        title: Reviews
+      - key: pos_right_shipping
+        title: Shipping
+  slots:
+    pos_right_desc:
+      blocks:
+        - id: pos_right_desc_content
+          type: Paragraph
+          properties:
+            content: Premium wireless headphones with active noise cancellation, 30-hour
+              battery life, and comfortable over-ear design.
+    pos_right_reviews:
+      blocks:
+        - id: pos_right_reviews_content
+          type: Paragraph
+          properties:
+            content: 4.7 out of 5 stars based on 2,340 reviews. Customers praise the sound
+              quality and battery life.
+    pos_right_shipping:
+      blocks:
+        - id: pos_right_shipping_content
+          type: Paragraph
+          properties:
+            content: Free standard shipping (3-5 business days). Express shipping available
+              for $9.99 (1-2 business days).
+```
+
+**Small:**
+
+Compact tabs for dense interfaces where screen space is at a premium. Ideal for side panels and secondary navigation.
+
+Technical specifications displayed in a compact view.
+
+Internal notes and comments in small tab format.
+
+**Default:**
+
+Standard-sized tabs for most use cases. Provides a balanced reading experience and comfortable click targets.
+
+Technical specifications displayed in standard tab format.
+
+Internal notes and comments in default tab format.
+
+**Large:**
+
+Large tabs for prominent navigation areas and primary page sections. Gives a spacious, easy-to-read layout.
+
+Technical specifications displayed with large, prominent tab headers.
+
+Internal notes and comments with large tab format for emphasis.
+
+```yaml
+- id: size_small_label
+  type: Markdown
+  properties:
+    content: "**Small:**"
+- id: size_small_tabs
+  type: Tabs
+  properties:
+    size: small
+    tabs:
+      - key: sm_details
+        title: Details
+      - key: sm_specs
+        title: Specifications
+      - key: sm_notes
+        title: Notes
+  slots:
+    sm_details:
+      blocks:
+        - id: sm_details_content
+          type: Paragraph
+          properties:
+            content: Compact tabs for dense interfaces where screen space is at a premium.
+              Ideal for side panels and secondary navigation.
+    sm_specs:
+      blocks:
+        - id: sm_specs_content
+          type: Paragraph
+          properties:
+            content: Technical specifications displayed in a compact view.
+    sm_notes:
+      blocks:
+        - id: sm_notes_content
+          type: Paragraph
+          properties:
+            content: Internal notes and comments in small tab format.
+- id: size_default_label
+  type: Markdown
+  properties:
+    content: "**Default:**"
+- id: size_default_tabs
+  type: Tabs
+  properties:
+    size: default
+    tabs:
+      - key: def_details
+        title: Details
+      - key: def_specs
+        title: Specifications
+      - key: def_notes
+        title: Notes
+  slots:
+    def_details:
+      blocks:
+        - id: def_details_content
+          type: Paragraph
+          properties:
+            content: Standard-sized tabs for most use cases. Provides a balanced reading
+              experience and comfortable click targets.
+    def_specs:
+      blocks:
+        - id: def_specs_content
+          type: Paragraph
+          properties:
+            content: Technical specifications displayed in standard tab format.
+    def_notes:
+      blocks:
+        - id: def_notes_content
+          type: Paragraph
+          properties:
+            content: Internal notes and comments in default tab format.
+- id: size_large_label
+  type: Markdown
+  properties:
+    content: "**Large:**"
+- id: size_large_tabs
+  type: Tabs
+  properties:
+    size: large
+    tabs:
+      - key: lg_details
+        title: Details
+      - key: lg_specs
+        title: Specifications
+      - key: lg_notes
+        title: Notes
+  slots:
+    lg_details:
+      blocks:
+        - id: lg_details_content
+          type: Paragraph
+          properties:
+            content: Large tabs for prominent navigation areas and primary page sections.
+              Gives a spacious, easy-to-read layout.
+    lg_specs:
+      blocks:
+        - id: lg_specs_content
+          type: Paragraph
+          properties:
+            content: Technical specifications displayed with large, prominent tab headers.
+    lg_notes:
+      blocks:
+        - id: lg_notes_content
+          type: Paragraph
+          properties:
+            content: Internal notes and comments with large tab format for emphasis.
+```
+
+**Small card:**
+
+Small card tabs are compact and fit well in tight layouts or secondary navigation areas.
+
+Second tab of the small card variant.
+
+Third tab of the small card variant.
+
+**Default card:**
+
+Default card tabs provide a standard raised panel appearance, commonly used for content organization.
+
+Second tab of the default card variant.
+
+Third tab of the default card variant.
+
+**Large card:**
+
+Large card tabs have more padding and larger font, making them ideal for primary dashboard navigation.
+
+Second tab of the large card variant.
+
+Third tab of the large card variant.
+
+```yaml
+- id: card_sm_label
+  type: Markdown
+  properties:
+    content: "**Small card:**"
+- id: card_small_tabs
+  type: Tabs
+  properties:
+    tabType: card
+    size: small
+    tabs:
+      - key: csm_tab1
+        title: Tab 1
+      - key: csm_tab2
+        title: Tab 2
+      - key: csm_tab3
+        title: Tab 3
+  slots:
+    csm_tab1:
+      blocks:
+        - id: csm_tab1_content
+          type: Paragraph
+          properties:
+            content: Small card tabs are compact and fit well in tight layouts or secondary
+              navigation areas.
+    csm_tab2:
+      blocks:
+        - id: csm_tab2_content
+          type: Paragraph
+          properties:
+            content: Second tab of the small card variant.
+    csm_tab3:
+      blocks:
+        - id: csm_tab3_content
+          type: Paragraph
+          properties:
+            content: Third tab of the small card variant.
+- id: card_def_label
+  type: Markdown
+  properties:
+    content: "**Default card:**"
+- id: card_default_tabs
+  type: Tabs
+  properties:
+    tabType: card
+    size: default
+    tabs:
+      - key: cdf_tab1
+        title: Tab 1
+      - key: cdf_tab2
+        title: Tab 2
+      - key: cdf_tab3
+        title: Tab 3
+  slots:
+    cdf_tab1:
+      blocks:
+        - id: cdf_tab1_content
+          type: Paragraph
+          properties:
+            content: Default card tabs provide a standard raised panel appearance, commonly
+              used for content organization.
+    cdf_tab2:
+      blocks:
+        - id: cdf_tab2_content
+          type: Paragraph
+          properties:
+            content: Second tab of the default card variant.
+    cdf_tab3:
+      blocks:
+        - id: cdf_tab3_content
+          type: Paragraph
+          properties:
+            content: Third tab of the default card variant.
+- id: card_lg_label
+  type: Markdown
+  properties:
+    content: "**Large card:**"
+- id: card_large_tabs
+  type: Tabs
+  properties:
+    tabType: card
+    size: large
+    tabs:
+      - key: clg_tab1
+        title: Tab 1
+      - key: clg_tab2
+        title: Tab 2
+      - key: clg_tab3
+        title: Tab 3
+  slots:
+    clg_tab1:
+      blocks:
+        - id: clg_tab1_content
+          type: Paragraph
+          properties:
+            content: Large card tabs have more padding and larger font, making them ideal
+              for primary dashboard navigation.
+    clg_tab2:
+      blocks:
+        - id: clg_tab2_content
+          type: Paragraph
+          properties:
+            content: Second tab of the large card variant.
+    clg_tab3:
+      blocks:
+        - id: clg_tab3_content
+          type: Paragraph
+          properties:
+            content: Third tab of the large card variant.
+```
+
+Welcome to the dashboard. Here you can view recent activity, quick statistics, and announcements from your team.
+
+Application configuration, theme settings, and advanced options. Changes take effect immediately.
+
+Monthly target progress at 85%. On track for completion by end of quarter.
+
+```yaml
+- id: icon_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: icon_home
+        title: Home
+        icon: AiOutlineHome
+      - key: icon_users
+        title: Users
+        icon: AiOutlineTeam
+      - key: icon_settings
+        title: Settings
+        icon: AiOutlineSetting
+      - key: icon_chart
+        title: Analytics
+        icon: AiOutlineBarChart
+  slots:
+    icon_home:
+      blocks:
+        - id: icon_home_content
+          type: Paragraph
+          properties:
+            content: Welcome to the dashboard. Here you can view recent activity, quick
+              statistics, and announcements from your team.
+    icon_users:
+      blocks:
+        - id: icon_users_desc
+          type: Descriptions
+          properties:
+            bordered: true
+            size: small
+            items:
+              - label: Total Members
+                value: "24"
+              - label: Active Now
+                value: "8"
+              - label: Pending Invites
+                value: "3"
+    icon_settings:
+      blocks:
+        - id: icon_settings_content
+          type: Paragraph
+          properties:
+            content: Application configuration, theme settings, and advanced options.
+              Changes take effect immediately.
+    icon_chart:
+      blocks:
+        - id: icon_chart_progress
+          type: Progress
+          properties:
+            percent: 85
+            status: active
+        - id: icon_chart_note
+          type: Paragraph
+          properties:
+            content: Monthly target progress at 85%. On track for completion by end of
+              quarter.
+```
+
+> 3 Deprecation Warnings
+
+```yaml
+- id: custom_icon_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: ci_success
+        title: Passed
+        icon:
+          name: AiOutlineCheckCircle
+          color: "#52c41a"
+      - key: ci_warning
+        title: Warnings
+        icon:
+          name: AiOutlineWarning
+          color: "#faad14"
+      - key: ci_error
+        title: Failed
+        icon:
+          name: AiOutlineCloseCircle
+          color: "#ff4d4f"
+  slots:
+    ci_success:
+      blocks:
+        - id: ci_success_result
+          type: Result
+          properties:
+            status: success
+            title: All Tests Passed
+            subTitle: 142 tests completed successfully in 4.2 seconds.
+    ci_warning:
+      blocks:
+        - id: ci_warning_alert
+          type: Alert
+          properties:
+            message: 3 Deprecation Warnings
+            description: Some test suites use deprecated assertion methods. Please update to
+              the latest API.
+            type: warning
+            showIcon: true
+    ci_error:
+      blocks:
+        - id: ci_error_result
+          type: Result
+          properties:
+            status: error
+            title: 2 Tests Failed
+            subTitle: Check the error log below for details on the failing assertions.
+```
+
+This tab is accessible and contains normal content. Users can freely navigate to this section.
+
+This content is not yet available. The tab is disabled to indicate an upcoming feature.
+
+> Beta Feature
+
+This section requires an upgraded subscription plan to access.
+
+```yaml
+- id: disabled_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: dis_active
+        title: Active
+      - key: dis_coming_soon
+        title: Coming Soon
+        disabled: true
+      - key: dis_beta
+        title: Beta
+      - key: dis_locked
+        title: Locked
+        disabled: true
+  slots:
+    dis_active:
+      blocks:
+        - id: dis_active_content
+          type: Paragraph
+          properties:
+            content: This tab is accessible and contains normal content. Users can freely
+              navigate to this section.
+    dis_coming_soon:
+      blocks:
+        - id: dis_coming_soon_content
+          type: Paragraph
+          properties:
+            content: This content is not yet available. The tab is disabled to indicate an
+              upcoming feature.
+    dis_beta:
+      blocks:
+        - id: dis_beta_alert
+          type: Alert
+          properties:
+            message: Beta Feature
+            description: This feature is currently in beta. Some functionality may be
+              incomplete or change without notice.
+            type: info
+            showIcon: true
+    dis_locked:
+      blocks:
+        - id: dis_locked_content
+          type: Paragraph
+          properties:
+            content: This section requires an upgraded subscription plan to access.
+```
+
+This is the first tab. It is not active by default because defaultActiveKey is set to the second tab.
+
+> This tab is active by default
+
+This is the third tab with regular content.
+
+```yaml
+- id: default_key_tabs
+  type: Tabs
+  properties:
+    defaultActiveKey: dk_second
+    tabs:
+      - key: dk_first
+        title: First
+      - key: dk_second
+        title: Second (Default)
+      - key: dk_third
+        title: Third
+  slots:
+    dk_first:
+      blocks:
+        - id: dk_first_content
+          type: Paragraph
+          properties:
+            content: This is the first tab. It is not active by default because
+              defaultActiveKey is set to the second tab.
+    dk_second:
+      blocks:
+        - id: dk_second_content
+          type: Alert
+          properties:
+            message: This tab is active by default
+            description: The defaultActiveKey property is set to "dk_second", so this tab is
+              shown when the component first renders.
+            type: success
+            showIcon: true
+    dk_third:
+      blocks:
+        - id: dk_third_content
+          type: Paragraph
+          properties:
+            content: This is the third tab with regular content.
+```
+
+Browse your uploaded documents. Supported formats include PDF, DOCX, TXT, and Markdown files. Use the Upload button in the tab bar to add new files.
+
+View your image gallery. Supports JPEG, PNG, SVG, and WebP formats up to 10MB each.
+
+Your video library. Supports MP4, WebM, and MOV formats. Maximum file size is 500MB.
+
+```yaml
+- id: extra_tabs
+  type: Tabs
+  properties:
+    extraAreaKey: extra_area
+    tabs:
+      - key: extra_documents
+        title: Documents
+      - key: extra_images
+        title: Images
+      - key: extra_videos
+        title: Videos
+  slots:
+    extra_area:
+      blocks:
+        - id: extra_area_button
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Upload
+            icon: AiOutlineUpload
+            color: primary
+            variant: solid
+            size: small
+    extra_documents:
+      blocks:
+        - id: extra_documents_content
+          type: Paragraph
+          properties:
+            content: Browse your uploaded documents. Supported formats include PDF, DOCX,
+              TXT, and Markdown files. Use the Upload button in the tab bar to
+              add new files.
+    extra_images:
+      blocks:
+        - id: extra_images_content
+          type: Paragraph
+          properties:
+            content: View your image gallery. Supports JPEG, PNG, SVG, and WebP formats up
+              to 10MB each.
+    extra_videos:
+      blocks:
+        - id: extra_videos_content
+          type: Paragraph
+          properties:
+            content: Your video library. Supports MP4, WebM, and MOV formats. Maximum file
+              size is 500MB.
+```
+
+Quarterly target progress
+
+> 2 open positions
+
+Recent Activity
+
+10:42 AM - Sarah merged pull request #247 into main branch.
+
+09:15 AM - James deployed v2.4.1 to production environment.
+
+Yesterday - Alex created 3 new issues in the backlog tracker.
+
+```yaml
+- id: rich_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: rich_dashboard
+        title: Dashboard
+        icon: AiOutlineDashboard
+      - key: rich_team
+        title: Team
+        icon: AiOutlineTeam
+      - key: rich_activity
+        title: Activity
+        icon: AiOutlineHistory
+  slots:
+    rich_dashboard:
+      blocks:
+        - id: rich_dash_stats
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: rich_stat_1
+              type: Statistic
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Total Revenue
+                value: 126560
+                prefix: $
+                precision: 2
+            - id: rich_stat_2
+              type: Statistic
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Active Users
+                value: 8846
+            - id: rich_stat_3
+              type: Statistic
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Completion Rate
+                value: 93.2
+                suffix: "%"
+        - id: rich_dash_divider
+          type: Divider
+        - id: rich_dash_progress_label
+          type: Paragraph
+          properties:
+            content: Quarterly target progress
+        - id: rich_dash_progress
+          type: Progress
+          properties:
+            percent: 78
+            status: active
+    rich_team:
+      blocks:
+        - id: rich_team_desc
+          type: Descriptions
+          properties:
+            bordered: true
+            column: 2
+            items:
+              - label: Engineering
+                value: 12 members
+              - label: Design
+                value: 5 members
+              - label: Product
+                value: 4 members
+              - label: QA
+                value: 3 members
+        - id: rich_team_divider
+          type: Divider
+        - id: rich_team_note
+          type: Alert
+          properties:
+            message: 2 open positions
+            description: Senior Backend Engineer and Product Designer roles are currently
+              hiring.
+            type: info
+            showIcon: true
+    rich_activity:
+      blocks:
+        - id: rich_activity_title
+          type: Title
+          properties:
+            content: Recent Activity
+            level: 5
+        - id: rich_activity_item_1
+          type: Paragraph
+          properties:
+            content: "10:42 AM - Sarah merged pull request #247 into main branch."
+        - id: rich_activity_divider_1
+          type: Divider
+          properties:
+            dashed: true
+        - id: rich_activity_item_2
+          type: Paragraph
+          properties:
+            content: 09:15 AM - James deployed v2.4.1 to production environment.
+        - id: rich_activity_divider_2
+          type: Divider
+          properties:
+            dashed: true
+        - id: rich_activity_item_3
+          type: Paragraph
+          properties:
+            content: Yesterday - Alex created 3 new issues in the backlog tracker.
+```
+
+January report - Q1 kickoff with team planning sessions and annual goal setting. Revenue target set at $1.2M.
+
+February report - Sprint planning completed. 3 new team members onboarded. Infrastructure migration started.
+
+March report - Q1 close. Revenue hit 108% of target. Product launch scheduled for April.
+
+April report - Product v2.0 launched successfully. 500 new signups in the first week.
+
+May report - Customer feedback collected and prioritized. Feature roadmap updated for Q3.
+
+June report - Q2 close. Revenue exceeded targets by 15%. Team offsite and retrospective completed.
+
+July report - H2 planning underway. Engineering team focused on performance optimizations.
+
+August report - Beta testing for v3.0 started with 50 partner organizations.
+
+September report - Q3 close. Beta feedback incorporated. Security audit completed with no critical findings.
+
+October report - v3.0 released to general availability. Conference presentation at TechSummit.
+
+November report - Black Friday promotion drove 200% increase in signups. Support team scaled up.
+
+December report - Year-end review. Annual revenue target exceeded by 22%. Holiday code freeze in effect.
+
+```yaml
+- id: scroll_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: scroll_jan
+        title: January
+      - key: scroll_feb
+        title: February
+      - key: scroll_mar
+        title: March
+      - key: scroll_apr
+        title: April
+      - key: scroll_may
+        title: May
+      - key: scroll_jun
+        title: June
+      - key: scroll_jul
+        title: July
+      - key: scroll_aug
+        title: August
+      - key: scroll_sep
+        title: September
+      - key: scroll_oct
+        title: October
+      - key: scroll_nov
+        title: November
+      - key: scroll_dec
+        title: December
+  slots:
+    scroll_jan:
+      blocks:
+        - id: scroll_jan_content
+          type: Paragraph
+          properties:
+            content: January report - Q1 kickoff with team planning sessions and annual goal
+              setting. Revenue target set at $1.2M.
+    scroll_feb:
+      blocks:
+        - id: scroll_feb_content
+          type: Paragraph
+          properties:
+            content: February report - Sprint planning completed. 3 new team members
+              onboarded. Infrastructure migration started.
+    scroll_mar:
+      blocks:
+        - id: scroll_mar_content
+          type: Paragraph
+          properties:
+            content: March report - Q1 close. Revenue hit 108% of target. Product launch
+              scheduled for April.
+    scroll_apr:
+      blocks:
+        - id: scroll_apr_content
+          type: Paragraph
+          properties:
+            content: April report - Product v2.0 launched successfully. 500 new signups in
+              the first week.
+    scroll_may:
+      blocks:
+        - id: scroll_may_content
+          type: Paragraph
+          properties:
+            content: May report - Customer feedback collected and prioritized. Feature
+              roadmap updated for Q3.
+    scroll_jun:
+      blocks:
+        - id: scroll_jun_content
+          type: Paragraph
+          properties:
+            content: June report - Q2 close. Revenue exceeded targets by 15%. Team offsite
+              and retrospective completed.
+    scroll_jul:
+      blocks:
+        - id: scroll_jul_content
+          type: Paragraph
+          properties:
+            content: July report - H2 planning underway. Engineering team focused on
+              performance optimizations.
+    scroll_aug:
+      blocks:
+        - id: scroll_aug_content
+          type: Paragraph
+          properties:
+            content: August report - Beta testing for v3.0 started with 50 partner
+              organizations.
+    scroll_sep:
+      blocks:
+        - id: scroll_sep_content
+          type: Paragraph
+          properties:
+            content: September report - Q3 close. Beta feedback incorporated. Security audit
+              completed with no critical findings.
+    scroll_oct:
+      blocks:
+        - id: scroll_oct_content
+          type: Paragraph
+          properties:
+            content: October report - v3.0 released to general availability. Conference
+              presentation at TechSummit.
+    scroll_nov:
+      blocks:
+        - id: scroll_nov_content
+          type: Paragraph
+          properties:
+            content: November report - Black Friday promotion drove 200% increase in
+              signups. Support team scaled up.
+    scroll_dec:
+      blocks:
+        - id: scroll_dec_content
+          type: Paragraph
+          properties:
+            content: December report - Year-end review. Annual revenue target exceeded by
+              22%. Holiday code freeze in effect.
+```
+
+Configure which events trigger notifications. Choose between email, push, or in-app delivery for each category.
+
+Customize your visual preferences including theme mode, accent color, font size, and compact layout options.
+
+> Privacy Settings
+
+```yaml
+- id: left_card_tabs
+  type: Tabs
+  properties:
+    tabType: card
+    tabPlacement: start
+    tabs:
+      - key: lc_account
+        title: Account
+      - key: lc_notifications
+        title: Notifications
+      - key: lc_appearance
+        title: Appearance
+      - key: lc_privacy
+        title: Privacy
+  slots:
+    lc_account:
+      blocks:
+        - id: lc_account_desc
+          type: Descriptions
+          properties:
+            bordered: true
+            column: 1
+            items:
+              - label: Username
+                value: johndoe
+              - label: Email
+                value: john@example.com
+              - label: Role
+                value: Administrator
+              - label: Member Since
+                value: March 2024
+    lc_notifications:
+      blocks:
+        - id: lc_notif_content
+          type: Paragraph
+          properties:
+            content: Configure which events trigger notifications. Choose between email,
+              push, or in-app delivery for each category.
+    lc_appearance:
+      blocks:
+        - id: lc_appearance_content
+          type: Paragraph
+          properties:
+            content: Customize your visual preferences including theme mode, accent color,
+              font size, and compact layout options.
+    lc_privacy:
+      blocks:
+        - id: lc_privacy_alert
+          type: Alert
+          properties:
+            message: Privacy Settings
+            description: Your profile is currently set to public. Other workspace members
+              can see your name, avatar, and activity status.
+            type: warning
+            showIcon: true
+```
+
+Tab content switches instantly without any transition animation. This can be useful for performance-sensitive interfaces or when animation feels distracting.
+
+The animated property is set to false, disabling both the ink bar animation and the content transition.
+
+Compare this with the other tab examples on this page to see the difference in transition behavior.
+
+```yaml
+- id: no_anim_tabs
+  type: Tabs
+  properties:
+    animated: false
+    tabs:
+      - key: na_tab1
+        title: No Animation 1
+      - key: na_tab2
+        title: No Animation 2
+      - key: na_tab3
+        title: No Animation 3
+  slots:
+    na_tab1:
+      blocks:
+        - id: na_tab1_content
+          type: Paragraph
+          properties:
+            content: Tab content switches instantly without any transition animation. This
+              can be useful for performance-sensitive interfaces or when
+              animation feels distracting.
+    na_tab2:
+      blocks:
+        - id: na_tab2_content
+          type: Paragraph
+          properties:
+            content: The animated property is set to false, disabling both the ink bar
+              animation and the content transition.
+    na_tab3:
+      blocks:
+        - id: na_tab3_content
+          type: Paragraph
+          properties:
+            content: Compare this with the other tab examples on this page to see the
+              difference in transition behavior.
+```
+
+This example demonstrates CSS customization using the style property. The element has a light gray background with rounded corners, and the tab bar has extra bottom margin.
+
+The tabBar, tabPane, and element CSS keys can be individually targeted. Each accepts standard CSS properties as an object.
+
+Use style.element to control the outer wrapper, style.tabBar for the navigation strip, and style.tabPane for each content panel.
+
+Dark-themed tabs using CSS overrides. Suitable for code editors, terminal views, or developer tool interfaces.
+
+Output panel with matching dark theme. The element and tabBar CSS keys are styled together for a cohesive look.
+
+Log viewer panel. Monospaced fonts and dark backgrounds reduce eye strain during extended debugging sessions.
+
+```yaml
+- id: css_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: css_overview
+        title: Overview
+      - key: css_details
+        title: Details
+      - key: css_contact
+        title: Contact
+  style:
+    .element:
+      padding: 16px
+      borderRadius: 8px
+    .tabBar:
+      marginBottom: 24px
+    .tabPane:
+      padding: 12px
+  slots:
+    css_overview:
+      blocks:
+        - id: css_overview_content
+          type: Paragraph
+          properties:
+            content: This example demonstrates CSS customization using the style property.
+              The element has a light gray background with rounded corners, and
+              the tab bar has extra bottom margin.
+    css_details:
+      blocks:
+        - id: css_details_content
+          type: Paragraph
+          properties:
+            content: The tabBar, tabPane, and element CSS keys can be individually targeted.
+              Each accepts standard CSS properties as an object.
+    css_contact:
+      blocks:
+        - id: css_contact_content
+          type: Paragraph
+          properties:
+            content: Use style.element to control the outer wrapper, style.tabBar for the
+              navigation strip, and style.tabPane for each content panel.
+- id: css_dark_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: cssd_code
+        title: Code
+      - key: cssd_output
+        title: Output
+      - key: cssd_logs
+        title: Logs
+  style:
+    .element:
+      background: "#1e1e2e"
+      padding: 16px
+      borderRadius: 8px
+      color: "#cdd6f4"
+    .tabBar:
+      color: "#cdd6f4"
+  slots:
+    cssd_code:
+      blocks:
+        - id: cssd_code_content
+          type: Paragraph
+          properties:
+            content: Dark-themed tabs using CSS overrides. Suitable for code editors,
+              terminal views, or developer tool interfaces.
+          style:
+            .element:
+              color: "#cdd6f4"
+    cssd_output:
+      blocks:
+        - id: cssd_output_content
+          type: Paragraph
+          properties:
+            content: Output panel with matching dark theme. The element and tabBar CSS keys
+              are styled together for a cohesive look.
+          style:
+            .element:
+              color: "#cdd6f4"
+    cssd_logs:
+      blocks:
+        - id: cssd_logs_content
+          type: Paragraph
+          properties:
+            content: Log viewer panel. Monospaced fonts and dark backgrounds reduce eye
+              strain during extended debugging sessions.
+          style:
+            .element:
+              color: "#cdd6f4"
+              fontFamily: monospace
+```
+
+**Custom ink bar and text colors:**
+
+The ink bar and selected tab text are green, overriding the default blue. Use inkBarColor, itemSelectedColor, itemHoverColor, and itemActiveColor tokens.
+
+The garden planner helps you organize plant spacing, sunlight needs, and watering schedules throughout the growing season.
+
+Track your harvest yields by week and compare against previous seasons to optimize your gardening strategy.
+
+**Custom card tab appearance:**
+
+Card tabs with a warm amber background and custom height. The cardBg, cardHeight, cardPadding, and cardGutter tokens control the card-type appearance.
+
+Your saved favorite recipes. Browse your curated collection of breakfast, lunch, and dinner ideas.
+
+Recently viewed recipes from the past 30 days. Quick access to dishes you have been exploring.
+
+**Custom spacing and font size:**
+
+Wider spacing between tabs using horizontalItemGutter token set to 48px (default is 32px). The title font size is increased to 16px with a purple accent color.
+
+Chapter listing with spaced-out tab headers. The increased gutter gives each tab more visual breathing room.
+
+Supplementary materials and reference tables. The larger font size makes the tab labels easier to read at a glance.
+
+**Custom vertical tab tokens:**
+
+Vertical tabs with custom padding and pink accent. The verticalItemPadding and verticalItemMargin tokens control spacing in left/right tab layouts.
+
+Development phase with code reviews, testing, and continuous integration. The pink accent differentiates this tab set from others on the page.
+
+Deployment pipeline configuration. Preview environments, staging, and production release management.
+
+```yaml
+- id: theme_custom_colors
+  type: Markdown
+  properties:
+    content: "**Custom ink bar and text colors:**"
+- id: theme_color_tabs
+  type: Tabs
+  properties:
+    theme:
+      inkBarColor: "#52c41a"
+      itemSelectedColor: "#52c41a"
+      itemHoverColor: "#73d13d"
+      itemActiveColor: "#389e0d"
+    tabs:
+      - key: tc_plants
+        title: Plants
+      - key: tc_garden
+        title: Garden
+      - key: tc_harvest
+        title: Harvest
+  slots:
+    tc_plants:
+      blocks:
+        - id: tc_plants_content
+          type: Paragraph
+          properties:
+            content: The ink bar and selected tab text are green, overriding the default
+              blue. Use inkBarColor, itemSelectedColor, itemHoverColor, and
+              itemActiveColor tokens.
+    tc_garden:
+      blocks:
+        - id: tc_garden_content
+          type: Paragraph
+          properties:
+            content: The garden planner helps you organize plant spacing, sunlight needs,
+              and watering schedules throughout the growing season.
+    tc_harvest:
+      blocks:
+        - id: tc_harvest_content
+          type: Paragraph
+          properties:
+            content: Track your harvest yields by week and compare against previous seasons
+              to optimize your gardening strategy.
+- id: theme_card_label
+  type: Markdown
+  properties:
+    content: "**Custom card tab appearance:**"
+- id: theme_card_tabs
+  type: Tabs
+  properties:
+    tabType: card
+    theme:
+      cardHeight: 48
+      cardPadding: 12px 24px
+      cardGutter: 4
+      itemSelectedColor: "#d46b08"
+      itemColor: "#874d00"
+    tabs:
+      - key: tcd_recipes
+        title: Recipes
+      - key: tcd_favorites
+        title: Favorites
+      - key: tcd_recent
+        title: Recent
+  slots:
+    tcd_recipes:
+      blocks:
+        - id: tcd_recipes_content
+          type: Paragraph
+          properties:
+            content: Card tabs with a warm amber background and custom height. The cardBg,
+              cardHeight, cardPadding, and cardGutter tokens control the
+              card-type appearance.
+    tcd_favorites:
+      blocks:
+        - id: tcd_favorites_content
+          type: Paragraph
+          properties:
+            content: Your saved favorite recipes. Browse your curated collection of
+              breakfast, lunch, and dinner ideas.
+    tcd_recent:
+      blocks:
+        - id: tcd_recent_content
+          type: Paragraph
+          properties:
+            content: Recently viewed recipes from the past 30 days. Quick access to dishes
+              you have been exploring.
+- id: theme_spacing_label
+  type: Markdown
+  properties:
+    content: "**Custom spacing and font size:**"
+- id: theme_spacing_tabs
+  type: Tabs
+  properties:
+    theme:
+      horizontalItemGutter: 48
+      horizontalItemPadding: 16px 0
+      titleFontSize: 16
+      inkBarColor: "#722ed1"
+      itemSelectedColor: "#722ed1"
+      itemHoverColor: "#9254de"
+    tabs:
+      - key: ts_intro
+        title: Introduction
+      - key: ts_chapters
+        title: Chapters
+      - key: ts_appendix
+        title: Appendix
+  slots:
+    ts_intro:
+      blocks:
+        - id: ts_intro_content
+          type: Paragraph
+          properties:
+            content: Wider spacing between tabs using horizontalItemGutter token set to 48px
+              (default is 32px). The title font size is increased to 16px with a
+              purple accent color.
+    ts_chapters:
+      blocks:
+        - id: ts_chapters_content
+          type: Paragraph
+          properties:
+            content: Chapter listing with spaced-out tab headers. The increased gutter gives
+              each tab more visual breathing room.
+    ts_appendix:
+      blocks:
+        - id: ts_appendix_content
+          type: Paragraph
+          properties:
+            content: Supplementary materials and reference tables. The larger font size
+              makes the tab labels easier to read at a glance.
+- id: theme_vertical_label
+  type: Markdown
+  properties:
+    content: "**Custom vertical tab tokens:**"
+- id: theme_vertical_tabs
+  type: Tabs
+  properties:
+    tabPlacement: start
+    theme:
+      verticalItemPadding: 12px 32px
+      verticalItemMargin: 8px 0 0 0
+      inkBarColor: "#eb2f96"
+      itemSelectedColor: "#eb2f96"
+      itemHoverColor: "#f759ab"
+      titleFontSize: 15
+    tabs:
+      - key: tv_design
+        title: Design
+      - key: tv_develop
+        title: Develop
+      - key: tv_deploy
+        title: Deploy
+  slots:
+    tv_design:
+      blocks:
+        - id: tv_design_content
+          type: Paragraph
+          properties:
+            content: Vertical tabs with custom padding and pink accent. The
+              verticalItemPadding and verticalItemMargin tokens control spacing
+              in left/right tab layouts.
+    tv_develop:
+      blocks:
+        - id: tv_develop_content
+          type: Paragraph
+          properties:
+            content: Development phase with code reviews, testing, and continuous
+              integration. The pink accent differentiates this tab set from
+              others on the page.
+    tv_deploy:
+      blocks:
+        - id: tv_deploy_content
+          type: Paragraph
+          properties:
+            content: Deployment pipeline configuration. Preview environments, staging, and
+              production release management.
+```
+
+Tab titles support HTML content. The first tab title uses bold text via the b tag. This is useful for emphasizing key tabs.
+
+The second tab simulates a notification badge using a superscript element with red color. A lightweight alternative to separate badge components.
+
+The third tab uses an inline span with green color to indicate active status directly in the tab title.
+
+```yaml
+- id: html_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: html_bold
+        title: <b>Important</b>
+      - key: html_badge
+        title: 'Messages <sup style="color: #ff4d4f; font-size: 10px;">3</sup>'
+      - key: html_colored
+        title: '<span style="color: #52c41a;">Active</span>'
+  slots:
+    html_bold:
+      blocks:
+        - id: html_bold_content
+          type: Paragraph
+          properties:
+            content: Tab titles support HTML content. The first tab title uses bold text via
+              the b tag. This is useful for emphasizing key tabs.
+    html_badge:
+      blocks:
+        - id: html_badge_content
+          type: Paragraph
+          properties:
+            content: The second tab simulates a notification badge using a superscript
+              element with red color. A lightweight alternative to separate
+              badge components.
+    html_colored:
+      blocks:
+        - id: html_colored_content
+          type: Paragraph
+          properties:
+            content: The third tab uses an inline span with green color to indicate active
+              status directly in the tab title.
+```
+
+Press Cmd+1 (Mac) or Ctrl+1 (Windows) to jump to this tab.
+
+Press Cmd+2 (Mac) or Ctrl+2 (Windows) to jump to this tab.
+
+Press Cmd+3 (Mac) or Ctrl+3 (Windows) to jump to this tab.
+
+```yaml
+- id: shortcut_tabs
+  type: Tabs
+  properties:
+    tabs:
+      - key: overview
+        title: Overview
+        shortcut: mod+1
+      - key: details
+        title: Details
+        shortcut: mod+2
+      - key: history
+        title: History
+        shortcut: mod+3
+  events:
+    onChange:
+      - id: shortcut_tab_msg
+        type: DisplayMessage
+        params:
+          content:
+            _string.concat:
+              - "Switched to: "
+              - _event: activeKey
+          status: info
+  slots:
+    overview:
+      blocks:
+        - id: shortcut_overview_content
+          type: Paragraph
+          properties:
+            content: Press Cmd+1 (Mac) or Ctrl+1 (Windows) to jump to this tab.
+    details:
+      blocks:
+        - id: shortcut_details_content
+          type: Paragraph
+          properties:
+            content: Press Cmd+2 (Mac) or Ctrl+2 (Windows) to jump to this tab.
+    history:
+      blocks:
+        - id: shortcut_history_content
+          type: Paragraph
+          properties:
+            content: Press Cmd+3 (Mac) or Ctrl+3 (Windows) to jump to this tab.
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animated` | boolean | `true` | Whether to change tabs with animation. Only works while tabPlacement is top or bottom. |
+| `defaultActiveKey` | string | - | Initial active TabPane's key, if activeKey is not set. |
+| `size` | string | `"default"` | Size of the tabs. Enum: `default`, `small`, `large`. |
+| `tabPlacement` | string | `"top"` | Position of the tabs. Enum: `top`, `end`, `bottom`, `start`. |
+| `tabType` | string | `"line"` | Type of tabs. Enum: `line`, `card`. |
+| `tabs` | array | - |  |
+| `tabs.$.title` | string | - | Title of the tab - supports html. |
+| `tabs.$.key` | string | - | Area key of the tab. |
+| `tabs.$.eventName` | string | - | Block-level event name to trigger when this tab becomes active, in addition to onChange. Declare an event with this name under `events:`. The event receives `{ key }` of the now-active tab. |
+| `tabs.$.disabled` | boolean | `false` | Disable the tab if true. |
+| `tabs.$.icon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block to customize icon to show in tab title. |
+| `tabs.$.shortcut` | string | - | Keyboard shortcut to switch to this tab. Use "mod" for Cmd/Ctrl. |
+| `extraAreaKey` | string | - | Area key for the extra area blocks. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design tabs tokens](https://ant.design/components/tabs#design-token). |
+| `theme.cardBg` | string | `"rgba(0, 0, 0, 0.02)"` | Background color of card-type tab. |
+| `theme.cardGutter` | number | `2` | Gap between card-type tabs. |
+| `theme.cardHeight` | number | `40` | Height of card-type tab. |
+| `theme.cardPadding` | string | `"8px 16px"` | Padding of card-type tab. |
+| `theme.cardPaddingLG` | string | `"11px 16px"` | Padding of large card-type tab. |
+| `theme.cardPaddingSM` | string | `"4px 8px"` | Padding of small card-type tab. |
+| `theme.horizontalItemGutter` | number | `32` | Gap between horizontal tabs. |
+| `theme.horizontalItemMargin` | string | - | Horizontal margin of tab item. |
+| `theme.horizontalItemPadding` | string | `"12px 0"` | Padding of horizontal tab item. |
+| `theme.horizontalItemPaddingLG` | string | `"16px 0"` | Padding of large horizontal tab item. |
+| `theme.horizontalItemPaddingSM` | string | `"8px 0"` | Padding of small horizontal tab item. |
+| `theme.horizontalMargin` | string | `"0 0 16px 0"` | Margin of horizontal tab bar. |
+| `theme.inkBarColor` | string | `"#1677ff"` | Color of the active tab indicator bar. |
+| `theme.itemActiveColor` | string | `"#0958d9"` | Text color of active (mousedown) tab. |
+| `theme.itemColor` | string | `"rgba(0, 0, 0, 0.88)"` | Text color of tab. |
+| `theme.itemHoverColor` | string | `"#4096ff"` | Text color of hovered tab. |
+| `theme.itemSelectedColor` | string | `"#1677ff"` | Text color of selected tab. |
+| `theme.titleFontSize` | number | `14` | Font size of tab title. |
+| `theme.titleFontSizeLG` | number | `16` | Font size of large tab title. |
+| `theme.titleFontSizeSM` | number | `14` | Font size of small tab title. |
+| `theme.verticalItemMargin` | string | `"16px 0 0 0"` | Margin of vertical tab item. |
+| `theme.verticalItemPadding` | string | `"8px 24px"` | Padding of vertical tab item. |
+| `theme.zIndexPopup` | number | `1050` | Z-index of tab dropdown popup. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onChange` | `{ activeKey }` | Trigger action on any tab change. |
+| `onTabSelect` | `{ key }` | Documentation reference — not a fixed event name. When a tab becomes active, the `eventName` string declared on that `tabs[]` entry is triggered (in addition to onChange). Declare your named events under `events:` (e.g. `onProfileTab`, `onBillingTab`). |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Tabs element. |
+| `/icon` | The icon in the Tabs. |
+| `/tabBar` | The Tabs tab bar. |
+| `/tabPane` | The Tabs tab pane. |
+| `/inkBar` | The Tabs ink bar. |
+
+Slot keys are user-defined in your config and resolved at build time — not generated at runtime. The block typically pairs slots with an array property (`tabs`, `panels`, `slides`) listed in the Properties table; see the examples above for the expected shape.