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

package/content/display-blocks/title.md

@@ -154,8 +154,6 @@ Deleted Title
 
 Italic & Underlined
 
-Esc
-
 ```yaml
 - id: deco_italic
   type: Title
@@ -188,12 +186,6 @@ Esc
     level: 4
     italic: true
     underline: true
-- id: deco_keyboard
-  type: Title
-  properties:
-    content: Esc
-    level: 4
-    keyboard: true
 ```
 
 Disabled Section Heading
@@ -287,7 +279,7 @@ Two-state copy icons
     content: Custom copy icon
     level: 4
     copyable:
-      icon: Files
+      icon: AiOutlineSnippets
 - id: copyable_two_icons
   type: Title
   properties:
@@ -295,8 +287,8 @@ Two-state copy icons
     level: 4
     copyable:
       icon:
-        - copy
-        - check
+        - AiOutlineCopy
+        - AiOutlineCheck
       tooltips:
         - Copy text
         - Done!
@@ -310,10 +302,6 @@ This long title can be expanded by clicking the expand control. It demonstrates
 
 This title has a custom suffix appended after the ellipsis truncation point so readers know more content exists.
 
-This long title can be expanded and collapsed again. The expand and collapse buttons use custom text set with the symbol option.
-
-Hover this truncated title to see the full heading in a tooltip, which helps when titles come from user data.
-
 ```yaml
 - id: ellipsis_single
   type: Title
@@ -351,26 +339,6 @@ Hover this truncated title to see the full heading in a tooltip, which helps whe
     ellipsis:
       rows: 1
       suffix: " /Read More"
-- id: ellipsis_collapsible
-  type: Title
-  properties:
-    content: This long title can be expanded and collapsed again. The expand and
-      collapse buttons use custom text set with the symbol option.
-    level: 5
-    ellipsis:
-      rows: 1
-      expandable: collapsible
-      symbol:
-        - more
-        - less
-- id: ellipsis_tooltip
-  type: Title
-  properties:
-    content: Hover this truncated title to see the full heading in a tooltip, which
-      helps when titles come from user data.
-    level: 4
-    ellipsis:
-      tooltip: true
 ```
 
 Tailwind Background
@@ -409,7 +377,7 @@ Inline Text Shadow
     level: 4
   style:
     .element:
-      borderBottom: "2px solid #1677ff"
+      borderBottom: 2px solid
       paddingBottom: 8px
 - id: css_inline_shadow
   type: Title
@@ -503,7 +471,7 @@ Learn how Lowdefy simplifies complex application development by replacing boiler
             flex: 0 0 auto
           properties:
             title: By Jane Smith
-            icon: user
+            icon: AiOutlineUser
             color: default
             variant: text
             size: small
@@ -513,7 +481,7 @@ Learn how Lowdefy simplifies complex application development by replacing boiler
             flex: 0 0 auto
           properties:
             title: March 12, 2026
-            icon: calendar
+            icon: AiOutlineCalendar
             color: default
             variant: text
             size: small
@@ -631,8 +599,6 @@ Recent Activity
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `actions` | object | - | Configure the bar of action buttons, such as copy and expand. |
-| `actions.placement` | string | `"end"` | Place the action buttons before or after the text. Enum: `start`, `end`. |
 | `code` | boolean | `false` | Apply code style. |
 | `color` | string | - | Title color. |
 | `content` | string | - | Title text content - supports html. |
@@ -644,20 +610,16 @@ Recent Activity
 | `disabled` | boolean | `false` | Apply disabled style. |
 | `ellipsis` | boolean \| object | `false` | Display ellipsis when text overflows a single line. |
 | `ellipsis.rows` | number | - | Max rows of content. |
-| `ellipsis.expandable` | boolean \| string | - | Show a button that expands the hidden content. Set to 'collapsible' to also allow collapsing it again. Enum: `true`, `false`, `collapsible`. |
-| `ellipsis.defaultExpanded` | boolean | `false` | Start with the content expanded. |
+| `ellipsis.expandable` | boolean | - | Expand hidden content when clicked. |
 | `ellipsis.suffix` | string | - | Suffix of ellipses content. |
