@lowdefy/docs-content 0.0.0-experimental-20260928120643 → 6.1.0

package/content/container-blocks/sider.md

@@ -26,17 +26,17 @@ The Sider block provides a sidebar within a Layout. It supports collapsing, them
                 type: MenuLink
                 properties:
                   title: Home
-                  icon: home
+                  icon: AiOutlineHome
               - id: basic_users
                 type: MenuLink
                 properties:
                   title: Users
-                  icon: user
+                  icon: AiOutlineUser
               - id: basic_settings
                 type: MenuLink
                 properties:
                   title: Settings
-                  icon: settings
+                  icon: AiOutlineSetting
     - id: basic_content
       type: Content
       style:
@@ -75,17 +75,17 @@ Setting theme to "dark" gives the sider a dark background with light text. Match
                 type: MenuLink
                 properties:
                   title: Dashboard
-                  icon: Gauge
+                  icon: AiOutlineDashboard
               - id: dark_analytics
                 type: MenuLink
                 properties:
                   title: Analytics
-                  icon: chart
+                  icon: AiOutlineBarChart
               - id: dark_files
                 type: MenuLink
                 properties:
                   title: Files
-                  icon: file
+                  icon: AiOutlineFile
     - id: dark_content
       type: Content
       style:
@@ -126,17 +126,17 @@ With collapsible set to true a collapse trigger appears at the bottom. Toggle be
                 type: MenuLink
                 properties:
                   title: Inbox
-                  icon: Inbox
+                  icon: AiOutlineInbox
               - id: col_starred
                 type: MenuLink
                 properties:
                   title: Starred
-                  icon: star
+                  icon: AiOutlineStar
               - id: col_sent
                 type: MenuLink
                 properties:
                   title: Sent
-                  icon: send
+                  icon: AiOutlineSend
     - id: collapsible_content
       type: Content
       style:
@@ -177,17 +177,17 @@ This sider starts collapsed with initialCollapsed set to true. Click the collaps
                 type: MenuLink
                 properties:
                   title: Overview
-                  icon: grid
+                  icon: AiOutlineAppstore
               - id: ic_reports
                 type: MenuLink
                 properties:
                   title: Reports
-                  icon: document
+                  icon: AiOutlineFileText
               - id: ic_config
                 type: MenuLink
                 properties:
                   title: Configuration
-                  icon: Wrench
+                  icon: AiOutlineTool
     - id: init_collapsed_content
       type: Content
       style:
@@ -228,12 +228,12 @@ Setting collapsedWidth to 0 completely hides the sider when collapsed and shows
                 type: MenuLink
                 properties:
                   title: Projects
-                  icon: SquareKanban
+                  icon: AiOutlineProject
               - id: cw_tasks
                 type: MenuLink
                 properties:
                   title: Tasks
-                  icon: SquareCheck
+                  icon: AiOutlineCheckSquare
     - id: cw_content
       type: Content
       style:
@@ -277,7 +277,7 @@ The Sider is placed on the right side of the layout with reverseArrow set to tru
         initialCollapsed: false
         reverseArrow: true
       style:
-        borderLeft: "1px solid #f0f0f0"
+        borderLeft: 1px solid
       blocks:
         - id: reverse_menu
           type: Menu
@@ -289,15 +289,15 @@ The Sider is placed on the right side of the layout with reverseArrow set to tru
                 type: MenuLink
                 properties:
                   title: Details
-                  icon: info
+                  icon: AiOutlineInfoCircle
               - id: rev_history
                 type: MenuLink
                 properties:
                   title: History
-                  icon: history
+                  icon: AiOutlineHistory
 ```
 
-The onBreakpoint event fires when the viewport crosses the breakpoint, with `broken` true below it. Here it calls the sider's setOpen method, so the sider collapses below the large (lg) breakpoint. Supported values are xs, sm, md, lg, xl, xxl and xxxl.
+The breakpoint property controls when the sider automatically collapses on smaller screens. Set to "lg" here, so the sider collapses when the viewport is below the large breakpoint. Supported values are xs, sm, md, lg, xl, and xxl.
 
 ```yaml
 - id: bp_layout
