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

package/content/container-blocks/box.md

@@ -947,7 +947,7 @@ Fixed 100px
           layout:
             flex: 0 0 auto
           properties:
-            name: Rocket
+            name: AiOutlineRocket
             size: 32
             color: "#1677ff"
         - id: box_feature_a_title
@@ -970,7 +970,7 @@ Fixed 100px
           layout:
             flex: 0 0 auto
           properties:
-            name: Shield
+            name: AiOutlineSafety
             size: 32
             color: "#52c41a"
         - id: box_feature_b_title
@@ -993,7 +993,7 @@ Fixed 100px
           layout:
             flex: 0 0 auto
           properties:
-            name: Plug
+            name: AiOutlineApi
             size: 32
             color: "#722ed1"
         - id: box_feature_c_title
@@ -1167,7 +1167,7 @@ Fixed 100px
           layout:
             flex: 0 0 auto
           properties:
-            name: check-circle
+            name: AiOutlineCheckCircle
             size: 20
             color: "#52c41a"
         - id: box_inbox_item_1_body
@@ -1206,7 +1206,7 @@ Fixed 100px
           layout:
             flex: 0 0 auto
           properties:
-            name: UserPlus
+            name: AiOutlineUserAdd
             size: 20
             color: "#1677ff"
         - id: box_inbox_item_2_body
@@ -1244,7 +1244,7 @@ Fixed 100px
           layout:
             flex: 0 0 auto
           properties:
-            name: warning
+            name: AiOutlineWarning
             size: 20
             color: "#faad14"
         - id: box_inbox_item_3_body
@@ -1308,7 +1308,7 @@ Fixed 100px
               layout:
                 flex: 0 0 auto
               properties:
-                name: Gauge
+                name: AiOutlineDashboard
                 size: 16
                 color: "#1677ff"
             - id: box_sidebar_text_dashboard
@@ -1336,7 +1336,7 @@ Fixed 100px
               layout:
                 flex: 0 0 auto
               properties:
-                name: SquareKanban
+                name: AiOutlineProject
                 size: 16
                 color: rgba(128, 128, 128, 0.7)
             - id: box_sidebar_text_projects
@@ -1363,7 +1363,7 @@ Fixed 100px
               layout:
                 flex: 0 0 auto
               properties:
-                name: settings
+                name: AiOutlineSetting
                 size: 16
                 color: rgba(128, 128, 128, 0.7)
             - id: box_sidebar_text_settings

package/content/container-blocks/card.md

@@ -114,8 +114,8 @@ A borderless card blends into its container. Best used on colored backgrounds wh
       layout:
         flex: 1 1 0
       properties:
-        title: Outlined (default)
-        variant: outlined
+        title: Bordered (default)
+        bordered: true
       blocks:
         - id: bordered_content
           type: Paragraph
@@ -128,7 +128,7 @@ A borderless card blends into its container. Best used on colored backgrounds wh
         flex: 1 1 0
       properties:
         title: Borderless
-        variant: borderless
+        bordered: false
       blocks:
         - id: borderless_content
           type: Paragraph
@@ -193,7 +193,7 @@ The extra slot renders content in the top-right corner of the card header, next
                 flex: 0 0 auto
               properties:
                 title: Edit
-                icon: edit
+                icon: AiOutlineEdit
                 color: primary
                 variant: outlined
                 size: small
@@ -202,7 +202,7 @@ The extra slot renders content in the top-right corner of the card header, next
               layout:
                 flex: 0 0 auto
               properties:
-                icon: more
+                icon: AiOutlineEllipsis
                 color: default
                 variant: text
                 size: small
@@ -241,7 +241,7 @@ Notifications
               layout:
                 flex: 0 0 auto
               properties:
-                icon: user
+                icon: AiOutlineUser
                 color: "#1677ff"
             - id: title_slot_text
               type: Title
