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

package/content/container-blocks/flex.md

@@ -44,7 +44,7 @@ Below the second card.
 - id: flex_vertical
   type: Flex
   properties:
-    orientation: vertical
+    vertical: true
     gap: 12
   blocks:
     - id: flex_vert_card1
@@ -81,7 +81,7 @@ Below the second card.
 
 **gap: small (8px)**
 
-**gap: medium (16px)**
+**gap: middle (16px)**
 
 **gap: large (24px)**
 
@@ -121,11 +121,11 @@ Below the second card.
 - id: flex_gap_middle_label
   type: Markdown
   properties:
-    content: "**gap: medium (16px)**"
+    content: "**gap: middle (16px)**"
 - id: flex_gap_middle
   type: Flex
   properties:
-    gap: medium
+    gap: middle
   blocks:
     - id: flex_gm_1
       type: Tag
@@ -853,53 +853,75 @@ flex 2 (grows 2x)
         variant: link
 ```
 
+All Theme Tokens
+
+Combining padding, margin, and colorBgContainer tokens for a fully themed Flex container.
+
 ```yaml
-- id: flex_theme_medium
+- id: flex_theme_padding
   type: Flex
   properties:
-    gap: medium
+    gap: 12
     theme:
-      padding: 32
+      padding: 24
+      margin: 8
   blocks:
-    - id: flex_theme_medium_btn1
+    - id: flex_theme_padding_btn1
       type: Button
       layout:
         flex: 0 0 auto
       properties:
-        title: Wider medium gap
+        title: Custom Padding
         color: primary
         variant: solid
-    - id: flex_theme_medium_btn2
+    - id: flex_theme_padding_btn2
       type: Button
       layout:
         flex: 0 0 auto
       properties:
-        title: padding token 32
+        title: And Margin
         color: primary
         variant: outlined
-- id: flex_theme_small
+- id: flex_theme_bg
   type: Flex
   properties:
-    gap: small
-    theme:
-      paddingXS: 2
+    gap: 12
   blocks:
-    - id: flex_theme_small_btn1
+    - id: flex_theme_bg_btn1
       type: Button
       layout:
         flex: 0 0 auto
       properties:
-        title: Tighter small gap
+        title: Token A
         color: green
         variant: solid
-    - id: flex_theme_small_btn2
+    - id: flex_theme_bg_btn2
       type: Button
       layout:
         flex: 0 0 auto
       properties:
-        title: paddingXS token 2
+        title: Token B
         color: green
         variant: outlined