@@ -315,15 +315,10 @@ The onBreakpoint event fires when the viewport crosses the breakpoint, with `bro
         breakpoint: lg
       events:
         onBreakpoint:
-          - id: bp_sider_set_open
-            type: CallMethod
+          - id: bp_sider_set_state
+            type: SetState
             params:
-              blockId: bp_sider
-              method: setOpen
-              args:
-                - open:
-                    _not:
-                      _event: broken
+              breakpointTriggered: true
       blocks:
         - id: bp_menu
           type: Menu
@@ -335,12 +330,12 @@ The onBreakpoint event fires when the viewport crosses the breakpoint, with `bro
                 type: MenuLink
                 properties:
                   title: Home
-                  icon: home
+                  icon: AiOutlineHome
               - id: bp_search
                 type: MenuLink
                 properties:
                   title: Search
-                  icon: search
+                  icon: AiOutlineSearch
     - id: bp_content
       type: Content
       style:
@@ -350,10 +345,10 @@ The onBreakpoint event fires when the viewport crosses the breakpoint, with `bro
         - id: bp_content_text
           type: Paragraph
           properties:
-            content: The onBreakpoint event fires when the viewport crosses the breakpoint,
-              with `broken` true below it. Here it calls the sider's setOpen
-              method, so the sider collapses below the large (lg) breakpoint.
-              Supported values are xs, sm, md, lg, xl, xxl and xxxl.
+            content: The breakpoint property controls when the sider automatically collapses
+              on smaller screens. Set to "lg" here, so the sider collapses when
+              the viewport is below the large breakpoint. Supported values are
+              xs, sm, md, lg, xl, and xxl.
 ```
 
 The width property accepts a number (pixels) or string value. Here the sider is set to 300px wide, providing more room for longer menu labels or nested navigation.
@@ -382,17 +377,17 @@ The width property accepts a number (pixels) or string value. Here the sider is
                 type: MenuLink
                 properties:
                   title: Getting Started
-                  icon: Rocket
+                  icon: AiOutlineRocket
               - id: width_nav2
                 type: MenuLink
                 properties:
                   title: Documentation
-                  icon: Book
+                  icon: AiOutlineBook
               - id: width_nav3
                 type: MenuLink
                 properties:
                   title: API Reference
-                  icon: CodeXml
+                  icon: AiOutlineCode
     - id: width_content
       type: Content
       style:
@@ -444,12 +439,12 @@ The Sider fires onOpen and onClose events when it expands or collapses. Use thes
                 type: MenuLink
                 properties:
                   title: Home
-                  icon: home
+                  icon: AiOutlineHome
               - id: events_nav_alerts
                 type: MenuLink
                 properties:
                   title: Alerts
-                  icon: bell
+                  icon: AiOutlineBell
     - id: events_content
       type: Content
       style:
@@ -472,7 +467,9 @@ The Sider fires onOpen and onClose events when it expands or collapses. Use thes
               state changes. Toggle the sider to see the state update above.
 ```
 
-The Sider theme takes antd Layout design tokens. Here lightTriggerBg, lightTriggerColor and triggerHeight style the collapse trigger, and the Menu theme styles the selected item.
+Use designTokens to override antd theme tokens on the Sider. Here colorBgContainer changes the sidebar background, colorPrimary affects the selected item highlight, and colorText changes the menu text color.
+
+Token overrides work with both light and dark themes. This dark sider uses a custom navy background and green primary color for the active menu item highlight.
 
 ```yaml
 - id: token_layout
@@ -483,37 +480,35 @@ The Sider theme takes antd Layout design tokens. Here lightTriggerBg, lightTrigg
     - id: token_sider
       type: Sider
       properties:
+        theme: light
         width: 220
         collapsible: true
         initialCollapsed: false
-        theme:
-          lightTriggerBg: "#f9f0ff"
-          lightTriggerColor: "#722ed1"
-          triggerHeight: 40
+        designTokens:
+          colorPrimary: "#722ed1"
+          colorText: "#531dab"
       blocks:
         - id: token_menu
           type: Menu
           properties:
             mode: inline
-            theme:
-              itemSelectedBg: "#f9f0ff"
-              itemSelectedColor: "#722ed1"
+            theme: light
             links:
               - id: token_nav_explore
                 type: MenuLink
                 properties:
                   title: Explore
