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

package/content/input-blocks/checkboxselector.md

@@ -703,92 +703,16 @@ Checkbox group for selecting multiple options.
     valueKey: id
 ```
 
-```yaml
-- id: columns_two
-  type: CheckboxSelector
-  properties:
-    title: Two columns
-    columns: 2
-    options:
-      - Weekday mornings
-      - Weekday afternoons
-      - Weekday evenings
-      - Weekend mornings
-      - Weekend afternoons
-      - Weekend evenings
-- id: columns_four
-  type: CheckboxSelector
-  properties:
-    title: Four columns
-    columns: 4
-    options:
-      - January
-      - February
-      - March
-      - April
-      - May
-      - June
-      - July
-      - August
-- id: columns_responsive
-  type: CheckboxSelector
-  properties:
-    title: One column below md, three from md up
-    columns:
-      xs: 1
-      md: 3
-    options:
-      - Email
-      - SMS
-      - Push notification
-      - Webhook
-      - In-app message
-      - Weekly digest
-- id: columns_gutter
-  type: CheckboxSelector
-  properties:
-    title: Wider gutter
-    columns: 2
-    gutter:
-      - 24
-      - 12
-    options:
-      - Read
-      - Write
-      - Delete
-      - Administer
-- id: columns_per_option_color
-  type: CheckboxSelector
-  properties:
-    title: Coloured options in a grid
-    columns: 2
-    options:
-      - label: Low
-        value: low
-        color: "#16a34a"
-      - label: Medium
-        value: medium
-        color: "#d97706"
-      - label: High
-        value: high
-        color: "#dc2626"
-      - label: Critical
-        value: critical
-        color: "#7e22ce"
-```
-
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `align` | string | `"start"` | Align options. Ignored when 'columns' is set. Enum: `start`, `end`, `center`, `baseline`. |
+| `align` | string | `"start"` | Align options. Enum: `start`, `end`, `center`, `baseline`. |
 | `color` | string | - | Selected checkbox color. |
-| `columns` | integer \| object | - | Number of columns to lay the options out in, or a responsive breakpoint object. Use a count that divides 24 evenly. |
 | `disabled` | boolean | `false` | Disable the block if true. |
-| `direction` | string | `"horizontal"` | List options horizontally or vertical. Ignored when 'columns' is set. Enum: `horizontal`, `vertical`. |
-| `gutter` | number \| array | - | Gap between options in the grid. Number or [horizontal, vertical] array. Applies when 'columns' is set. |
-| `wrap` | boolean | `true` | Specifies wrapping of options. Applies when 'direction' is 'horizontal'. Ignored when 'columns' is set. |
+| `direction` | string | `"horizontal"` | List options horizontally or vertical. Enum: `horizontal`, `vertical`. |
+| `wrap` | boolean | `true` | Specifies wrapping of options. Applies when 'direction' is 'horizontal'. |
 | `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. |