+- id: flex_theme_combined
+  type: Flex
+  properties:
+    gap: 16
+    vertical: true
+    theme:
+      padding: 20
+      margin: 4
+  blocks:
+    - id: flex_theme_combined_title
+      type: Title
+      properties:
+        content: All Theme Tokens
+        level: 5
+    - id: flex_theme_combined_p
+      type: Paragraph
+      properties:
+        content: Combining padding, margin, and colorBgContainer tokens for a fully
+          themed Flex container.
 ```
 
 Dark Panel
@@ -911,7 +933,7 @@ Dark Panel
     .element:
       padding: 16px
       borderRadius: 8px
-      border: "1px dashed #91caff"
+      border: 1px dashed
   properties:
     gap: 12
     justify: center
@@ -971,7 +993,7 @@ Ring utility applied to the element CSS key.
 - id: flex_tw_gradient
   type: Flex
   class:
-    .element: bg-gradient-to-r from-primary/100 to-purple-600 p-6 rounded-xl shadow-lg
+    element: bg-gradient-to-r from-primary/100 to-purple-600 p-6 rounded-xl shadow-lg
   properties:
     gap: 16
     align: center
@@ -997,7 +1019,7 @@ Ring utility applied to the element CSS key.
 - id: flex_tw_bordered
   type: Flex
   class:
-    .element: border-2 border-dashed border-border p-4 rounded-lg
+    element: border-2 border-dashed border-border p-4 rounded-lg
       hover:border-blue-400 transition-colors duration-200
   properties:
     gap: 12
@@ -1028,7 +1050,7 @@ Ring utility applied to the element CSS key.
 - id: flex_tw_ring
   type: Flex
   class:
-    .element: ring-2 ring-green-400 ring-offset-2 p-4 rounded-lg bg-bg-layout
+    element: ring-2 ring-green-400 ring-offset-2 p-4 rounded-lg bg-bg-layout
   properties:
     gap: 8
     align: center
@@ -1038,7 +1060,7 @@ Ring utility applied to the element CSS key.
       layout:
         flex: 0 0 auto
       properties:
-        name: check-circle
+        name: AiOutlineCheckCircle
         color: "#52c41a"
         size: 24
     - id: flex_tw_ring_text
@@ -1091,7 +1113,7 @@ Dashboard
             flex: 0 0 auto
           properties:
             title: Filter
-            icon: filter
+            icon: AiOutlineFilter
             color: default
             variant: outlined
             size: small
@@ -1108,7 +1130,7 @@ Dashboard
             flex: 0 0 auto
           properties:
             title: Export
-            icon: download
+            icon: AiOutlineDownload
             color: primary
             variant: solid
             size: small
@@ -1206,9 +1228,10 @@ Senior Product Designer at Acme Corp
       layout:
         flex: 0 0 auto
       properties:
-        icon: user
+        icon: AiOutlineUser
         size: 72
-        color: "#1677ff"
+        color: "#fff"
+        backgroundColor: "#1677ff"
     - id: flex_profile_info
       type: Flex
       layout:
@@ -1266,7 +1289,7 @@ Senior Product Designer at Acme Corp
             flex: 0 0 auto
           properties:
             title: Message
-            icon: mail
+            icon: AiOutlineMail
             color: primary
             variant: outlined
           events:
@@ -1282,7 +1305,7 @@ Senior Product Designer at Acme Corp
             flex: 0 0 auto
           properties:
             title: Follow
-            icon: UserPlus
+            icon: AiOutlineUserAdd
             color: primary
             variant: solid
           events:
@@ -1336,7 +1359,7 @@ Custom plugins for blocks, connections, operators, and actions let you extend fu
               layout:
                 flex: 0 0 auto
               properties:
-                name: Zap
+                name: AiOutlineThunderbolt
                 color: "#1677ff"
                 size: 28
             - id: flex_feature1_title
@@ -1383,7 +1406,7 @@ Custom plugins for blocks, connections, operators, and actions let you extend fu
               layout:
                 flex: 0 0 auto
               properties:
-                name: Shield
+                name: AiOutlineSafety
                 color: "#52c41a"
                 size: 28
             - id: flex_feature2_title
@@ -1430,7 +1453,7 @@ Custom plugins for blocks, connections, operators, and actions let you extend fu
               layout:
                 flex: 0 0 auto
               properties:
-                name: Maximize2
+                name: AiOutlineExpandAlt
                 color: "#722ed1"
                 size: 28
             - id: flex_feature3_title
@@ -1463,18 +1486,17 @@ Custom plugins for blocks, connections, operators, and actions let you extend fu
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `orientation` | string | `"horizontal"` | Direction of the main axis. Takes precedence over vertical. Enum: `horizontal`, `vertical`. |
 | `vertical` | boolean | `false` | Whether the main axis direction is vertical. |
 | `wrap` | boolean \| string | - | Set whether the element is displayed in a single line or in multiple lines. |
-| `justify` | string | - | Set the alignment of elements on the main axis. Enum: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`, `start`, `end`, `left`, `right`, `stretch`, `normal`. |
-| `align` | string | - | Set the alignment of elements on the cross axis. Enum: `flex-start`, `center`, `flex-end`, `stretch`, `baseline`, `start`, `end`, `self-start`, `self-end`, `normal`. |
-| `gap` | string \| number | - | Set the gap between items. Can be "small", "medium" ("middle" is an alias), "large", a number of pixels or a CSS length. |
+| `justify` | string | - | Set the alignment of elements on the main axis. Enum: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`. |
+| `align` | string | - | Set the alignment of elements on the cross axis. Enum: `flex-start`, `center`, `flex-end`, `stretch`, `baseline`. |
+| `gap` | string \| number | - | Set the gap between items. Can be "small", "middle", "large", or a number. |
 | `flex` | string \| number | - | Flex CSS shorthand property. |
 | `component` | string | - | Custom element type. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design flex tokens](https://ant.design/components/flex#design-token). |
-| `theme.paddingXS` | number | `8` | Gap of the "small" gap preset. |
-| `theme.padding` | number | `16` | Gap of the "medium" gap preset. |
-| `theme.paddingLG` | number | `24` | Gap of the "large" gap preset. |
+| `theme.padding` | number | - | Base padding value. |
+| `theme.margin` | number | - | Base margin value. |
+| `theme.colorBgContainer` | string | - | Background color when used with a custom component wrapper. |
 
 No events defined.
 

package/content/container-blocks/footer.md

@@ -90,8 +90,7 @@ Made with Lowdefy
           type: Paragraph
           properties:
             content: Made with Lowdefy
-          style:
-            .element:
+            style:
               marginTop: 8px
               color: "#999"
 ```