-                  icon: Compass
+                  icon: AiOutlineCompass
               - id: token_nav_favorites
                 type: MenuLink
                 properties:
                   title: Favorites
-                  icon: heart
+                  icon: AiOutlineHeart
               - id: token_nav_settings
                 type: MenuLink
                 properties:
                   title: Settings
-                  icon: settings
+                  icon: AiOutlineSetting
     - id: token_content
       type: Content
       style:
@@ -523,9 +518,59 @@ The Sider theme takes antd Layout design tokens. Here lightTriggerBg, lightTrigg
         - id: token_content_text
           type: Paragraph
           properties:
-            content: The Sider theme takes antd Layout design tokens. Here lightTriggerBg,
-              lightTriggerColor and triggerHeight style the collapse trigger,
-              and the Menu theme styles the selected item.
+            content: Use designTokens to override antd theme tokens on the Sider. Here
+              colorBgContainer changes the sidebar background, colorPrimary
+              affects the selected item highlight, and colorText changes the
+              menu text color.
+- id: token_dark_layout
+  type: Layout
+  style:
+    minHeight: 300px
+  blocks:
+    - id: token_dark_sider
+      type: Sider
+      properties:
+        theme: dark
+        width: 220
+        collapsible: true
+        initialCollapsed: false
+        designTokens:
+          colorPrimary: "#52c41a"
+          colorBgContainer: "#1a1a2e"
+      blocks:
+        - id: token_dark_menu
+          type: Menu
+          properties:
+            mode: inline
+            theme: dark
+            links:
+              - id: token_dark_nav_status
+                type: MenuLink
+                properties:
+                  title: Status
+                  icon: AiOutlineCheckCircle
+              - id: token_dark_nav_logs
+                type: MenuLink
+                properties:
+                  title: Logs
+                  icon: AiOutlineFileText
+              - id: token_dark_nav_deploy
+                type: MenuLink
+                properties:
+                  title: Deploy
+                  icon: AiOutlineCloudUpload
+    - id: token_dark_content
+      type: Content
+      style:
+        padding: 24px
+        background: var(--ant-color-bg-container)
+      blocks:
+        - id: token_dark_content_text
+          type: Paragraph
+          properties:
+            content: Token overrides work with both light and dark themes. This dark sider
+              uses a custom navy background and green primary color for the
+              active menu item highlight.
 ```
 
 The Sider has a single CSS key called "element" which targets the entire sider container. Use it with Tailwind classes for gradients, borders, shadows, and other visual effects.
@@ -546,7 +591,7 @@ A shadow-lg class on the element CSS key gives the sider an elevated appearance
         collapsible: false
         initialCollapsed: false
       class:
-        .element: bg-gradient-to-b from-primary/10 to-bg-container border-r border-border
+        element: bg-gradient-to-b from-primary/10 to-bg-container border-r border-border
       blocks:
         - id: css_menu
           type: Menu
@@ -558,17 +603,17 @@ A shadow-lg class on the element CSS key gives the sider an elevated appearance
                 type: MenuLink
                 properties:
                   title: Workspace
-                  icon: grid
+                  icon: AiOutlineAppstore
               - id: css_nav_members
                 type: MenuLink
                 properties:
                   title: Members
-                  icon: users
+                  icon: AiOutlineTeam
               - id: css_nav_billing
                 type: MenuLink
                 properties:
                   title: Billing
-                  icon: CreditCard
+                  icon: AiOutlineCreditCard
     - id: css_content
       type: Content
       style:
@@ -594,7 +639,7 @@ A shadow-lg class on the element CSS key gives the sider an elevated appearance
         collapsible: false
         initialCollapsed: false
       class:
-        .element: shadow-lg bg-bg-container
+        element: shadow-lg bg-bg-container
       blocks:
         - id: css_shadow_menu
           type: Menu
@@ -606,12 +651,12 @@ A shadow-lg class on the element CSS key gives the sider an elevated appearance
                 type: MenuLink
                 properties:
                   title: Dashboard
-                  icon: Gauge
+                  icon: AiOutlineDashboard
               - id: css_sh_analytics
                 type: MenuLink
                 properties:
                   title: Analytics
-                  icon: ChartLine
+                  icon: AiOutlineLineChart
     - id: css_shadow_content
       type: Content
       style:
@@ -676,12 +721,12 @@ Dashboard
                 type: MenuLink
                 properties:
                   title: Dashboard
-                  icon: Gauge
+                  icon: AiOutlineDashboard
               - id: admin_nav_users
                 type: MenuGroup
                 properties:
                   title: User Management
-                  icon: users
+                  icon: AiOutlineTeam
                 links:
                   - id: admin_nav_all_users
                     type: MenuLink
@@ -695,7 +740,7 @@ Dashboard
                 type: MenuGroup
                 properties:
                   title: Content
-                  icon: document
+                  icon: AiOutlineFileText
                 links:
                   - id: admin_nav_pages
                     type: MenuLink
@@ -709,7 +754,7 @@ Dashboard
                 type: MenuLink
                 properties:
                   title: Settings
-                  icon: settings
+                  icon: AiOutlineSetting
     - id: admin_content
       type: Content
       style:
@@ -741,7 +786,7 @@ Dashboard
                   layout:
                     flex: 0 0 auto
                   properties:
-                    icon: bell
+                    icon: AiOutlineBell
                     color: default
                     variant: text
                     hideTitle: true
@@ -750,7 +795,7 @@ Dashboard
                   layout:
                     flex: 0 0 auto
                   properties:
-                    icon: user
+                    icon: AiOutlineUser
                     color: default
                     variant: text
                     hideTitle: true
@@ -818,7 +863,7 @@ Manage your personal information and preferences.
         collapsible: false
         initialCollapsed: false
       style:
-        borderRight: "1px solid #f0f0f0"
+        borderRight: 1px solid
       blocks:
         - id: settings_heading
           type: Title
@@ -837,27 +882,27 @@ Manage your personal information and preferences.
                 type: MenuLink
                 properties:
                   title: Profile
-                  icon: user
+                  icon: AiOutlineUser
               - id: settings_nav_account
                 type: MenuLink
                 properties:
                   title: Account
-                  icon: Shield
+                  icon: AiOutlineSafety
               - id: settings_nav_notifications
                 type: MenuLink
                 properties:
                   title: Notifications
-                  icon: bell
+                  icon: AiOutlineBell
               - id: settings_nav_appearance
                 type: MenuLink
                 properties:
                   title: Appearance
-                  icon: PaintBucket
+                  icon: AiOutlineBgColors
               - id: settings_nav_integrations
                 type: MenuLink
                 properties:
                   title: Integrations
-                  icon: Plug
+                  icon: AiOutlineApi
     - id: settings_content
       type: Content
       style:
@@ -896,7 +941,7 @@ Manage your personal information and preferences.
             title: Save Changes
             color: primary
             variant: solid
-            icon: save
+            icon: AiOutlineSave
 ```
 
 Introduction