@@ -797,31 +721,18 @@ Checkbox group for selecting multiple options.
 | `valueKey` | string | - | Field used as the selected value. With `options` it names the value field (defaults to "value"). With `data` it names the field stored when an option is selected; omit it to store the whole row. Supports dotted paths (e.g. "user.id"). |
 | `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. |
 | `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 checkbox tokens](https://ant.design/components/checkbox#design-token). |
 | `theme.colorPrimary` | string | - | Primary color for checked checkboxes. |
@@ -835,7 +746,7 @@ Checkbox group for selecting multiple options.
 | `theme.lineWidth` | number | `1` | Border width of the checkbox. |
 | `theme.lineType` | string | `"solid"` | Border style of the checkbox. |
 | `theme.fontSize` | number | `14` | Font size for checkbox labels. |
-| `theme.marginXS` | number | `8` | Column gap on the checkbox group element. Does not space the options apart; set 'gutter' for a grid. |
+| `theme.marginXS` | number | `8` | Horizontal gap between checkboxes in a group. |
 | `theme.paddingXS` | number | `8` | Inline padding between the checkbox and its label text. |
 
 | Event | Event Data | Description |
@@ -850,6 +761,5 @@ Checkbox group for selecting multiple options.
 | `/label` | The CheckboxSelector label. |
 | `/extra` | The CheckboxSelector extra content. |
 | `/feedback` | The CheckboxSelector validation feedback. |
-| `/options` | Each CheckboxSelector option. |
 
 No slots defined.

package/content/input-blocks/checkboxswitch.md

@@ -19,34 +19,6 @@ Single checkbox for boolean input.
     description: Keep me signed in on this device
 ```
 
-```yaml
-- id: select_all
-  type: CheckboxSwitch
-  properties:
-    title: Recipients
-    description: Select all
-    indeterminate:
-      _ne:
-        - _if_none:
-            - _state: recipient_alice
-            - false
-        - _if_none:
-            - _state: recipient_bob
-            - false
-- id: recipient_alice
-  type: CheckboxSwitch
-  properties:
-    description: Alice
-    label:
-      disabled: true
-- id: recipient_bob
-  type: CheckboxSwitch
-  properties:
-    description: Bob
-    label:
-      disabled: true
-```
-
 ```yaml
 - id: desc_terms
   type: CheckboxSwitch
@@ -397,7 +369,7 @@ Single checkbox for boolean input.
       properties:
         title: Create Account
         type: primary
-        icon: UserPlus
+        icon: AiOutlineUserAdd
         block: true
       events:
         onClick:
@@ -464,7 +436,7 @@ Single checkbox for boolean input.
       properties:
         title: Save Preferences
         type: primary
-        icon: save
+        icon: AiOutlineSave
       events:
         onClick:
           - id: save_notif
@@ -476,11 +448,9 @@ Single checkbox for boolean input.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `autoFocus` | boolean | `false` | Autofocus to the block on page load. |
 | `color` | string | - | Selected checkbox color. |
 | `disabled` | boolean | `false` | Disable the block if true. |
 | `description` | string | - | Text to display next to the checkbox - supports html. |
-| `indeterminate` | boolean | `false` | Show the checkbox as partly checked, eg. for a select all checkbox when only some items are selected. Only changes how the checkbox looks, not its value. |
 | `label` | object | - | Label properties. |
 | `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `label.colon` | boolean | `true` | Append label with colon. |
@@ -488,7 +458,7 @@ Single checkbox for boolean input.
 | `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 inline span. |
 | `label.disabled` | boolean | `false` | Hide input label. |

package/content/input-blocks/colorselector.md

@@ -195,33 +195,6 @@ ColorSelector is externally controlled — use an `onMount` event with `SetState
   properties:
     mode: gradient
     showText: true
-  events:
-    onMount:
-      - id: set_default
-        type: SetState
-        params:
-          mode_gradient: linear-gradient(90deg, rgb(22,119,255) 0%, rgb(114,46,209) 100%)
-- id: mode_both
-  type: ColorSelector
-  layout:
-    flex: 0 0 auto
-  properties:
-    mode:
-      - single
-      - gradient
-    showText: true
-- id: mode_gradient_preview
-  type: Box
-  layout:
-    flex: 1 1 auto
-  style:
-    .element:
-      height: 32
-      borderRadius: 6
-      background:
-        _if_none:
-          - _state: mode_gradient
-          - "#f0f0f0"
 ```
 
 **Top:**
@@ -473,7 +446,7 @@ ColorSelector is externally controlled — use an `onMount` event with `SetState
     flex: 0 0 auto
   style:
     .element:
-      border: "2px solid #1677ff"
+      border: 2px solid
       borderRadius: 8px
   properties:
     showText: true
@@ -491,9 +464,9 @@ ColorSelector is externally controlled — use an `onMount` event with `SetState
   type: ColorSelector
   layout:
     flex: 0 0 auto
-  class: rounded-lg shadow-sm
   properties:
     showText: true
+    class: rounded-lg shadow-sm
 - id: style_large_swatch
   type: ColorSelector
   layout:
@@ -752,7 +725,7 @@ ColorSelector is externally controlled — use an `onMount` event with `SetState
       properties:
         title: Save Theme
         type: primary
-        icon: save
+        icon: AiOutlineSave
       events:
         onClick:
           - id: theme_save_action
@@ -841,7 +814,7 @@ ColorSelector is externally controlled — use an `onMount` event with `SetState
       properties:
         title: Add to Cart
         type: primary
-        icon: ShoppingCart
+        icon: AiOutlineShoppingCart
       events:
         onClick:
           - id: add_to_cart_action
@@ -861,47 +834,26 @@ ColorSelector is externally controlled — use an `onMount` event with `SetState
 | `format` | string | - | Color format. Enum: `rgb`, `hex`, `hsb`. |
 | `showText` | boolean | - | Show color text. |
 | `size` | string | - | Size of the color picker. Enum: `small`, `middle`, `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.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.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. |
 | `disabled` | boolean | `false` | Disable the color picker. |
 | `allowClear` | boolean | `false` | Allow the user to clear their input. |
 | `arrow` | boolean | `true` | Show arrow on the color picker popup. |
 | `disabledAlpha` | boolean | `false` | Disable the alpha channel slider. |
 | `disabledFormat` | boolean | `false` | Disable the format selector. |
-| `mode` | string \| array | - | Pick a single color, a gradient, or both with a switch in the panel when set to [single, gradient]. A gradient is stored as a linear-gradient CSS string, eg. "linear-gradient(90deg, rgb(22,119,255) 0%, rgb(114,46,209) 100%)", which can be used directly as a CSS background. |
+| `mode` | string | `"single"` | Color picker mode. Enum: `single`, `gradient`. |
 | `open` | boolean | - | Controlled open state of the color picker popup. |
 | `placement` | string | - | Placement of the color picker popup. Enum: `top`, `topLeft`, `topRight`, `bottom`, `bottomLeft`, `bottomRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`. |
 | `presets` | array | - | Preset color palettes. |
-| `presets.$.label` | string | - | Title of the palette. |
-| `presets.$.colors` | array | - | Colors in the palette. |
-| `presets.$.defaultOpen` | boolean | `true` | Whether the palette is expanded when the popup opens. |
 | `trigger` | string | `"click"` | Trigger mode for the color picker popup. Enum: `hover`, `click`. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design color-picker tokens](https://ant.design/components/color-picker#design-token). |
+| `theme.colorPickerWidth` | number | `234` | Width of the color picker panel. |
+| `theme.colorPickerHandlerSize` | number | `16` | Size of the color picker handler (drag handle). |
+| `theme.colorPickerHandlerSizeSM` | number | `12` | Size of the color picker handler for small size. |
+| `theme.colorPickerSliderHeight` | number | `8` | Height of the color slider bar. |
+| `theme.colorPickerPreviewSize` | number | - | Size of the color preview circle. Defaults to a calculated value based on slider height. |
+| `theme.colorPickerAlphaInputWidth` | number | `44` | Width of the alpha input field. |
+| `theme.colorPickerInputNumberHandleWidth` | number | `16` | Width of the input number handle in the color picker. |
+| `theme.colorPickerPresetColorSize` | number | `24` | Size of preset color swatches. |
+| `theme.colorPickerInsetShadow` | string | - | Inset shadow style for the color picker. |
 | `theme.borderRadius` | number | `6` | Border radius of the color picker trigger. |
 | `theme.colorPrimary` | string | - | Primary color used in the color picker panel. |
 | `theme.colorText` | string | - | Text color in the color picker panel. |
@@ -928,6 +880,5 @@ ColorSelector is externally controlled — use an `onMount` event with `SetState
 | `/label` | The ColorSelector label. |
 | `/extra` | The ColorSelector extra content. |
 | `/feedback` | The ColorSelector validation feedback. |
-| `/popup` | The ColorSelector popup. |
 
 No slots defined.