@@ -126,7 +125,7 @@ Company
     - id: footer_corp_el
       type: Footer
       class:
-        .element: bg-bg-layout
+        element: bg-bg-layout
       style:
         padding: 40px 50px 24px
       blocks:
@@ -152,8 +151,7 @@ Company
                   type: Paragraph
                   properties:
                     content: Building better tools for modern teams since 2020.
-                  style:
-                    .element:
+                    style:
                       color: "#666"
             - id: footer_corp_col2
               type: Box
@@ -235,8 +233,7 @@ Company
                 flex: 0 0 auto
               properties:
                 content: © 2026 Acme Corp. All rights reserved.
-              style:
-                .element:
+                style:
                   color: "#999"
                   margin: 0
             - id: footer_corp_social
@@ -250,7 +247,7 @@ Company
                   layout:
                     flex: 0 0 auto
                   properties:
-                    icon: GitBranch
+                    icon: AiOutlineGithub
                     color: default
                     variant: text
                     size: small
@@ -260,7 +257,7 @@ Company
                   layout:
                     flex: 0 0 auto
                   properties:
-                    icon: Bird
+                    icon: AiOutlineTwitter
                     color: default
                     variant: text
                     size: small
@@ -297,17 +294,17 @@ Admin Portal v2.4.1 - Powered by Lowdefy
                 type: MenuLink
                 properties:
                   title: Dashboard
-                  icon: Gauge
+                  icon: AiOutlineDashboard
               - id: footer_admin_menu_users
                 type: MenuLink
                 properties:
                   title: Users
-                  icon: user
+                  icon: AiOutlineUser
               - id: footer_admin_menu_settings
                 type: MenuLink
                 properties:
                   title: Settings
-                  icon: settings
+                  icon: AiOutlineSetting
     - id: footer_admin_inner_layout
       type: Layout
       layout:
@@ -361,8 +358,7 @@ Admin Portal v2.4.1 - Powered by Lowdefy
               type: Paragraph
               properties:
                 content: Admin Portal v2.4.1 - Powered by Lowdefy
-              style:
-                .element:
+                style:
                   color: "#999"
                   margin: 0
                   fontSize: 12px
@@ -370,7 +366,7 @@ Admin Portal v2.4.1 - Powered by Lowdefy
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `theme` | object | - | Not applied: antd scopes Layout design tokens to the Layout element, so set tokens such as headerHeight or footerBg on the parent Layout block theme. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). |
 
 No events defined.
 

package/content/container-blocks/googlemapsheatmap.md

@@ -470,7 +470,7 @@ Real-time air quality index readings from distributed sensor stations. Warmer ar
             flex: 0 0 auto
           properties:
             title: Refresh Data
-            icon: refresh
+            icon: AiOutlineReload
             color: primary
             variant: outlined
             size: small

package/content/container-blocks/googlemapsscript.md

@@ -1,8 +1,8 @@
 # GoogleMapsScript
 
-Loads the Google Maps JavaScript API and wraps `GoogleMaps`, `GoogleMapsHeatmap` and `PlacesAutocomplete` blocks as a parent container. Configure the API key, language, region, libraries, and API version. Blocks that use an optional library should be wrapped in a GoogleMapsScript that loads it — list `libraries: [places]` for `PlacesAutocomplete` so the library is ready on first render. When it is not listed, `PlacesAutocomplete` imports it on demand through `google.maps.importLibrary`.
+Loads the Google Maps JavaScript API and wraps `GoogleMaps` and `GoogleMapsHeatmap` blocks as a parent container. Configure the API key, language, region, libraries, and API version.
 