@@ -371,56 +371,6 @@ A cover card without a header title. The title is placed inside the body instead
             color: gold
 ```
 
-Revenue grew 12% over the previous quarter.
-
-```yaml
-- id: actions_card
-  type: Card
-  properties:
-    title: Quarterly report
-  slots:
-    content:
-      blocks:
-        - id: actions_card_text
-          type: Paragraph
-          properties:
-            content: Revenue grew 12% over the previous quarter.
-    actions:
-      blocks:
-        - id: actions_card_buttons
-          type: Flex
-          properties:
-            justify: space-around
-          blocks:
-            - id: actions_card_view
-              type: Button
-              properties:
-                title: View
-                type: link
-                icon: view
-            - id: actions_card_share
-              type: Button
-              properties:
-                title: Share
-                type: link
-                icon: share
-```
-
-Shown once loading is false.
-
-```yaml
-- id: loading_card
-  type: Card
-  properties:
-    title: Customer details
-    loading: true
-  blocks:
-    - id: loading_card_text
-      type: Paragraph
-      properties:
-        content: Shown once loading is false.
-```
-
 Inner cards have a gray background and are designed for nesting inside a parent card. They provide visual grouping without extra border weight.
 
 Multiple inner cards can stack within a parent to organize related sections. Each has its own title and content area.
@@ -500,7 +450,7 @@ Hover over any card in this section to see the elevation shadow effect. Commonly
           layout:
             flex: 0 0 auto
           properties:
-            name: Gauge
+            name: AiOutlineDashboard
             color: "#1677ff"
             size: 20
   blocks:
@@ -529,7 +479,7 @@ Hover over any card in this section to see the elevation shadow effect. Commonly
           layout:
             flex: 0 0 auto
           properties:
-            name: CircleDollarSign
+            name: AiOutlineDollarCircle
             color: "#52c41a"
             size: 20
   blocks:
@@ -559,7 +509,7 @@ Hover over any card in this section to see the elevation shadow effect. Commonly
           layout:
             flex: 0 0 auto
           properties:
-            name: check-circle
+            name: AiOutlineCheckCircle
             color: "#faad14"
             size: 20
   blocks:
@@ -611,9 +561,10 @@ Advanced analytics
           layout:
             flex: 0 0 auto
           properties:
-            icon: user
+            icon: AiOutlineUser
             size: 64
-            color: "#1677ff"
+            color: "#fff"
+            backgroundColor: "#1677ff"
         - id: rich_profile_info
           type: Box
           layout:
@@ -781,7 +732,7 @@ Shared workspaces, comments, mentions, and real-time co-editing for seamless tea
           layout:
             flex: 0 0 auto
           properties:
-            name: chart
+            name: AiOutlineBarChart
             color: "#1677ff"
   blocks:
     - id: grid_card_1_p
@@ -820,7 +771,7 @@ Shared workspaces, comments, mentions, and real-time co-editing for seamless tea
           layout:
             flex: 0 0 auto
           properties:
-            name: lock
+            name: AiOutlineLock
             color: "#52c41a"
   blocks:
     - id: grid_card_2_p
@@ -859,7 +810,7 @@ Shared workspaces, comments, mentions, and real-time co-editing for seamless tea
           layout:
             flex: 0 0 auto
           properties:
-            name: Plug
+            name: AiOutlineApi
             color: "#722ed1"
   blocks:
     - id: grid_card_3_p
@@ -898,7 +849,7 @@ Shared workspaces, comments, mentions, and real-time co-editing for seamless tea
           layout:
             flex: 0 0 auto
           properties:
-            name: users
+            name: AiOutlineTeam
             color: "#fa8c16"
   blocks:
     - id: grid_card_4_p
@@ -995,10 +946,8 @@ Inline styles on the header and body can override the default padding for a more
     title: Colored Header
   style:
     .header:
-      backgroundColor: var(--ant-color-primary-bg)
-      borderBottom: 1px solid var(--ant-color-primary-border)
-    .body:
-      backgroundColor: var(--ant-color-fill-quaternary)
+      borderBottom: 1px solid
+    .body: null
   blocks:
     - id: style_header_bg_p
       type: Paragraph
@@ -1016,7 +965,7 @@ Inline styles on the header and body can override the default padding for a more
     .header:
       backgroundColor: "#1f1f1f"
       color: "#ffffff"
-      borderBottom: "1px solid #333"
+      borderBottom: 1px solid
     .body:
       backgroundColor: "#2a2a2a"
   blocks:
@@ -1058,9 +1007,9 @@ The extra CSS key lets you style the container around the extra slot content. He
   layout:
     flex: 1 1 0
   class:
-    .element: shadow-lg rounded-xl
-    .header: bg-bg-layout
-    .body: bg-bg-container
+    element: shadow-lg rounded-xl
+    header: bg-bg-layout
+    body: bg-bg-container
   properties:
     title: Element + Header + Body
   blocks:
@@ -1075,7 +1024,7 @@ The extra CSS key lets you style the container around the extra slot content. He
   layout:
     flex: 1 1 0
   class:
-    .element: hover:ring-2 hover:ring-blue-400 transition-all duration-200 rounded-lg
+    element: hover:ring-2 hover:ring-blue-400 transition-all duration-200 rounded-lg
   properties:
     title: Hover Ring Effect
     hoverable: true
@@ -1090,7 +1039,7 @@ The extra CSS key lets you style the container around the extra slot content. He
   layout:
     flex: 1 1 0
   class:
-    .extra: bg-bg-layout px-3 py-1 rounded-full
+    extra: bg-bg-layout px-3 py-1 rounded-full
   properties:
     title: Styled Extra Area
   slots:
@@ -1203,13 +1152,11 @@ A warm-toned card using theme tokens to customize the background, header, text,
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `bordered` | boolean | `true` | Toggles rendering of the border around the card. `bordered: false` is the same as `variant: borderless`. |
+| `bordered` | boolean | `true` | Toggles rendering of the border around the card. |
 | `hoverable` | boolean | `false` | Lift up when hovering card. |
-| `loading` | boolean | `false` | Show a loading skeleton in place of the card content. |
 | `inner` | boolean | `false` | Change the card style to inner. |
 | `size` | string | `"default"` | Size of the card. Enum: `default`, `small`. |
 | `title` | string | - | Title to show in the title area - supports html. Overwritten by blocks in the title content area. |
-| `variant` | string | `"outlined"` | Card style variant. Enum: `outlined`, `borderless`. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design card tokens](https://ant.design/components/card#design-token). |
 | `theme.headerBg` | string | `"transparent"` | Background color of the card header. |
 | `theme.headerFontSize` | number | `16` | Font size of the card header title. |
@@ -1240,7 +1187,6 @@ A warm-toned card using theme tokens to customize the background, header, text,
 | `/block` | Outer block wrapper (always available). |
 | `/element` | The Card element. |
 | `/header` | The Card header. |
-| `/title` | The Card title. |
 | `/body` | The Card body. |
 | `/cover` | The Card cover. |
 | `/actions` | The Card actions. |
@@ -1248,7 +1194,6 @@ A warm-toned card using theme tokens to customize the background, header, text,
 
 | Slot | Description |
 | --- | --- |
-| `actions` | Action bar at the bottom of the card. |
 | `content` | Main Card body. |
 | `cover` | Image or content above the body. |
 | `extra` | Extra content in the top-right header. |

package/content/container-blocks/carousel.md

@@ -283,56 +283,6 @@ Auto Slide 4
                 color: white
 ```
 
