fix errors in doc formatting

Author: mike-ward

doc/11-Expand-Panel.md

@@ -1,6 +1,6 @@
--------------------
-# 11 Expand Panel
--------------------
+  --------------------
+  \# 11 Expand Panel
+  --------------------
 
 An expand panel is a collapsible container that can show or hide its
 content. It consists of a clickable header (which always displays) and a
@@ -27,8 +27,8 @@ hover).
 
 ## ExpandPanelCfg
 
-The `expand_panel` view is created with an `ExpandPanelCfg` structure. The most important fields are:
-Important fields:
+The `expand_panel` view is created with an `ExpandPanelCfg` structure.
+The most important fields are: Important fields:
 
 - `id string` --- Optional identifier for the view.
 - `head View` --- The header content (required). This is a view that
@@ -67,13 +67,18 @@ Important fields:
 
 ## Interaction model
 
-- **Click**: Clicking anywhere in the header row triggers the `on_toggle` callback if it is provided.
-- **Hover**: When the pointer is over the header, the mouse cursor changes to a pointing hand, and the header background uses the theme's `color_hover`.
-- **Arrow indicator**: The header automatically shows `icon_arrow_up` when `open` is `true` and `icon_arrow_down` when `open` is `false`.
+- **Click**: Clicking anywhere in the header row triggers the
+  `on_toggle` callback if it is provided.
+- **Hover**: When the pointer is over the header, the mouse cursor
+  changes to a pointing hand, and the header background uses the theme's
+  `color_hover`.
+- **Arrow indicator**: The header automatically shows `icon_arrow_up`
+  when `open` is `true` and `icon_arrow_down` when `open` is `false`.
 
 ## `expand_panel`
 
-This function creates the expand panel view from the given `ExpandPanelCfg`.
+This function creates the expand panel view from the given
+`ExpandPanelCfg`.
 
 ## Basic example
 

doc/13-Input-Date.md

@@ -1,8 +1,8 @@
----
+------------------------------------------------------------------------
 
 \# 13 Input Date
 
----
+------------------------------------------------------------------------
 
 The `input_date` view combines an `input` field with a `date_picker` to
 create a user-friendly date entry component. It displays the selected
@@ -17,7 +17,7 @@ clicks the calendar icon.
 
 Here's how to create a simple date input field:
 