-> GoogleMapsScript loads the Google Maps JavaScript API. Only one GoogleMapsScript should be used per page. It must wrap GoogleMaps, GoogleMapsHeatmap or PlacesAutocomplete blocks as a parent container. The examples below show configuration patterns — maps require a valid API key to render.
+> GoogleMapsScript loads the Google Maps JavaScript API. Only one GoogleMapsScript should be used per page. It must wrap GoogleMaps or GoogleMapsHeatmap blocks as a parent container. The examples below show configuration patterns — maps require a valid API key to render.
 
 ```yaml
 - id: gms_full_config

package/content/container-blocks/header.md

@@ -34,7 +34,7 @@ Page header layout section. Supports built-in notifications, profile avatar, and
         flex: 0 0 auto
       properties:
         title: Home
-        icon: home
+        icon: AiOutlineHome
         color: default
         variant: link
     - id: header_nav_about
@@ -71,19 +71,19 @@ Page header layout section. Supports built-in notifications, profile avatar, and
           type: MenuLink
           properties:
             title: My Profile
-            icon: user
+            icon: AiOutlineUser
         - id: header_prof_settings
           type: MenuLink
           properties:
             title: Settings
-            icon: settings
+            icon: AiOutlineSetting
         - id: header_prof_divider
           type: MenuDivider
         - id: header_prof_logout
           type: MenuLink
           properties:
             title: Logout
-            icon: logout
+            icon: AiOutlineLogout
             danger: true
   style:
     borderBottom: 1px solid var(--ant-color-border)
@@ -100,7 +100,7 @@ Page header layout section. Supports built-in notifications, profile avatar, and
         flex: 0 0 auto
       properties:
         title: Overview
-        icon: Gauge
+        icon: AiOutlineDashboard
         color: default
         variant: link
     - id: header_profile_projects
@@ -109,7 +109,7 @@ Page header layout section. Supports built-in notifications, profile avatar, and
         flex: 0 0 auto
       properties:
         title: Projects
-        icon: SquareKanban
+        icon: AiOutlineProject
         color: default
         variant: link
 ```
@@ -198,51 +198,43 @@ A Header for marketing pages with button navigation and call-to-action buttons.
 ```
 
 ```yaml
-- id: header_token_branded_layout
-  type: Layout
+- id: header_token_branded
+  type: Header
   properties:
     theme:
+      headerBg: "#0958d9"
       headerHeight: 56
       headerPadding: 0 24px
   blocks:
-    - id: header_token_branded
-      type: Header
+    - id: header_token_branded_title
+      type: Html
+      layout:
+        flex: 0 0 auto
       properties:
-        color: "#0958d9"
-      blocks:
-        - id: header_token_branded_title
-          type: Html
-          layout:
-            flex: 0 0 auto
-          properties:
-            html: <span class="text-white text-lg font-bold">Branded Header</span>
-        - id: header_token_branded_spacer
-          type: Box
-          layout:
-            flex: 1 1 0
-        - id: header_token_branded_subtitle
-          type: Html
-          layout:
-            flex: 0 0 auto
-          properties:
-            html: <span style="color:#bae0ff">color property with Layout headerHeight and
-              headerPadding tokens</span>
-- id: header_token_compact_layout
-  type: Layout
+        html: <span class="text-white text-lg font-bold">Branded Header</span>
+    - id: header_token_branded_spacer
+      type: Box
+      layout:
+        flex: 1 1 0
+    - id: header_token_branded_subtitle
+      type: Html
+      layout:
+        flex: 0 0 auto
+      properties:
+        html: <span style="color:#bae0ff">Using headerBg token</span>
+- id: header_token_compact
+  type: Header
   properties:
     theme:
       headerHeight: 40
       headerPadding: 0 16px
+  style:
+    borderBottom: 1px solid var(--ant-color-border)
   blocks:
-    - id: header_token_compact
-      type: Header
-      style:
-        borderBottom: 1px solid var(--ant-color-border)
-      blocks:
-        - id: header_token_compact_title
-          type: Html
-          properties:
-            html: <span class="text-sm">Compact Header (40px height)</span>
+    - id: header_token_compact_title
+      type: Html
+      properties:
+        html: <span class="text-sm">Compact Header (40px height)</span>
 ```
 
 | Property | Type | Default | Description |
@@ -259,33 +251,15 @@ A Header for marketing pages with button navigation and call-to-action buttons.
 | `notifications.showZero` | boolean | `false` | Show badge when count is zero. |
 | `notifications.overflowCount` | number | `99` | Max count to show. Values above this display as "N+". |
 | `notifications.color` | string | - | Badge color. |
-| `notifications.icon` | string \| object | - | Icon for the notification button. Defaults to `bell`. |
-| `notifications.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `notifications.icon.color` | string | - | Icon color. |
-| `notifications.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `notifications.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `notifications.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `notifications.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `notifications.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `notifications.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `notifications.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `notifications.icon` | string \| object | - | Icon for the notification button. Defaults to AiOutlineBell. |
 | `notifications.size` | string | `"small"` | Size of the notification button. Enum: `small`, `default`, `large`. |
 | `profile` | object | - | Profile avatar with optional dropdown menu in the header. Renders when configured. Use with the _user operator to populate from the authenticated user. |
 | `profile.avatar` | object | - | Avatar display properties. |
 | `profile.avatar.src` | string | - | Image URL for the avatar. Typically bound to _user: image. |
 | `profile.avatar.content` | string | - | Text content inside the avatar (e.g. user initials). Shown when no src is provided. |
-| `profile.avatar.icon` | string \| object | - | Icon to display in avatar when no src or content is set. Defaults to `user`. |
-| `profile.avatar.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `profile.avatar.icon.color` | string | - | Icon color. |
-| `profile.avatar.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `profile.avatar.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `profile.avatar.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `profile.avatar.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `profile.avatar.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `profile.avatar.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `profile.avatar.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `profile.avatar.icon` | string \| object | - | Icon to display in avatar when no src or content is set. Defaults to AiOutlineUser. |
 | `profile.avatar.color` | string | - | Background color of the avatar when not using src. |
-| `profile.avatar.size` | string \| number | `"small"` | Size of the avatar: default, small, large or a pixel number. |
+| `profile.avatar.size` | string \| number | `"small"` | Size of the avatar. Enum: `default`, `small`, `large`. |
 | `profile.avatar.shape` | string | `"circle"` | Shape of the avatar. Enum: `circle`, `square`. |
 | `profile.links` | array | - | Dropdown menu items. Uses the same MenuLink/MenuGroup/MenuDivider pattern as DropdownMenu. When links are provided, clicking the avatar opens a dropdown menu. |
 | `profile.links.$.id` | string | - | Menu item id. |
@@ -296,15 +270,6 @@ A Header for marketing pages with button navigation and call-to-action buttons.
 | `profile.links.$.properties` | object | - | Properties for the menu item. |
 | `profile.links.$.properties.title` | string | - | Menu item title. |
 | `profile.links.$.properties.icon` | string \| object | - | Icon for the menu item. |
-| `profile.links.$.properties.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `profile.links.$.properties.icon.color` | string | - | Icon color. |
-| `profile.links.$.properties.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `profile.links.$.properties.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `profile.links.$.properties.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `profile.links.$.properties.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `profile.links.$.properties.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `profile.links.$.properties.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `profile.links.$.properties.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
 | `profile.links.$.properties.danger` | boolean | `false` | Apply danger style to menu item. |
 | `profile.links.$.properties.disabled` | boolean | `false` | Disable the menu item. |
 | `profile.trigger` | string | `"hover"` | How the profile dropdown opens. Enum: `click`, `hover`. |
@@ -312,7 +277,7 @@ A Header for marketing pages with button navigation and call-to-action buttons.
 | `profile.arrow` | boolean \| object | `false` | Show arrow on the dropdown. |
 | `profile.arrow.pointAtCenter` | boolean | - |  |
 | `darkModeToggle` | boolean | `false` | Show a dark mode toggle icon in the header. Toggles the Ant Design dark theme for the entire page. Preference is persisted to localStorage. |
-| `theme` | object | - | Not applied: antd scopes Layout design tokens to the Layout element, so set tokens such as headerHeight or footerBg on the parent Layout block theme. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). |
 
 | Event | Event Data | Description |
 | --- | --- | --- |

package/content/container-blocks/label.md

@@ -205,20 +205,6 @@ Form label wrapper with title, description, and validation feedback.
       type: TextInput
 ```
 