-The active dot fills until the next slide
-
-Second slide
-
-```yaml
-- id: dot_duration_carousel
-  type: Carousel
-  properties:
-    autoplay:
-      dotDuration: true
-    autoplaySpeed: 4000
-  slots:
-    progress_s1:
-      blocks:
-        - id: progress_s1
-          type: Box
-          style:
-            height: 160
-            background: "#1677ff"
-            display: flex
-            alignItems: center
-            justifyContent: center
-          blocks:
-            - id: progress_s1_text
-              type: Title
-              properties:
-                content: The active dot fills until the next slide
-                level: 4
-              style:
-                color: white
-    progress_s2:
-      blocks:
-        - id: progress_s2
-          type: Box
-          style:
-            height: 160
-            background: "#722ed1"
-            display: flex
-            alignItems: center
-            justifyContent: center
-          blocks:
-            - id: progress_s2_text
-              type: Title
-              properties:
-                content: Second slide
-                level: 4
-              style:
-                color: white
-```
-
 Hover to Pause
 
 Autoplay Resumes
@@ -1160,7 +1110,7 @@ Integrate with databases, REST APIs, and GraphQL endpoints effortlessly.
             - id: rich_s1_icon
               type: Icon
               properties:
-                name: Rocket
+                name: AiOutlineRocket
                 size: 40
                 color: white
             - id: rich_s1_title
