Review the Select and ContentSeparator components

.changeset/every-moments-teach.md

@@ -0,0 +1,5 @@
+---
+"xmlui": patch
+---
+
+Add clearable property to Select

.changeset/full-symbols-accept.md

@@ -0,0 +1,5 @@
+---
+"xmlui": patch
+---
+
+Add padding theme vars to ContentSeparator

.changeset/tricky-zoos-crash.md

@@ -0,0 +1,5 @@
+---
+"xmlui": patch
+---
+
+Review Select fontSize and minHeight theme variables

docs/content/components/ContentSeparator.md

@@ -93,4 +93,10 @@ This component does not expose any methods.
 | [marginRight](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
 | [marginTop](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
 | [margin](../styles-and-themes/common-units/#size)Vertical-ContentSeparator | 0 | 0 |
+| [paddingBottom](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
+| [paddingHorizontal](../styles-and-themes/common-units/#size)-ContentSeparator | 0 | 0 |
+| [paddingLeft](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
+| [paddingRight](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
+| [paddingTop](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
+| [paddingVertical](../styles-and-themes/common-units/#size)-ContentSeparator | 0 | 0 |
 | [size](../styles-and-themes/common-units/#size)-ContentSeparator | 1px | 1px |

docs/content/components/Select.md

@@ -48,6 +48,10 @@ You can use `Select` with dynamic options:
 
 If this property is set to `true`, the component gets the focus automatically when displayed.
 
+### `clearable` (default: false) [#clearable-default-false]
+
+This property enables a clear button that allows the user to clear the selected value(s).
+
 ### `dropdownHeight` [#dropdownheight]
 
 This property sets the height of the dropdown list. If not set, the height is determined automatically.
@@ -367,6 +371,12 @@ This API retrieves the current value of the `Select`. You can use it to get the
 
 **Signature**: `get value(): string | string[] | undefined`
 
+## Parts [#parts]
+
+The component has some parts that can be styled through layout properties and theme variables separately:
+
+- **`clearButton`**: The button to clear the selected value(s).
+
 ## Styling [#styling]
 
 ### Theme Variables [#theme-variables]
@@ -474,6 +484,8 @@ This API retrieves the current value of the `Select`. You can use it to get the
 | [fontSize](../styles-and-themes/common-units/#size)-Select--warning | *none* | *none* |
 | [fontSize](../styles-and-themes/common-units/#size)-Select-badge | $fontSize-sm | $fontSize-sm |
 | [fontSize](../styles-and-themes/common-units/#size)-Select-badge | $fontSize-sm | $fontSize-sm |
+| [minHeight](../styles-and-themes/common-units/#size)-item-Select | $space-7 | $space-7 |
+| [minHeight](../styles-and-themes/common-units/#size)-Select | $space-7 | $space-7 |
 | [opacity](../styles-and-themes/common-units/#opacity)-Select--disabled | 0.5 | 0.5 |
 | [opacity](../styles-and-themes/common-units/#opacity)-text-item-Select--disabled | 0.5 | 0.5 |
 | [outlineColor](../styles-and-themes/common-units/#color)-Select--default--focus | *none* | *none* |

docs/content/components/Splitter.md

@@ -1,6 +1,6 @@
 # Splitter [#splitter]
 
-`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them.
+`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. When only a single child is visible (due to conditional rendering with `when` attributes), the splitter bar is not displayed and the single panel stretches to fill the entire viewport of the splitter container.
 
 Most properties of the component focus on the primary section (e.g. sizing).
 

docs/content/components/_overview.md

@@ -35,7 +35,9 @@
 | [FlowLayout](./FlowLayout) | `FlowLayout` positions content in rows with automatic wrapping. When items exceed the available horizontal space, they automatically wrap to a new line. |
 | [Footer](./Footer) | `Footer` provides a designated area at the bottom of your application for footer content such as branding, copyright notices, or utility controls like theme toggles. |
 | [Form](./Form) | `Form` provides a structured container for collecting and validating user input, with built-in data binding, validation, and submission handling. It automatically manages form state and provides context for nested form controls to work together. |
-| [FormItem](./FormItem) | `FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically. **Note:** `FormItem` must be used inside a `Form` component. |
+| [FormItem](./FormItem) | `FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically.
+
+> **Note:** `FormItem` must be used inside a `Form` component. |
 | [FormSection](./FormSection) | `FormSection` groups elements within a `Form`. Child components are placed in a [FlowLayout](/components/FlowLayout). |
 | [Fragment](./Fragment) | `Fragment` provides conditional rendering. You can use `when=` on any component to render it conditionally, use `Fragment` to apply `when` to a group of components. |
 | [H1](./H1) | Represents a heading level 1 text |
@@ -45,7 +47,7 @@
 | [H5](./H5) | Represents a heading level 5 text |
 | [H6](./H6) | Represents a heading level 6 text |
 | [Heading](./Heading) | `Heading` displays hierarchical text headings with semantic importance levels from H1 to H6, following HTML heading standards. It provides text overflow handling, anchor link generation, and integrates with [TableOfContents](/components/TableOfContents). |
-| [HSplitter](./HSplitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. |
+| [HSplitter](./HSplitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. When only a single child is visible (due to conditional rendering with `when` attributes), the splitter bar is not displayed and the single panel stretches to fill the entire viewport of the splitter container. |
 | [HStack](./HStack) | This component represents a stack rendering its contents horizontally. |
 | [Icon](./Icon) | `Icon` displays scalable vector icons from XMLUI's built-in icon registry using simple name references. Icons are commonly used in buttons, navigation elements, and status indicators. |
 | [IFrame](./IFrame) | `IFrame` embeds external content from another HTML document into the current page. It provides security controls through sandbox and allow attributes, and supports features like fullscreen display and referrer policy configuration. |
@@ -75,15 +77,19 @@
 | [PieChart](./PieChart) | `PieChart` visualizes proportional data as circular segments; each slice represents a percentage of the whole. Note that the height of the component or its parent needs to be set explicitly. |
 | [ProgressBar](./ProgressBar) | `ProgressBar` provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete). |
 | [Queue](./Queue) | `Queue` manages sequential processing of items in FIFO (first-in, first-out) order. It is a non-visual component but provides UI progress reporting and result display. |
-| [RadioGroup](./RadioGroup) | `RadioGroup` creates a mutually exclusive selection interface where users can choose only one option from a group of radio buttons. It manages the selection state and ensures that selecting one option automatically deselects all others in the group. Radio options store their values as strings. Numbers and booleans are converted to strings when assigned, while objects, functions and arrays default to an empty string unless resolved via binding expressions. |
+| [RadioGroup](./RadioGroup) | `RadioGroup` creates a mutually exclusive selection interface where users can choose only one option from a group of radio buttons. It manages the selection state and ensures that selecting one option automatically deselects all others in the group.
+
+Radio options store their values as strings. Numbers and booleans are converted to strings when assigned, while objects, functions and arrays default to an empty string unless resolved via binding expressions. |
 | [RealTimeAdapter](./RealTimeAdapter) | `RealTimeAdapter` is a non-visual component that listens to real-time events. |
 | [Redirect](./Redirect) | `Redirect` immediately redirects the browser to the URL in its `to` property when it gets visible (its `when` property gets `true`). It works only within [App](/components/App), not externally. |
 | [Select](./Select) | `Select` provides a dropdown interface for choosing from a list of options, supporting both single and multiple selection modes. It offers extensive customization capabilities including search functionality, custom templates, and comprehensive form integration. |
-| [Slider](./Slider) | `Slider` provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display. Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip. |
+| [Slider](./Slider) | `Slider` provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.
+
+Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip. |
 | [Slot](./Slot) | Placeholder in a reusable component. Signs the slot where the component's injected children should be rendered. |
 | [SpaceFiller](./SpaceFiller) | `SpaceFiller` works well in layout containers to fill remaining (unused) space. Its behavior depends on the layout container in which it is used. |
 | [Spinner](./Spinner) | `Spinner` is an animated indicator that represents an action in progress with no deterministic progress value. |
-| [Splitter](./Splitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. |
+| [Splitter](./Splitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. When only a single child is visible (due to conditional rendering with `when` attributes), the splitter bar is not displayed and the single panel stretches to fill the entire viewport of the splitter container. |
 | [Stack](./Stack) | `Stack` is the fundamental layout container that organizes child elements in configurable horizontal or vertical arrangements. As the most versatile building block in XMLUI's layout system, it provides comprehensive alignment, spacing, and flow control options that serve as the foundation for all specialized stack variants. |
 | [StickyBox](./StickyBox) | `StickyBox` remains fixed at the top or bottom of the screen as the user scrolls. |
 | [SubMenuItem](./SubMenuItem) | `SubMenuItem` creates hierarchical menu structures by acting as both a menu item and a container for nested menu items. When clicked or hovered, it reveals a submenu containing additional [MenuItem](/components/MenuItem), [MenuSeparator](/components/MenuSeparator), or other [SubMenuItem](/components/SubMenuItems) components, enabling complex multi-level navigation and action organization. |
@@ -102,6 +108,6 @@
 | [ToneSwitch](./ToneSwitch) | `ToneSwitch` enables the user to switch between light and dark modes using a switch control. |
 | [Tooltip](./Tooltip) | A tooltip component that displays text when hovering over trigger content. |
 | [Tree](./Tree) | The `Tree` component is a virtualized tree component that displays hierarchical data with support for flat and hierarchy data formats. |
-| [VSplitter](./VSplitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. |
+| [VSplitter](./VSplitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. When only a single child is visible (due to conditional rendering with `when` attributes), the splitter bar is not displayed and the single panel stretches to fill the entire viewport of the splitter container. |
 | [VStack](./VStack) | This component represents a stack rendering its contents vertically. |
 

docs/content/extensions/xmlui-animations/Animation.md

@@ -1,6 +1,6 @@
 # Animation [#animation]
 
-The `Animation` component represents a generic animation wrapper that can apply various animations to its children.
+No description provided.
 
 ## Properties
 

docs/content/extensions/xmlui-website-blocks/HelloMd.md

@@ -0,0 +1,19 @@
+# HelloMd [#hellomd]
+
+A sample component
+
+## Properties
+
+This component does not have any properties.
+
+## Events
+
+This component does not have any events.
+
+## Exposed Methods
+
+This component does not expose any methods.
+
+## Styling
+
+This component does not have any styles.