Update

Author: VeyDlin

.gitignore

@@ -364,4 +364,7 @@ FodyWeavers.xsd
 
 # App settings with secrets
 appsettings.json
-!appsettings.template.json
+!appsettings.template.json
+
+# Auto Claude data directory
+.auto-claude/

Documentation/Components.md

@@ -7,6 +7,7 @@ This document describes all available UI components for declarative `.page` file
 - [command](#command)
 - [open](#open)
 - [checkbox](#checkbox)
+- [checkbox-list](#checkbox-list)
 - [radio](#radio)
 - [switch](#switch)
 - [card](#card)
@@ -137,6 +138,67 @@ cb.onUpdate = function(e) {
 
 ---
 
+## checkbox-list
+
+A multi-select list where multiple options can be toggled on/off.
+
+### Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `template` | string | `{{ (self.isChecked ? '✅ ' : '') + self.title }}` | Display template |
+| `:selected` | JS expression | - | Binding for selected IDs (comma-separated) |
+| `@update` | JS expression | - | Handler called when selection changes |
+| `id` | string | - | Component ID for JavaScript access |
+| `columns` | number | `1` | Number of columns for button layout |
+| `max-items` | number | - | Maximum items per page (enables pagination with `<navigate>`) |
+| `hide` | boolean | `false` | Hide the checkbox list |
+
+### Child Elements
+
+Options are defined using `<option>` child elements (same as radio).
+
+### Template Variables
+
+The `self` object in templates contains:
+- `self.isChecked` - boolean, whether this option is checked
+- `self.title` - string, the option title
+- `self.index` - number, option index
+
+### Examples
+
+```xml
+<!-- Basic checkbox list -->
+<checkbox-list id="features" @update="onFeatureChange(event)">
+    <option value="dark-mode" title="Dark Mode" />
+    <option value="notifications" title="Notifications" />
+    <option value="auto-save" title="Auto Save" />
+</checkbox-list>
+
+<!-- With binding and pagination -->
+<checkbox-list id="tags" max-items="5" :selected="selectedTags">
+    <option v-for="tag in tags" :value="tag.id" :title="tag.name" />
+</checkbox-list>
+<navigate target="tags" />
+```
+
+### JavaScript API
+
+```javascript
+var list = component('features');
+list.toggle('dark-mode');          // Toggle option
+list.setChecked('notifications', true);  // Set specific state
+console.log(list.IsChecked('dark-mode'));  // Check if selected
+console.log(list.selectedIds);     // Get all selected IDs
+console.log(list.checkedCount);    // Get count of selected
+
+list.onUpdate = function(e) {
+    console.log('Changed:', e.item.id, 'checked:', e.isChecked);
+};
+```
+
+---
+
 ## radio
 
 A group of radio buttons where only one option can be selected.
@@ -149,6 +211,8 @@ A group of radio buttons where only one option can be selected.
 | `:selected` | JS expression | - | Binding for selected option ID |
 | `@select` | JS expression | - | Handler called when selection changes |
 | `id` | string | - | Component ID for JavaScript access |
+| `columns` | number | `1` | Number of columns for button layout |
+| `max-items` | number | - | Maximum items per page (enables pagination with `<navigate>`) |
 | `hide` | boolean | `false` | Hide the radio group |
 
 ### Child Elements
@@ -311,13 +375,13 @@ console.log(card.pageCount);    // Total pages
 
 ## navigate
 
-Navigation controls for paginated cards.
+Navigation controls for paginated components (card, radio, checkbox-list).
 
 ### Attributes
 
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
-| `target` | string | - | ID of the card to control |
+| `target` | string | - | ID of the paginated component to control |
 | `prevTitle` | string | `◀` | Previous button text |
 | `nextTitle` | string | `▶` | Next button text |
 | `counterTitle` | string | `{{ self.currentPage + 1 }} / {{ self.pageCount }}` | Counter display template |
@@ -327,15 +391,35 @@ Navigation controls for paginated cards.
 | `boundaryMessage` | string | - | Toast message at boundaries |
 | `@click` | JS expression | - | Handler for counter button click |
 
+### Supported Components
+
+Navigate can control any component that supports pagination:
+
+- **card** - with `max-items` or `max-rows` attribute
+- **radio** - with `max-items` attribute
+- **checkbox-list** - with `max-items` attribute
+
 ### Examples
 
 ```xml
-<!-- Basic navigation -->
+<!-- Basic navigation with card -->
 <card id="myList" max-items="5">
     <command v-for="item in items" :title="item.name" />
 </card>
 <navigate target="myList" />
 
+<!-- Navigation with radio -->
+<radio id="language" max-items="5" :selected="lang" @select="lang = event.select.id">
+    <option v-for="l in languages" :value="l.code" :title="l.name" />
+</radio>
+<navigate target="language" />
+
+<!-- Navigation with checkbox-list -->
+<checkbox-list id="features" max-items="4" :selected="selectedFeatures">
+    <option v-for="f in features" :value="f.id" :title="f.name" />
+</checkbox-list>
+<navigate target="features" />
+
 <!-- Custom navigation -->
 <navigate
     target="myList"
@@ -349,6 +433,17 @@ Navigation controls for paginated cards.
 <navigate target="myList" showCounter="false" />
 ```
 
+### Navigation in Modals
+
+For `radio-modal` and `checkbox-modal` components, add `<navigate>` inside the modal to customize the built-in pagination. The `target` attribute is ignored (modal manages its own pagination).
+
+```xml
+<radio-modal id="items" maxItems="10" title="Select Item">
+    <option v-for="item in items" :value="item.id" :title="item.name" />
+    <navigate prevTitle="Back" nextTitle="Forward" showCounter="false" />
+</radio-modal>
+```
+
 ---
 
 ## row

Documentation/Pages.md

@@ -98,7 +98,7 @@ function start() {
 </script>
 ```
 
-> **Note:** HTML mode is used by default. Use `<br/>` for line breaks in messages.
+> **Note:** HTML mode is used by default. Use `<br/>` for line breaks or `<p>content</p>` for paragraphs.
 
 ### Page with ViewModel
 

Telegram.Bot.UI.Demo/Resources/Pages/App/Home/home.page

@@ -11,7 +11,7 @@
         </row>
 
         <row>
-            <link id="supportLink" :title="'🆘 ' + $t('Support')" url="https://t.me/BotFather" columns="2"></link>
+            <open id="supportLink" type="link" :title="'🆘 ' + $t('Support')" target="https://t.me/BotFather" columns="2"></open>
             <command id="aboutBtn" :title="'ℹ️ ' + $t('About')" columns="2"></command>
         </row>
     </components>

Telegram.Bot.UI.Tests/E2E/Comprehensive/DemoFlowTests.cs

@@ -55,7 +55,7 @@ public async Task Start_ShowsHomePage_WithCorrectTextAndButtons() {
 
         var expectedButtons = new[] {
             new[] { "🎮 UI Components", "🌐 Language" },
-            new[] { "ℹ️ About" }
+            new[] { "🆘 Support", "ℹ️ About" }
         };
 
         Verify(expectedText, expectedButtons, "Home page");

Telegram.Bot.UI.Tests/Resources/Pages/App/Home/home.page

@@ -11,7 +11,7 @@
         </row>
 
         <row>
-            <link id="supportLink" :title="'🆘 ' + $t('Support')" url="https://t.me/BotFather" columns="2"></link>
+            <open id="supportLink" type="link" :title="'🆘 ' + $t('Support')" target="https://t.me/BotFather" columns="2"></open>
             <command id="aboutBtn" :title="'ℹ️ ' + $t('About')" columns="2"></command>
         </row>
     </components>

Telegram.Bot.UI.Tests/Resources/Pages/ComponentsDemo/command-vif-test.page

@@ -0,0 +1,22 @@
+<view id="command-vif-test" back-to-parent="false">
+    <title>Command v-if Test</title>
+
+    <script>
+        var showBtn1 = true;
+        var showBtn2 = true;
+        var showBtn3 = false;
+    </script>
+
+    <message>
+        Test: showBtn1={{ showBtn1 }}, showBtn2={{ showBtn2 }}, showBtn3={{ showBtn3 }}
+    </message>
+
+    <components>
+        <command v-if="showBtn1" title="BTN1" @click="UI.toast('1')"></command>
+        <command v-if="showBtn2" title="BTN2" @click="UI.toast('2')"></command>
+        <command v-if="showBtn3" title="BTN3" @click="UI.toast('3')"></command>
+        <command title="Toggle1" @click="showBtn1 = !showBtn1; UI.refresh();"></command>
+        <command title="Toggle2" @click="showBtn2 = !showBtn2; UI.refresh();"></command>
+        <command title="Toggle3" @click="showBtn3 = !showBtn3; UI.refresh();"></command>
+    </components>
+</view>

Telegram.Bot.UI.Tests/Resources/Pages/Test/template-condition-test.page

@@ -0,0 +1,53 @@
+<view id="template-condition-test" vmodel="Telegram.Bot.UI.Tests.ViewModels.TemplateConditionViewModel">
+    <title>Template Condition Test</title>
+
+    <message>
+        <template v-if="VModel.isLoading">
+            LOADING_STATE
+        </template>
+        <template v-else-if="VModel.hasResult">
+            RESULT_STATE: {{ VModel.resultText }}
+        </template>
+        <template v-else-if="VModel.hasError">
+            ERROR_STATE: {{ VModel.errorText }}
+        </template>
+        <template v-else>
+            DEFAULT_STATE
+        </template>
+    </message>
+
+    <components>
+        <row>
+            <command id="start-loading" title="Start Loading"></command>
+            <command id="set-result" title="Set Result"></command>
+        </row>
+        <row>
+            <command id="set-error" title="Set Error"></command>
+            <command id="reset" title="Reset"></command>
+        </row>
+    </components>
+
+    <script>
+        onMounted(function() {
+            component('start-loading').onClick = function() {
+                VModel.StartLoading();
+                UI.refresh();
+            };
+
+            component('set-result').onClick = function() {
+                VModel.SetResult('Success!');
+                UI.refresh();
+            };
+
+            component('set-error').onClick = function() {
+                VModel.SetError('Something went wrong');
+                UI.refresh();
+            };
+
+            component('reset').onClick = function() {
+                VModel.Reset();
+                UI.refresh();
+            };
+        });
+    </script>
+</view>

Telegram.Bot.UI.Tests/Resources/Pages/attr-syntax-test.page

@@ -0,0 +1,25 @@
+<view id="attr-syntax-test">
+    <title>Attribute Syntax Test</title>
+
+    <message>
+        Testing attribute syntax equivalence
+    </message>
+
+    <components>
+        <!-- Test 1: template literal with mustache inside -->
+        <radio id="radio1" template="[{{ self.title }}]">
+            <option value="a" title="Option A"></option>
+        </radio>
+
+        <!-- Test 2: :template binding (should work the same as template) -->
+        <radio id="radio2" :template="'[' + self.title + ']'">
+            <option value="b" title="Option B"></option>
+        </radio>
+
+        <!-- Test 3: title literal -->
+        <command title="Test Button"></command>
+
+        <!-- Test 4: :title binding (should work the same as title) -->
+        <command :title="'Test Button'"></command>
+    </components>
+</view>

Telegram.Bot.UI.Tests/Resources/Pages/radio-pagination-test.page

@@ -0,0 +1,28 @@
+<view id="radio-pagination-test">
+    <title>Radio Pagination Test</title>
+
+    <script>
+        var items = [
+            { id: '1', name: 'Item 1' },
+            { id: '2', name: 'Item 2' },
+            { id: '3', name: 'Item 3' },
+            { id: '4', name: 'Item 4' },
+            { id: '5', name: 'Item 5' }
+        ];
+        var selected = '1';
+    </script>
+
+    <message>
+        Testing radio pagination
+    </message>
+
+    <components>
+        <radio id="items" columns="1" max-items="3"
+            v-bind-selected="selected"
+            v-on-select="selected = event.select.id;">
+            <option v-for="item in items" :value="item.id" :title="item.name"></option>
+        </radio>
+
+        <navigate target="items"></navigate>
+    </components>
+</view>