@@ -1197,7 +1147,7 @@ Integrate with databases, REST APIs, and GraphQL endpoints effortlessly.
             - id: rich_s2_icon
               type: Icon
               properties:
-                name: check-circle
+                name: AiOutlineCheckCircle
                 size: 40
                 color: white
             - id: rich_s2_title
@@ -1233,7 +1183,7 @@ Integrate with databases, REST APIs, and GraphQL endpoints effortlessly.
             - id: rich_s3_icon
               type: Icon
               properties:
-                name: Plug
+                name: AiOutlineApi
                 size: 40
                 color: white
             - id: rich_s3_title
@@ -2245,17 +2195,15 @@ Custom Spacing
 | `adaptiveHeight` | boolean | `false` | Adjust the slide's height automatically. |
 | `arrows` | boolean | `false` | Whether or not to show arrows. |
 | `autoplaySpeed` | integer | `3000` | Delay between each auto scroll (in milliseconds). |
-| `autoplay` | boolean \| object | `false` | Toggles whether or not to scroll automatically. Set to `{ dotDuration: true }` to show the time until the next slide as a progress bar in the active dot. |
-| `autoplay.dotDuration` | boolean | `false` | Show the autoplay progress in the active dot. |
+| `autoplay` | boolean | `false` | Toggles whether or not to scroll automatically. |
 | `centerMode` | boolean | `false` | Center current slide. |
 | `centerPadding` | string | `"50px"` | Padding applied to center slide. |
-| `dotPosition` | string | `"bottom"` | The position of the dots, which can be one of top, bottom, left or right. Left and right dots make the carousel vertical. Enum: `left`, `right`, `top`, `bottom`. |
+| `dotPosition` | string | `"bottom"` | The position of the dots, which can be one of top, bottom, left or right. Enum: `left`, `right`, `top`, `bottom`. |
 | `dots` | boolean | `true` | Whether or not to show the dots. |
 | `draggable` | boolean | `false` | Enable scrollable via dragging on desktop |
 | `easing` | string | `"linear"` | Transition interpolation function name. |
 | `effect` | string | `"scrollx"` | Transition effect, either scrollx or fade. |
 | `focusOnSelect` | boolean | `false` | Go to slide on click. |
-| `initialSlide` | integer | `0` | Index of the slide to show first. |
 | `infinite` | boolean | `true` | Infinitely wrap around contents. |
 | `pauseOnDotsHover` | boolean | `false` | Prevents autoplay while hovering on dot. |
 | `pauseOnFocus` | boolean | `false` | Prevents autoplay while focused on slides. |
@@ -2270,11 +2218,10 @@ Custom Spacing
 | `slidesPerRow` | integer | `1` | Number of slides to display in grid mode, this is useful with rows option. |
 | `slidesToScroll` | integer | `1` | How many slides to scroll at once. |
 | `slidesToShow` | integer | `1` | How many slides to show in one frame. |