-```v
+``` v
 // inside your main view function
 window.input_date(
     id: 'appointment_date'
@@ -36,22 +36,22 @@ window.input_date(
 This function creates the date input view. It internally manages the
 visibility of the floating `date_picker`.
 
-```v
+``` v
 fn (mut window Window) input_date(cfg InputDateCfg) View
 ```
 
 The view is composed of:
 
 - An `input` view that displays the formatted date.
-- A calendar `icon` within the input. - A floating `date_picker`
-  view that appears below the input when the icon is clicked.
+- A calendar `icon` within the input. - A floating `date_picker` view
+  that appears below the input when the icon is clicked.
 
 ## `InputDateCfg`
 
 This struct configures the `input_date` view. It shares many properties
 with `DatePickerCfg` and `InputCfg`.
 
-```v
+``` v
 @[heap]
 pub struct InputDateCfg {
 pub:
@@ -108,16 +108,16 @@ pub:
 Key points:
 
 - The `date` field holds the currently selected `time.Time`.
-- The `on_select` callback is triggered when a user picks a
-  date from the calendar. This is where you should update your
-  application's state.
-- The `on_enter` callback is tied to the input
-  field, allowing actions when the user presses the Enter key.
-- Most of the date-picker-specific configurations (like `allowed_weekdays`,
-  `select_multiple`, etc.) are passed directly to the underlying
-  `date_picker` view.
-- Styling properties are inherited from the theme's
-  `input_style` and `date_picker_style`.
+- The `on_select` callback is triggered when a user picks a date from
+  the calendar. This is where you should update your application's
+  state.
+- The `on_enter` callback is tied to the input field, allowing actions
+  when the user presses the Enter key.
+- Most of the date-picker-specific configurations (like
+  `allowed_weekdays`, `select_multiple`, etc.) are passed directly to
+  the underlying `date_picker` view.
+- Styling properties are inherited from the theme's `input_style` and
+  `date_picker_style`.
 
 ## Events
 

doc/14-List-Box.md

@@ -1,10 +1,11 @@
-----------------
-# 14 List Box
-----------------
+  ----------------
+  \# 14 List Box
+  ----------------
 
-A list box is a view that displays a scrollable list of items, allowing users to select
-one or multiple options. It's a convenient composition of `column` and `row` views,
-pre-configured to handle selection, hover states, and subheadings.
+A list box is a view that displays a scrollable list of items, allowing
+users to select one or multiple options. It's a convenient composition
+of `column` and `row` views, pre-configured to handle selection, hover
+states, and subheadings.
 
 - Widget: `list_box`
 - Config: `ListBoxCfg`
@@ -15,7 +16,7 @@ pre-configured to handle selection, hover states, and subheadings.
 
 Here's how to create a simple list box with a few options:
 
-```v
+``` v
 gui.list_box(
     id: 'cities_list'
     selected: [app.selected_city]
@@ -35,21 +36,22 @@ gui.list_box(
 
 ## `list_box`
 
-This function creates the list box view. It is a specialized container that renders a list
-of `ListBoxOption` items and manages their selection state.
+This function creates the list box view. It is a specialized container
+that renders a list of `ListBoxOption` items and manages their selection
+state.
 
-```v
+``` v
 pub fn list_box(cfg ListBoxCfg) View
 ```
 
-Internally, it's a `column` with a border, containing another scrollable `column` that
-holds a `row` for each item.
+Internally, it's a `column` with a border, containing another scrollable
+`column` that holds a `row` for each item.
 
 ## `ListBoxCfg`
 
 This struct configures the `list_box` view.
 
-```v
+``` v
 pub struct ListBoxCfg {
 pub:
 	id               string
@@ -80,22 +82,21 @@ pub:
 }
 ```
 
-Key fields:
-- `data`: An array of `ListBoxOption` structs that define the items in the list.
-- `selected`: An array of strings holding the `value` of each selected item.
-- `on_select`: The callback triggered when an item is clicked. It receives an array of the
-  currently selected values.
-- `multiple`: If `true`, allows selecting more than one item.
-- `id_scroll`: A non-zero value makes the list box scrollable if its content exceeds its
-  height.
-- `subheading_style`: A separate `TextStyle` for items that are subheadings.
+Key fields: - `data`: An array of `ListBoxOption` structs that define
+the items in the list. - `selected`: An array of strings holding the
+`value` of each selected item. - `on_select`: The callback triggered
+when an item is clicked. It receives an array of the currently selected
+values. - `multiple`: If `true`, allows selecting more than one item. -
+`id_scroll`: A non-zero value makes the list box scrollable if its
+content exceeds its height. - `subheading_style`: A separate `TextStyle`
+for items that are subheadings.
 
 ## `ListBoxOption`
 
-This struct defines a single item in the list. Use the `list_box_option` helper for
-concise creation.
+This struct defines a single item in the list. Use the `list_box_option`
+helper for concise creation.
 
-```v
+``` v
 pub struct ListBoxOption {
 pub:
 	name  string
@@ -107,39 +108,44 @@ pub fn list_box_option(name string, value string) ListBoxOption
 
 ### Subheadings
 
-If an option's `name` starts with `---`, it is rendered as a non-selectable subheading.
-The three leading hyphens are removed, and the rest of the name is displayed using the
-`subheading_style`. A horizontal line is drawn below it.
+If an option's `name` starts with `---`, it is rendered as a
+non-selectable subheading. The three leading hyphens are removed, and
+the rest of the name is displayed using the `subheading_style`. A
+horizontal line is drawn below it.
 
-```v
+``` v
 gui.list_box_option('---Category 1', '') // The value is ignored
 ```
 
 ## Interaction and Events
 
-- **Click**: Clicking an item triggers the `on_select` callback. The callback receives a new
-  array of selected values. If `multiple` is `false`, the new selection replaces the old
-  one. If `true`, the clicked item is toggled in the selection.
-- **Hover**: Hovering over a selectable item changes its background to `color_hover` and
-  the cursor to a pointing hand.
-- **Selection**: Selected items are highlighted with the `color_select` background color.
+- **Click**: Clicking an item triggers the `on_select` callback. The
+  callback receives a new array of selected values. If `multiple` is
+  `false`, the new selection replaces the old one. If `true`, the
+  clicked item is toggled in the selection.
+- **Hover**: Hovering over a selectable item changes its background to
+  `color_hover` and the cursor to a pointing hand.
+- **Selection**: Selected items are highlighted with the `color_select`
+  background color.
 
 ## Styling
 
-The list box's appearance is controlled by `gui_theme.list_box_style` and can be
-overridden in `ListBoxCfg`.
+The list box's appearance is controlled by `gui_theme.list_box_style`
+and can be overridden in `ListBoxCfg`.
 
-- The outer container is styled with `color_border`, `padding_border`, and `radius_border`.
+- The outer container is styled with `color_border`, `padding_border`,
+  and `radius_border`.
 - The inner container uses `color`, `padding`, and `radius`.
 - Selected items use `color_select`.
 - Text uses `text_style`, and subheadings use `subheading_style`.
 
 ## Multiple Selections
 
-To allow users to select multiple items, set `multiple: true`. The `on_select` callback
-will receive an array containing all selected values.
+To allow users to select multiple items, set `multiple: true`. The
+`on_select` callback will receive an array containing all selected
+values.
 
-```v
+``` v
 gui.list_box(
     multiple: true
     selected: app.selected_items // e.g., ['ny', 'chi']
@@ -153,6 +159,7 @@ gui.list_box(
 
 ## See Also
 
-- `08-Container-View.md` --- Understanding the underlying `column` and `row` views.
+- `08-Container-View.md` --- Understanding the underlying `column` and
+  `row` views.
 - `05-Themes-Styles.md` --- Details on colors, padding, and styling.
 - `view_select.v` --- For a compact, drop-down selection menu.