@@ -920,7 +965,7 @@ Use the sidebar on the left to browse through different sections. On smaller scr
         initialCollapsed: false
         breakpoint: md
       class:
-        .element: border-r border-border
+        element: border-r border-border
       blocks:
         - id: docs_search
           type: TextInput
@@ -928,7 +973,7 @@ Use the sidebar on the left to browse through different sections. On smaller scr
             padding: 12px 16px
           properties:
             placeholder: Search docs...
-            prefixIcon: search
+            prefixIcon: AiOutlineSearch
         - id: docs_menu
           type: Menu
           properties:
@@ -995,32 +1040,24 @@ Use the sidebar on the left to browse through different sections. On smaller scr
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `breakpoint` | string | - | Breakpoint of the responsive layout. Crossing it fires onBreakpoint. Enum: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl`. |
+| `breakpoint` | string | `"sm"` | Breakpoint of the responsive layout Enum: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`. |
 | `collapsedWidth` | integer | - | Width of the collapsed sidebar, by setting to 0 a special trigger will appear |
-| `collapsible` | boolean | `false` | Show a trigger at the bottom of the sider that collapses and expands it. |
+| `collapsible` | boolean | - | Whether can be collapsed |
 | `initialCollapsed` | boolean | `true` | Set the initial collapsed state |
 | `reverseArrow` | boolean | `false` | Direction of arrow, for a sider that expands from the right |
 | `width` | string \| number | - | width of the sidebar |