-| `speed` | integer | `500` | Slide transition animation speed in milliseconds. |
+| `speed` | integer | `500` | Number of slides to display in grid mode, this is useful with rows option. |
 | `swipeToSlide` | boolean | `false` | Enable drag/swipe irrespective of `slidesToScroll`. |
 | `swipe` | boolean | `true` | Enable/disable swiping to change slides. |
 | `vertical` | boolean | `false` | Whether or not the slides are shown in a column. |
-| `waitForAnimate` | boolean | `false` | Ignore requests to change slide while a slide transition is animating. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design carousel tokens](https://ant.design/components/carousel#design-token). |
 | `theme.dotWidth` | number | `16` | Width of the indicator dot. |
 | `theme.dotHeight` | number | `3` | Height of the indicator dot. |
@@ -2290,7 +2237,7 @@ Custom Spacing
 | `afterChange` | \- | Trigger actions after the slide is changed. |
 | `beforeChange` | \- | Trigger actions before the slide is changed. |
 | `onInit` | \- | Trigger actions when the carousel is initialized. |
-| `onSwipe` | `{ direction }` | Trigger actions when the user starts to swipe or drag the carousel. |
+| `onSwipe` | \- | Trigger actions when the carousel is swiped. |
 
 | Key | Target |
 | --- | --- |

package/content/container-blocks/collapse.md

@@ -221,67 +221,6 @@ Our mission is to democratize application development through low-code and open-
               and open-source technologies.
 ```
 
-Orders ship within two business days.
-
-Unused items can be returned within 30 days.
-
-Compact header and content padding.
-
-Roomy header and content padding.
-
-```yaml
-- id: ghost_collapse
-  type: Collapse
-  properties:
-    ghost: true
-    panels:
-      - key: ghost_shipping
-        title: Shipping (ghost)
-      - key: ghost_returns
-        title: Returns
-  slots:
-    ghost_shipping:
-      blocks:
-        - id: ghost_shipping_text
-          type: Paragraph
-          properties:
-            content: Orders ship within two business days.
-    ghost_returns:
-      blocks:
-        - id: ghost_returns_text
-          type: Paragraph
-          properties:
-            content: Unused items can be returned within 30 days.
-- id: small_collapse
-  type: Collapse
-  properties:
-    size: small
-    panels:
-      - key: small_panel
-        title: Small size
-  slots:
-    small_panel:
-      blocks:
-        - id: small_panel_text
-          type: Paragraph
-          properties:
-            content: Compact header and content padding.
-- id: large_collapse
-  type: Collapse
-  properties:
-    size: large
-    panels:
-      - key: large_panel
-        title: Large size
-  slots:
-    large_panel:
-      blocks:
-        - id: large_panel_text
-          type: Paragraph
-          properties:
-            content: Roomy header and content padding.
-```
-
 **Start (default):**
 
 Premium wireless headphones with active noise cancellation, 30-hour battery life, and multipoint connection.
@@ -367,7 +306,7 @@ The icon rotates 90 degrees when the panel is expanded, providing a visual cue f
 - id: custom_icon_collapse
   type: Collapse
   properties:
-    expandIcon: add-circle
+    expandIcon: AiOutlinePlusCircle
     panels:
       - key: ci_features
         title: Key Features
@@ -401,7 +340,7 @@ The icon rotates 90 degrees when the panel is expanded, providing a visual cue f
   type: Collapse
   properties:
     expandIcon:
-      name: arrow-right
+      name: AiOutlineArrowRight
       color: "#1677ff"
     panels:
       - key: cio_one
@@ -943,7 +882,7 @@ Local development environment running via Docker Compose. Hot-reload enabled for
                 flex: 0 0 auto
               properties:
                 title: View Logs
-                icon: document
+                icon: AiOutlineFileText
                 color: primary
                 variant: outlined
                 size: small
@@ -953,7 +892,7 @@ Local development environment running via Docker Compose. Hot-reload enabled for
                 flex: 0 0 auto
               properties:
                 title: Metrics
-                icon: chart
+                icon: AiOutlineBarChart
                 color: primary
                 variant: outlined
                 size: small
@@ -1355,39 +1294,23 @@ Full platform access with dedicated infrastructure, custom integrations, and whi
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `accordion` | boolean | `false` | If true, only one panel is open at a time. |
-| `activeKey` | string \| array | - | Current panel's key, or a list of keys of the open panels. |
+| `activeKey` | string | - | Current panel's key. |
 | `bordered` | boolean | `true` | Toggles rendering of the border around the collapse block. |
-| `collapsible` | string | - | How panels are toggled: by clicking anywhere in the `header` (default), only the expand `icon`, or `disabled` to stop all panels from toggling. Enum: `header`, `icon`, `disabled`. |
-| `defaultActiveKey` | string \| array | - | Initial active panel key, or a list of keys, if activeKey is not set. |
-| `destroyInactivePanel` | boolean | `false` | Destroy inactive panel. Maps to antd's `destroyOnHidden`. |
-| `expandIcon` | string \| object | - | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block for expand icon on the right of selector. |
-| `expandIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `expandIcon.color` | string | - | Icon color. |
-| `expandIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `expandIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `expandIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `expandIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `expandIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `expandIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `expandIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `defaultActiveKey` | string | - | Initial active panel's key, if activeKey is not set. |
+| `destroyInactivePanel` | boolean | `false` | Destroy inactive panel. |
+| `expandIcon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block for expand icon on the right of selector. |
 | `expandIconPlacement` | string | `"start"` | Set placement of the expand icon. Enum: `start`, `end`. |
-| `forceRender` | boolean | `false` | Force render for all panels. |
-| `ghost` | boolean | `false` | Make the collapse borderless with a transparent background. |
+| `forceRender` | boolean | `"false"` | Force render for all panels. |
 | `panels` | array | - |  |
 | `panels.$.title` | string | - | Title of the panel - supports html. |
 | `panels.$.key` | string | - | Key of the panel. |
 | `panels.$.extraKey` | string | - | Key for the extra area of the panel. |
 | `panels.$.disabled` | boolean | `false` | Disable the panel if true. |
 | `showArrow` | boolean | `true` | Show expand icon. |
-| `size` | string | `"medium"` | Size of the panel headers and content padding. Enum: `small`, `medium`, `large`. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design collapse tokens](https://ant.design/components/collapse#design-token). |
 | `theme.headerPadding` | string | `"12px 16px"` | Padding of the collapse header. |
-| `theme.headerPaddingSM` | string | `"8px 12px 8px 8px"` | Padding of the collapse header when size is small. |
-| `theme.headerPaddingLG` | string | `"16px 24px 16px 16px"` | Padding of the collapse header when size is large. |
 | `theme.headerBg` | string | `"rgba(0, 0, 0, 0.02)"` | Background color of the collapse header. |
 | `theme.contentPadding` | string | `"16px 16px"` | Padding of the collapse content area. |
-| `theme.contentPaddingSM` | number \| string | `12` | Padding of the collapse content area when size is small. |
-| `theme.contentPaddingLG` | number \| string | `24` | Padding of the collapse content area when size is large. |
 | `theme.contentBg` | string | `"#ffffff"` | Background color of the collapse content area. |
 | `theme.borderlessContentPadding` | string | `"4px 16px 16px"` | Padding of the content area in borderless (ghost) style. |
 | `theme.borderlessContentBg` | string | `"transparent"` | Background color of the content area in borderless (ghost) style. |
@@ -1407,7 +1330,6 @@ Full platform access with dedicated infrastructure, custom integrations, and whi
 | `/element` | The Collapse element. |
 | `/expandIcon` | The expand icon in the Collapse. |
 | `/header` | The Collapse header. |
-| `/title` | The panel title text in the Collapse header. |
 | `/content` | The Collapse content. |
 
 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.