-```yaml
-- id: label_wrap_inline
-  type: Label
-  layout:
-    span: 12
-  properties:
-    title: A long inline label that wraps onto a second line when space runs out
-    inline: true
-    wrap: true
-  blocks:
-    - id: label_wrap_inline_input
-      type: TextInput
-```
-
 ```yaml
 - id: label_inline_small
   type: Label
@@ -356,8 +342,8 @@ Form label wrapper with title, description, and validation feedback.
     title: Styled Label Text
     extra: Styled extra text
   class:
-    .label: text-purple-600 font-bold
-    .extra: text-purple-400 italic
+    label: text-purple-600 font-bold
+    extra: text-purple-400 italic
   blocks:
     - id: label_css_label_input
       type: TextInput
@@ -366,7 +352,7 @@ Form label wrapper with title, description, and validation feedback.
   properties:
     title: Bordered Container
   class:
-    .element: border border-border p-3 rounded-lg
+    element: border border-border p-3 rounded-lg
   blocks:
     - id: label_css_element_input
       type: TextInput
@@ -375,7 +361,7 @@ Form label wrapper with title, description, and validation feedback.
   properties:
     title: Feedback Styling
   class:
-    .feedback: font-semibold text-xs
+    feedback: font-semibold text-xs
   blocks:
     - id: label_css_feedback_input
       type: TextInput
@@ -393,7 +379,7 @@ Form label wrapper with title, description, and validation feedback.
       color: "#d48806"
       fontStyle: italic
     .element:
-      border: "1px solid #ffd591"
+      border: 1px solid
       padding: 12px
       borderRadius: 8px
   blocks:
@@ -711,18 +697,6 @@ Form label wrapper with title, description, and validation feedback.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `xs` | object | - | Label width on extra small screens (below 576px) when the label is not inline. |
-| `xs.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `sm` | object | - | Label width on small screens (576px and up) when the label is not inline. Also applies below 576px unless `xs` is set. |
-| `sm.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `md` | object | - | Label width on medium screens (768px and up) when the label is not inline. Overrides `span`. |
-| `md.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `lg` | object | - | Label width on large screens (992px and up) when the label is not inline. |
-| `lg.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `xl` | object | - | Label width on extra large screens (1200px and up) when the label is not inline. |
-| `xl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `xxl` | object | - | Label width on extra extra large screens (1600px and up) when the label is not inline. |
-| `xxl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
 | `align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `colon` | boolean | `true` | Append label with colon. |
 | `disabled` | boolean | `false` | Disable to not render a label title. |
@@ -731,11 +705,10 @@ Form label wrapper with title, description, and validation feedback.
 | `title` | string | - | Label title - supports html. |
 | `tooltip` | string \| object | - | Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon. |
 | `tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
-| `tooltip.icon` | string | `"help"` | Icon name to show beside the label: a semantic name like `help`, a Lucide icon name like `CircleQuestionMark`, or a set-qualified name like `tabler:HelpCircle`. |
+| `tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
 | `tooltip.color` | string | - | Color of the tooltip icon. |
-| `span` | number | - | Label width in columns, out of 24, on medium screens (768px) and up when the label is not inline. The content takes the remaining columns. |
+| `span` | number | - | Label inline span. |
 | `inline` | boolean | `false` | Render input and label inline. |
-| `wrap` | boolean | `false` | Wrap long label text onto multiple lines when the label is inline. Labels above their content always wrap. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design form tokens](https://ant.design/components/form#design-token). |
 | `theme.labelFontSize` | number | `14` | Font size of the label text. |
 | `theme.labelColor` | string | `"rgba(0,0,0,0.88)"` | Text color of the label. |