-| `ellipsis.symbol` | string \| array | - | Text of the expand button, or an array of two strings for the expand and collapse buttons. |
-| `ellipsis.tooltip` | boolean \| string | - | Show a tooltip when the text is truncated. true shows the full text, a string shows that text. |
 | `italic` | boolean | `false` | Apply italic style. |
-| `keyboard` | boolean | `false` | Apply keyboard key style. |
 | `level` | number | `1` | Set title type. Matches with h1, h2, h3 and h4. Enum: `1`, `2`, `3`, `4`, `5`. |
 | `mark` | boolean | `false` | Apply marked (highlighted) style. |
-| `type` | string | `"default"` | Additional types. Don't specify for default. Enum: `default`, `secondary`, `warning`, `danger`, `success`. |
+| `type` | string | `"default"` | Additional types. Don't specify for default. Enum: `secondary`, `warning`, `danger`, `success`. |
 | `underline` | boolean | `false` | Apply underline style. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design typography tokens](https://ant.design/components/typography#design-token). |
-| `theme.titleMarginBottom` | string \| number | `"0.5em"` | Margin bottom of title, as a CSS length or a number of pixels. |
-| `theme.titleMarginTop` | string \| number | `"1.2em"` | Margin top of title, as a CSS length or a number of pixels. |
+| `theme.titleMarginBottom` | string | `"0.5em"` | Margin bottom of title. |
+| `theme.titleMarginTop` | string | `"1.2em"` | Margin top of title. |
 | `theme.fontSizeHeading1` | number | `38` | Font size of h1 heading. |
 | `theme.fontSizeHeading2` | number | `30` | Font size of h2 heading. |
 | `theme.fontSizeHeading3` | number | `24` | Font size of h3 heading. |
@@ -680,7 +642,7 @@ Recent Activity
 
 | Event | Event Data | Description |
 | --- | --- | --- |
-| `onExpand` | `{ expanded }` | Trigger action when the ellipsis expand or collapse button is clicked. |
+| `onExpand` | \- | Trigger action when ellipse expand is clicked. |
 | `onCopy` | \- | Trigger action when copy text is clicked. |
 
 | Key | Target |
@@ -688,6 +650,5 @@ Recent Activity
 | `/block` | Outer block wrapper (always available). |
 | `/element` | The Title element. |
 | `/copyableIcon` | The copyable icon in the Title. |
-| `/actions` | The bar of action buttons, such as copy and expand, next to the text. |
 
 No slots defined.

package/content/display-blocks/tour.md

@@ -318,7 +318,7 @@ Guided tour with steps, masks, and keyboard navigation.
         title: Upload
         color: primary
         variant: solid
-        icon: upload
+        icon: AiOutlineUpload
     - id: target_save_btn
       type: Button
       layout:
@@ -327,7 +327,7 @@ Guided tour with steps, masks, and keyboard navigation.
         title: Save Draft
         color: green
         variant: outlined
-        icon: save
+        icon: AiOutlineSave
     - id: target_share_btn
       type: Button
       layout:
@@ -336,7 +336,7 @@ Guided tour with steps, masks, and keyboard navigation.
         title: Share
         color: purple
         variant: solid
-        icon: share
+        icon: AiOutlineShareAlt
 - id: target_tour
   type: Tour
   properties:
@@ -705,7 +705,7 @@ Guided tour with steps, masks, and keyboard navigation.
   type: Tour
   style:
     .mask:
-      boxShadow: "inset 0 0 15px #333"
+      boxShadow: inset 0 0 15px
   properties:
     open:
       _state: mask_custom_tour_open
@@ -1027,7 +1027,7 @@ Guided tour with steps, masks, and keyboard navigation.
         title: Dashboard
         color: primary
         variant: solid
-        icon: Gauge
+        icon: AiOutlineDashboard
     - id: cover_target_btn_2
       type: Button
       layout:
@@ -1036,7 +1036,7 @@ Guided tour with steps, masks, and keyboard navigation.
         title: Settings
         color: default
         variant: outlined
-        icon: settings
+        icon: AiOutlineSetting
 - id: cover_target_tour
   type: Tour
   properties:
@@ -1322,7 +1322,7 @@ Guided tour with steps, masks, and keyboard navigation.
         title: Cannot Click During Tour
         color: primary
         variant: solid
-        icon: lock
+        icon: AiOutlineLock
 - id: disabled_interaction_tour
   type: Tour
   properties:
@@ -1470,8 +1470,8 @@ Guided tour with steps, masks, and keyboard navigation.
     open:
       _state: gap_large_tour_open
     gap:
-      offset: 20
-      radius: 8
+      x: 20
+      y: 20
     steps:
       - title: Large Gap
         description: Increased gap (20px) around the target for more breathing room.
@@ -1493,8 +1493,8 @@ Guided tour with steps, masks, and keyboard navigation.
     open:
       _state: gap_tight_tour_open
     gap:
-      offset: 0
-      radius: 0
+      x: 0
+      y: 0
     steps:
       - title: No Gap
         description: The highlight fits tightly around the target with zero spacing.
@@ -2086,7 +2086,7 @@ Welcome to the application. Click the button below to take a guided tour of the
             title: Create New
             color: primary
             variant: solid
-            icon: add
+            icon: AiOutlinePlus
         - id: onboard_profile_btn
           type: Button
           layout:
@@ -2095,7 +2095,7 @@ Welcome to the application. Click the button below to take a guided tour of the
             title: Profile
             color: default
             variant: text
-            icon: user
+            icon: AiOutlineUser
         - id: onboard_settings_btn
           type: Button
           layout:
@@ -2104,7 +2104,7 @@ Welcome to the application. Click the button below to take a guided tour of the
             title: Settings
             color: default
             variant: text
-            icon: settings
+            icon: AiOutlineSetting
     - id: onboard_content
       type: Markdown
       properties:
@@ -2125,7 +2125,7 @@ Welcome to the application. Click the button below to take a guided tour of the
             title: Take the Tour
             color: primary
             variant: solid
-            icon: help
+            icon: AiOutlineQuestionCircle
           events:
             onClick:
               - id: onboard_start_tour
@@ -2218,7 +2218,7 @@ Welcome to the application. Click the button below to take a guided tour of the
             color: primary
             variant: solid
             size: small
-            icon: save
+            icon: AiOutlineSave
         - id: feature_export_btn
           type: Button
           layout:
@@ -2228,7 +2228,7 @@ Welcome to the application. Click the button below to take a guided tour of the
             color: default
             variant: outlined
             size: small
-            icon: SquareArrowOutUpRight
+            icon: AiOutlineExport
     - id: feature_editor
       type: TextArea
       properties:
@@ -2250,7 +2250,7 @@ Welcome to the application. Click the button below to take a guided tour of the
             title: Learn Editor Features
             color: primary
             variant: outlined
-            icon: Lightbulb
+            icon: AiOutlineBulb
           events:
             onClick:
               - id: feature_start_tour
@@ -2308,26 +2308,20 @@ Welcome to the application. Click the button below to take a guided tour of the
 | `closable` | boolean | `true` | Whether the close button is visible. |
 | `current` | integer | - | Current step index. |
 | `disabledInteraction` | boolean | `false` | Whether to disable interaction with the page while the tour is active. |
-| `gap` | object | - | Gap between the highlighted area and the target element, and its radius. |
-| `gap.offset` | number \| array | `6` | Gap in pixels around the target, or a [horizontal, vertical] pair of gaps. |
-| `gap.radius` | number | `2` | Border radius of the highlighted area in pixels. |
-| `gap.x` | number | - | Horizontal gap offset. Same as the first value of `offset`. |
-| `gap.y` | number | - | Vertical gap offset. Same as the second value of `offset`. |
+| `gap` | object | - | Gap offset between highlighted area and target element. |
+| `gap.x` | number | - | Horizontal gap offset. |
+| `gap.y` | number | - | Vertical gap offset. |
 | `keyboard` | boolean | `true` | Whether to enable keyboard navigation. |
 | `mask` | boolean \| object | `true` | Whether to enable mask. |
 | `open` | boolean | `false` | Whether to show the tour. |
-| `placement` | string | `"bottom"` | Position of the guide card relative to the target element: center, left, leftTop, leftBottom, right, rightTop, rightBottom, top, topLeft, topRight, bottom, bottomLeft or bottomRight. |
-| `scrollIntoViewOptions` | boolean \| object | `true` | Whether to scroll the step target element into view, or scrollIntoView options such as `{ block: center }`. |
+| `placement` | string | - | Position of the guide card relative to the target element. |
+| `scrollIntoViewOptions` | boolean | `true` | Whether to scroll the step target element into view. |
 | `steps` | array | - | Tour steps. Each step has title, description, target (blockId string), placement, etc. |
 | `steps.$.arrow` | boolean \| object | - | Whether to show the arrow for this step, or object with pointAtCenter. |
 | `steps.$.closable` | boolean | - | Whether the close button is visible for this step. |
 | `steps.$.cover` | string | - | Cover image URL for the step. |
 | `steps.$.description` | string | - | Description of the step. |
 | `steps.$.mask` | boolean \| object | - | Whether to enable mask for this step, or object with style and color properties. |
-| `steps.$.nextButtonProps` | object | - | Next button settings for this step. |
-| `steps.$.nextButtonProps.children` | string | - | Text of the next button, for example "Got it". |
-| `steps.$.prevButtonProps` | object | - | Previous button settings for this step. |
-| `steps.$.prevButtonProps.children` | string | - | Text of the previous button. |
 | `steps.$.placement` | string | - | Position of the guide card relative to the target element. |
 | `steps.$.target` | string | - | The blockId of the target element for this step. |
 | `steps.$.title` | string | - | Title of the step. |
@@ -2361,9 +2355,5 @@ Welcome to the application. Click the button below to take a guided tour of the
 | `/block` | Outer block wrapper (always available). |
 | `/element` | The Tour element. |
 | `/mask` | The Tour mask. |
-| `/title` | The title of the step card. |
-| `/description` | The description of the step card. |
-| `/cover` | The cover image area of the step card. |
-| `/footer` | The footer of the step card with the indicators and buttons. |
 
 No slots defined.

package/content/input-blocks/autocomplete.md

@@ -192,45 +192,6 @@ Text input with auto-complete suggestions from a list of options.
       - Option A
       - Option B
       - Option C
-- id: variant_underlined
-  type: AutoComplete
-  properties:
-    title: Underlined
-    variant: underlined
-    options:
-      - Apple
-      - Banana
-      - Cherry
-```
-
-```yaml
-- id: prefix_search
-  type: AutoComplete
-  properties:
-    title: Search Fruit
-    prefixIcon: search
-    options:
-      - Apple
-      - Apricot
-      - Banana
-      - Cherry
-  events:
-    onSelect:
-      - id: selected_message
-        type: DisplayMessage
-        params:
-          content:
-            _string.concat:
-              - "Picked "
-              - _event: value
-- id: prefix_text
-  type: AutoComplete
-  properties:
-    title: Email Domain
-    prefix: "@"
-    options:
-      - example.com
-      - example.org
 ```
 
 ```yaml
@@ -435,11 +396,10 @@ Text input with auto-complete suggestions from a list of options.
 - id: style_background
   type: AutoComplete
   style:
-    .element:
-      backgroundColor: var(--ant-color-success-bg)
+    .element: null
   properties:
     title: Custom Background
-    placeholder: Green tinted background
+    placeholder: Light green background
     options:
       - Option A
       - Option B
@@ -463,7 +423,7 @@ Text input with auto-complete suggestions from a list of options.
 - id: class_element
   type: AutoComplete
   class:
-    .element: rounded-lg shadow-sm
+    element: rounded-lg shadow-sm
   properties:
     title: Custom Class
     placeholder: Tailwind classes applied
@@ -663,7 +623,7 @@ Text input with auto-complete suggestions from a list of options.
       type: Button
       properties:
         title: Search
-        icon: search
+        icon: AiOutlineSearch
         type: primary
         size: large
       events:
@@ -732,7 +692,7 @@ Text input with auto-complete suggestions from a list of options.
       properties:
         title: Save Profile
         type: primary
-        icon: save
+        icon: AiOutlineSave
       events:
         onClick:
           - id: save_action
@@ -747,55 +707,27 @@ Text input with auto-complete suggestions from a list of options.
 | `allowClear` | boolean | `true` | Allow the user to clear the selected value, sets the value to null. |
 | `autoFocus` | boolean | `false` | Autofocus to the block on page load. |
 | `bordered` | boolean | `true` | Whether or not the input has a border style. Deprecated, use variant instead. |
-| `backfill` | boolean | `false` | Backfill the selected item into the input when using the keyboard. |
+| `backfill` | boolean | `false` | Backfill selected item the input when using keyboard |
 | `defaultOpen` | boolean | `false` | Initial open state of dropdown. |
 | `disabled` | boolean | `false` | Disable the block if true. |
 | `label` | object | - | Label properties. |
-| `label.xs` | object | - | Label width on extra small screens (below 576px) when the label is not inline. |
-| `label.xs.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.sm` | object | - | Label width on small screens (576px and up) when the label is not inline. Also applies below 576px unless `xs` is set. |
-| `label.sm.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.md` | object | - | Label width on medium screens (768px and up) when the label is not inline. Overrides `span`. |
-| `label.md.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.lg` | object | - | Label width on large screens (992px and up) when the label is not inline. |
-| `label.lg.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xl` | object | - | Label width on extra large screens (1200px and up) when the label is not inline. |
-| `label.xl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xxl` | object | - | Label width on extra extra large screens (1600px and up) when the label is not inline. |
-| `label.xxl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
 | `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `label.colon` | boolean | `true` | Append label with colon. |
 | `label.extra` | string | - | Extra text to display beneath the content - supports html. |
 | `label.title` | string | - | Label title - supports html. |
 | `label.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. |
 | `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
-| `label.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`. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
 | `label.tooltip.color` | string | - | Color of the tooltip icon. |
-| `label.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. |
+| `label.span` | number | - | Label inline span. |
 | `label.disabled` | boolean | `false` | Hide input label. |
 | `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
 | `label.inline` | boolean | `false` | Render input and label inline. |
-| `label.wrap` | boolean | `false` | Wrap long label text onto multiple lines when the label is inline. Labels above their input always wrap. |
-| `listHeight` | number | `256` | Height of the dropdown list in pixels. |
 | `options` | array | `[]` | Options can either be an array of string values. |
 | `placeholder` | string | `"Type or select item"` | Placeholder text inside the block before user selects input. |
-| `placement` | string | `"bottomLeft"` | Position of the dropdown relative to the selector. Enum: `bottomLeft`, `bottomRight`, `topLeft`, `topRight`. |
-| `popupMatchSelectWidth` | boolean \| number | `true` | Make the dropdown the same width as the selector. Set a number of pixels for a fixed dropdown width, or false to size the dropdown to its options (this also turns off virtual scrolling). |
-| `prefix` | string | - | Text shown inside the selector before the selected value. |
-| `prefixIcon` | 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 to show inside the selector before the selected value. Ignored when `prefix` is set. |
-| `prefixIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `prefixIcon.color` | string | - | Icon color. |
-| `prefixIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `prefixIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `prefixIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `prefixIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `prefixIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `prefixIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `prefixIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
 | `size` | string | `"default"` | Size of the block. Enum: `small`, `default`, `large`. |
 | `title` | string | - | Title to describe the input component, if no title is specified the block id is displayed. |
-| `variant` | string | - | Input visual variant. The deprecated bordered: false takes precedence and renders the input as 'borderless'. Enum: `outlined`, `filled`, `borderless`, `underlined`. |
-| `virtual` | boolean | `true` | Only render the dropdown options in view. Set to false when options have very different heights, or so screen readers can reach every option. |
+| `variant` | string | - | Input visual variant. When set, takes precedence over bordered. Enum: `outlined`, `filled`, `borderless`. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design select tokens](https://ant.design/components/select#design-token). |
 | `theme.borderRadius` | number | `6` | Border radius of the input. |
 | `theme.borderRadiusLG` | number | `8` | Border radius for large size. |
@@ -838,9 +770,7 @@ Text input with auto-complete suggestions from a list of options.
 | `onChange` | `{ value }` | Trigger actions when selection is changed. |
 | `onFocus` | \- | Trigger action when an selector gets focus. |
 | `onClear` | \- | Trigger action when selector gets cleared. |
-| `onOpenChange` | `{ open }` | Trigger actions when the dropdown opens or closes. |
 | `onSearch` | `{ value }` | Called when searching items. |
-| `onSelect` | `{ value }` | Trigger actions when an option is selected from the dropdown, as opposed to typed. |
 | `onTooltipClick` | \- | Trigger actions when the tooltip icon is clicked. |
 
 | Key | Target |
@@ -852,7 +782,5 @@ Text input with auto-complete suggestions from a list of options.
 | `/extra` | The AutoComplete extra content. |
 | `/feedback` | The AutoComplete validation feedback. |
 | `/options` | The AutoComplete options. |
-| `/popup` | The AutoComplete dropdown popup. |
-| `/prefixIcon` | The prefix icon in the AutoComplete. |
 
 No slots defined.

package/content/input-blocks/buttonselector.md

@@ -91,27 +91,6 @@ Radio group styled as toggle buttons.
         value: rejected
 ```
 
-```yaml
-- id: block_button_selector
-  type: ButtonSelector
-  properties:
-    title: Billing Period
-    block: true
-    options:
-      - Monthly
-      - Quarterly
-      - Yearly
-- id: vertical_button_selector
-  type: ButtonSelector
-  properties:
-    title: Plan
-    direction: vertical
-    options:
-      - Starter
-      - Team
-      - Enterprise
-```
-
 ```yaml
 - id: size_small
   type: ButtonSelector
@@ -592,7 +571,6 @@ Radio group styled as toggle buttons.
 ```yaml
 - id: class_padding
   type: ButtonSelector
-  class: p-4
   properties:
     title: Tailwind Padding
     variant: solid
@@ -603,9 +581,9 @@ Radio group styled as toggle buttons.
         value: b
       - label: Option C
         value: c
+    class: p-4
 - id: class_shadow_rounded
   type: ButtonSelector
-  class: shadow-md rounded-lg p-2
   properties:
     title: Shadow and Rounded
     variant: solid
@@ -616,9 +594,9 @@ Radio group styled as toggle buttons.
         value: b
       - label: Option C
         value: c
+    class: shadow-md rounded-lg p-2
 - id: class_background
   type: ButtonSelector
-  class: bg-bg-layout p-3 rounded
   properties:
     title: Background Color
     variant: solid
@@ -629,6 +607,7 @@ Radio group styled as toggle buttons.
         value: b
       - label: Option C
         value: c
+    class: bg-bg-layout p-3 rounded
 ```
 
 ```yaml
@@ -767,7 +746,7 @@ Radio group styled as toggle buttons.
       properties:
         title: Submit Survey
         type: primary
-        icon: send
+        icon: AiOutlineSend
       events:
         onClick:
           - id: survey_submit_action
@@ -837,7 +816,7 @@ Radio group styled as toggle buttons.
       properties:
         title: Save Settings
         type: primary
-        icon: save
+        icon: AiOutlineSave
       events:
         onClick:
           - id: settings_save_action
@@ -907,15 +886,13 @@ Radio group styled as toggle buttons.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `block` | boolean | `false` | Stretch the buttons to fill the width of the parent, sharing it equally. |
-| `direction` | string | `"horizontal"` | Lay the option buttons out in a row or stack them in a column. Enum: `horizontal`, `vertical`. |
 | `variant` | string | `"solid"` | Visual variant of the selected option button, matching the Button block. Enum: `solid`, `outlined`. |
 | `buttonStyle` | string | - | Deprecated — use `variant` (solid \| outlined) instead. Enum: `solid`, `outline`. |
 | `color` | string | - | Color applied to the selected button. Fills the background in solid mode (with auto-contrasting text) and the border/text in outline mode. |
 | `disabled` | boolean | `false` | Disable the block if true. |
 | `options` | array | `[]` | Options can either be an array of primitive values, on an array of label, value pairs - supports html. |
 | `options.$.label` | string | - | Value label shown to user - supports html. |
-| `options.$.value` | - | - | Option value. Can be of any type. |
+| `options.$.value` | string \| number \| boolean | - | Option value. |
 | `options.$.disabled` | boolean | `false` | Disable the option if true. |
 | `options.$.style` | object | - | Css style to apply to the option. |
 | `options.$.color` | string | - | Color applied to this option when it is selected. Falls back to the block-level color when not set. |
@@ -925,31 +902,18 @@ Radio group styled as toggle buttons.
 | `primaryKey` | string | - | Field used to match the current value (e.g. set with SetState) back to an option for highlighting. Defaults to `valueKey`. Set this when the stored value is the whole row but a single field (e.g. "id") uniquely identifies it. In the tree selectors it also serves as each node’s id, referenced by `parentKey`. Supports dotted paths. |
 | `size` | string | `"default"` | Size of the block. Enum: `small`, `default`, `large`. |
 | `label` | object | - | Label properties. |
-| `label.xs` | object | - | Label width on extra small screens (below 576px) when the label is not inline. |
-| `label.xs.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.sm` | object | - | Label width on small screens (576px and up) when the label is not inline. Also applies below 576px unless `xs` is set. |
-| `label.sm.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.md` | object | - | Label width on medium screens (768px and up) when the label is not inline. Overrides `span`. |
-| `label.md.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.lg` | object | - | Label width on large screens (992px and up) when the label is not inline. |
-| `label.lg.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xl` | object | - | Label width on extra large screens (1200px and up) when the label is not inline. |
-| `label.xl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xxl` | object | - | Label width on extra extra large screens (1600px and up) when the label is not inline. |
-| `label.xxl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
 | `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `label.colon` | boolean | `true` | Append label with colon. |
 | `label.extra` | string | - | Extra text to display beneath the content - supports html. |
 | `label.title` | string | - | Label title - supports html. |
 | `label.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. |
 | `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
-| `label.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`. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
 | `label.tooltip.color` | string | - | Color of the tooltip icon. |
-| `label.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. |
+| `label.span` | number | - | Label inline span. |
 | `label.disabled` | boolean | `false` | Hide input label. |
 | `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
 | `label.inline` | boolean | `false` | Render input and label inline. |
-| `label.wrap` | boolean | `false` | Wrap long label text onto multiple lines when the label is inline. Labels above their input always wrap. |
 | `title` | string | - | Title to describe the input component, if no title is specified the block id is displayed - supports html. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design radio tokens](https://ant.design/components/radio#design-token). |
 | `theme.radioSize` | number | `16` | Size of the radio dot element. |
@@ -996,6 +960,5 @@ Radio group styled as toggle buttons.
 | `/label` | The ButtonSelector label. |
 | `/extra` | The ButtonSelector extra content. |
 | `/feedback` | The ButtonSelector validation feedback. |
-| `/options` | Each ButtonSelector option. |
 
 No slots defined.