-| `theme` | string \| object | - | The Sider color theme, light or dark, or antd Layout design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design layout tokens](https://ant.design/components/layout#design-token). |
-| `theme.triggerHeight` | number | `48` | Height of the collapse trigger of a collapsible Sider. |
-| `theme.triggerBg` | string | `"#002140"` | Background color of the collapse trigger of a dark Sider. |
-| `theme.triggerColor` | string | `"#fff"` | Color of the collapse trigger of a dark Sider. |
-| `theme.lightTriggerBg` | string | `"#ffffff"` | Background color of the collapse trigger of a light Sider. |
-| `theme.lightTriggerColor` | string | `"rgba(0, 0, 0, 0.88)"` | Color of the collapse trigger of a light Sider. |
-| `theme.zeroTriggerWidth` | number | `40` | Width of the trigger shown when collapsedWidth is 0. |
-| `theme.zeroTriggerHeight` | number | `40` | Height of the trigger shown when collapsedWidth is 0. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). |
 
 | Event | Event Data | Description |
 | --- | --- | --- |
 | `onClose` | \- | Trigger actions when sider is closed. |
 | `onOpen` | \- | Trigger actions when sider is opened. |
-| `onBreakpoint` | `{ broken }` | Trigger actions when the screen width crosses the breakpoint. Use it with the setOpen method to collapse the sider on small screens. |
+| `onBreakpoint` | \- | Trigger actions on breakpoint change. |
 
 | Key | Target |
 | --- | --- |
 | `/block` | Outer block wrapper (always available). |
 | `/element` | The Sider element. |
-| `/body` | The box inside the Sider that holds its child blocks. |
 
 | Slot | Description |
 | --- | --- |

package/content/container-blocks/span.md

@@ -53,7 +53,7 @@ This content property overrides the content area below.
       layout:
         flex: 0 0 auto
       properties:
-        name: info
+        name: AiOutlineInfoCircle
         size: 14
         color: "#1677ff"
     - id: span_content_area_text
@@ -338,7 +338,7 @@ Status:
           layout:
             flex: 0 0 auto
           properties:
-            name: check-circle
+            name: AiOutlineCheckCircle
             size: 14
             color: "#52c41a"
         - id: span_nested_value_text
@@ -465,7 +465,7 @@ LIVE
       layout:
         flex: 0 0 auto
       properties:
-        name: FaceSlightlySmiling
+        name: AiOutlineSmile
         size: 16
         color: "#faad14"
     - id: span_icon_smile_label
@@ -487,7 +487,7 @@ LIVE
       layout:
         flex: 0 0 auto
       properties:
-        name: check-circle
+        name: AiOutlineCheckCircle
         size: 16
         color: "#52c41a"
     - id: span_icon_check_label
@@ -509,7 +509,7 @@ LIVE
       layout:
         flex: 0 0 auto
       properties:
-        name: warning
+        name: AiOutlineWarning
         size: 16
         color: "#ff4d4f"
     - id: span_icon_warning_label
@@ -563,7 +563,7 @@ Estimated delivery Mar 18, 2026
           layout:
             flex: 0 0 auto
           properties:
-            name: check-circle
+            name: AiOutlineCheckCircle
             size: 14
             color: "#52c41a"
         - id: span_order_shipped_text
@@ -679,7 +679,7 @@ Admin
       layout:
         flex: 0 0 auto
       properties:
-        name: user
+        name: AiOutlineUser
         size: 20
         color: "#1677ff"
     - id: span_profile_name

package/content/container-blocks/spinner.md

@@ -150,7 +150,7 @@ Loading orders...
             flex: 0 0 auto
           properties:
             title: Refresh
-            icon: refresh
+            icon: AiOutlineReload
             color: primary
             variant: outlined
             size: small
@@ -239,7 +239,7 @@ Loading orders...
             title: Submit
             color: primary
             variant: solid
-            icon: send
+            icon: AiOutlineSend
           events:
             onClick:
               - id: spinner_btn_loading_set_state
@@ -255,7 +255,7 @@ Loading orders...
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `size` | string \| number | - | Size of the icon spinner: small, medium, large, or a pixel number. |
+| `size` | string | - | Size of the icon spinner. Enum: `small`, `medium`, `large`. |
 
 No events defined.