This is page 23 of 141. Use http://codebase.md/xmlui-org/xmlui/%7Bnode.props.src?format=md&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   └── config.json
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs.yml
│       ├── prepare-versions.yml
│       ├── release-packages.yml
│       ├── run-all-tests.yml
│       └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│   ├── launch.json
│   └── settings.json
├── blog
│   ├── .gitignore
│   ├── .gitkeep
│   ├── CHANGELOG.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── layout-changes.md
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   └── lorem-ipsum.png
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   └── welcome-to-the-xmlui-blog.md
│   │   ├── mockServiceWorker.js
│   │   ├── resources
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   └── for-download
│   │   │   │       └── xmlui
│   │   │   │           └── xmlui-standalone.umd.js
│   │   │   ├── github.svg
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   ├── rss.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   └── PageNotFound.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       └── blog-theme.ts
│   └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│   ├── .gitignore
│   ├── CHANGELOG.md
│   ├── ComponentRefLinks.txt
│   ├── content
│   │   ├── _meta.json
│   │   ├── components
│   │   │   ├── _meta.json
│   │   │   ├── _overview.md
│   │   │   ├── APICall.md
│   │   │   ├── App.md
│   │   │   ├── AppHeader.md
│   │   │   ├── AppState.md
│   │   │   ├── AutoComplete.md
│   │   │   ├── Avatar.md
│   │   │   ├── Backdrop.md
│   │   │   ├── Badge.md
│   │   │   ├── BarChart.md
│   │   │   ├── Bookmark.md
│   │   │   ├── Breakout.md
│   │   │   ├── Button.md
│   │   │   ├── Card.md
│   │   │   ├── Carousel.md
│   │   │   ├── ChangeListener.md
│   │   │   ├── Checkbox.md
│   │   │   ├── CHStack.md
│   │   │   ├── ColorPicker.md
│   │   │   ├── Column.md
│   │   │   ├── ContentSeparator.md
│   │   │   ├── CVStack.md
│   │   │   ├── DataSource.md
│   │   │   ├── DateInput.md
│   │   │   ├── DatePicker.md
│   │   │   ├── DonutChart.md
│   │   │   ├── DropdownMenu.md
│   │   │   ├── EmojiSelector.md
│   │   │   ├── ExpandableItem.md
│   │   │   ├── FileInput.md
│   │   │   ├── FileUploadDropZone.md
│   │   │   ├── FlowLayout.md
│   │   │   ├── Footer.md
│   │   │   ├── Form.md
│   │   │   ├── FormItem.md
│   │   │   ├── FormSection.md
│   │   │   ├── Fragment.md
│   │   │   ├── H1.md
│   │   │   ├── H2.md
│   │   │   ├── H3.md
│   │   │   ├── H4.md
│   │   │   ├── H5.md
│   │   │   ├── H6.md
│   │   │   ├── Heading.md
│   │   │   ├── HSplitter.md
│   │   │   ├── HStack.md
│   │   │   ├── Icon.md
│   │   │   ├── IFrame.md
│   │   │   ├── Image.md
│   │   │   ├── Items.md
│   │   │   ├── LabelList.md
│   │   │   ├── Legend.md
│   │   │   ├── LineChart.md
│   │   │   ├── Link.md
│   │   │   ├── List.md
│   │   │   ├── Logo.md
│   │   │   ├── Markdown.md
│   │   │   ├── MenuItem.md
│   │   │   ├── MenuSeparator.md
│   │   │   ├── ModalDialog.md
│   │   │   ├── NavGroup.md
│   │   │   ├── NavLink.md
│   │   │   ├── NavPanel.md
│   │   │   ├── NoResult.md
│   │   │   ├── NumberBox.md
│   │   │   ├── Option.md
│   │   │   ├── Page.md
│   │   │   ├── PageMetaTitle.md
│   │   │   ├── Pages.md
│   │   │   ├── Pagination.md
│   │   │   ├── PasswordInput.md
│   │   │   ├── PieChart.md
│   │   │   ├── ProgressBar.md
│   │   │   ├── Queue.md
│   │   │   ├── RadioGroup.md
│   │   │   ├── RealTimeAdapter.md
│   │   │   ├── Redirect.md
│   │   │   ├── Select.md
│   │   │   ├── Slider.md
│   │   │   ├── Slot.md
│   │   │   ├── SpaceFiller.md
│   │   │   ├── Spinner.md
│   │   │   ├── Splitter.md
│   │   │   ├── Stack.md
│   │   │   ├── StickyBox.md
│   │   │   ├── SubMenuItem.md
│   │   │   ├── Switch.md
│   │   │   ├── TabItem.md
│   │   │   ├── Table.md
│   │   │   ├── TableOfContents.md
│   │   │   ├── Tabs.md
│   │   │   ├── Text.md
│   │   │   ├── TextArea.md
│   │   │   ├── TextBox.md
│   │   │   ├── Theme.md
│   │   │   ├── TimeInput.md
│   │   │   ├── Timer.md
│   │   │   ├── ToneChangerButton.md
│   │   │   ├── ToneSwitch.md
│   │   │   ├── Tooltip.md
│   │   │   ├── Tree.md
│   │   │   ├── VSplitter.md
│   │   │   ├── VStack.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   ├── xmlui-spreadsheet
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Spreadsheet.md
│   │   │   └── xmlui-website-blocks
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       ├── Carousel.md
│   │   │       ├── HelloMd.md
│   │   │       ├── HeroSection.md
│   │   │       └── ScrollToTop.md
│   │   └── extensions
│   │       ├── _meta.json
│   │       ├── xmlui-animations
│   │       │   ├── _meta.json
│   │       │   ├── _overview.md
│   │       │   ├── Animation.md
│   │       │   ├── FadeAnimation.md
│   │       │   ├── FadeInAnimation.md
│   │       │   ├── FadeOutAnimation.md
│   │       │   ├── ScaleAnimation.md
│   │       │   └── SlideInAnimation.md
│   │       └── xmlui-website-blocks
│   │           ├── _meta.json
│   │           ├── _overview.md
│   │           ├── Carousel.md
│   │           ├── HelloMd.md
│   │           ├── HeroSection.md
│   │           └── ScrollToTop.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── feed.rss
│   │   ├── mockServiceWorker.js
│   │   ├── pages
│   │   │   ├── _meta.json
│   │   │   ├── app-structure.md
│   │   │   ├── build-editor-component.md
│   │   │   ├── build-hello-world-component.md
│   │   │   ├── components-intro.md
│   │   │   ├── context-variables.md
│   │   │   ├── forms.md
│   │   │   ├── globals.md
│   │   │   ├── glossary.md
│   │   │   ├── helper-tags.md
│   │   │   ├── hosted-deployment.md
│   │   │   ├── howto
│   │   │   │   ├── assign-a-complex-json-literal-to-a-component-variable.md
│   │   │   │   ├── chain-a-refetch.md
│   │   │   │   ├── debug-a-component.md
│   │   │   │   ├── delay-a-datasource-until-another-datasource-is-ready.md
│   │   │   │   ├── delegate-a-method.md
│   │   │   │   ├── do-custom-form-validation.md
│   │   │   │   ├── expose-a-method-from-a-component.md
│   │   │   │   ├── filter-and-transform-data-from-an-api.md
│   │   │   │   ├── group-items-in-list-by-a-property.md
│   │   │   │   ├── handle-background-operations.md
│   │   │   │   ├── hide-an-element-until-its-datasource-is-ready.md
│   │   │   │   ├── make-a-set-of-equal-width-cards.md
│   │   │   │   ├── make-a-table-responsive.md
│   │   │   │   ├── make-navpanel-width-responsive.md
│   │   │   │   ├── modify-a-value-reported-in-a-column.md
│   │   │   │   ├── paginate-a-list.md
│   │   │   │   ├── pass-data-to-a-modal-dialog.md
│   │   │   │   ├── react-to-button-click-not-keystrokes.md
│   │   │   │   ├── set-the-initial-value-of-a-select-from-fetched-data.md
│   │   │   │   ├── share-a-modaldialog-across-components.md
│   │   │   │   ├── sync-selections-between-table-and-list-views.md
│   │   │   │   ├── update-ui-optimistically.md
│   │   │   │   ├── use-built-in-form-validation.md
│   │   │   │   └── use-the-same-modaldialog-to-add-or-edit.md
│   │   │   ├── howto.md
│   │   │   ├── intro.md
│   │   │   ├── layout.md
│   │   │   ├── markup.md
│   │   │   ├── mcp.md
│   │   │   ├── modal-dialogs.md
│   │   │   ├── news-and-reviews.md
│   │   │   ├── reactive-intro.md
│   │   │   ├── refactoring.md
│   │   │   ├── routing-and-links.md
│   │   │   ├── samples
│   │   │   │   ├── color-palette.xmlui
│   │   │   │   ├── color-values.xmlui
│   │   │   │   ├── shadow-sizes.xmlui
│   │   │   │   ├── spacing-sizes.xmlui
│   │   │   │   ├── swatch.xmlui
│   │   │   │   ├── theme-gallery-brief.xmlui
│   │   │   │   └── theme-gallery.xmlui
│   │   │   ├── scoping.md
│   │   │   ├── scripting.md
│   │   │   ├── styles-and-themes
│   │   │   │   ├── common-units.md
│   │   │   │   ├── layout-props.md
│   │   │   │   ├── theme-variable-defaults.md
│   │   │   │   ├── theme-variables.md
│   │   │   │   └── themes.md
│   │   │   ├── template-properties.md
│   │   │   ├── test.md
│   │   │   ├── tutorial-01.md
│   │   │   ├── tutorial-02.md
│   │   │   ├── tutorial-03.md
│   │   │   ├── tutorial-04.md
│   │   │   ├── tutorial-05.md
│   │   │   ├── tutorial-06.md
│   │   │   ├── tutorial-07.md
│   │   │   ├── tutorial-08.md
│   │   │   ├── tutorial-09.md
│   │   │   ├── tutorial-10.md
│   │   │   ├── tutorial-11.md
│   │   │   ├── tutorial-12.md
│   │   │   ├── universal-properties.md
│   │   │   ├── user-defined-components.md
│   │   │   ├── vscode.md
│   │   │   ├── working-with-markdown.md
│   │   │   ├── working-with-text.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-charts
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── BarChart.md
│   │   │   │   ├── DonutChart.md
│   │   │   │   ├── LabelList.md
│   │   │   │   ├── Legend.md
│   │   │   │   ├── LineChart.md
│   │   │   │   └── PieChart.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   └── xmlui-spreadsheet
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       └── Spreadsheet.md
│   │   ├── resources
│   │   │   ├── devdocs
│   │   │   │   ├── debug-proxy-object-2.png
│   │   │   │   ├── debug-proxy-object.png
│   │   │   │   ├── table_editor_01.png
│   │   │   │   ├── table_editor_02.png
│   │   │   │   ├── table_editor_03.png
│   │   │   │   ├── table_editor_04.png
│   │   │   │   ├── table_editor_05.png
│   │   │   │   ├── table_editor_06.png
│   │   │   │   ├── table_editor_07.png
│   │   │   │   ├── table_editor_08.png
│   │   │   │   ├── table_editor_09.png
│   │   │   │   ├── table_editor_10.png
│   │   │   │   ├── table_editor_11.png
│   │   │   │   ├── table-editor-01.png
│   │   │   │   ├── table-editor-02.png
│   │   │   │   ├── table-editor-03.png
│   │   │   │   ├── table-editor-04.png
│   │   │   │   ├── table-editor-06.png
│   │   │   │   ├── table-editor-07.png
│   │   │   │   ├── table-editor-08.png
│   │   │   │   ├── table-editor-09.png
│   │   │   │   └── xmlui-rendering-of-tiptap-markdown.png
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   ├── clients.json
│   │   │   │   ├── daily-revenue.json
│   │   │   │   ├── dashboard-stats.json
│   │   │   │   ├── demo.xmlui
│   │   │   │   ├── demo.xmlui.xs
│   │   │   │   ├── downloads
│   │   │   │   │   └── downloads.json
│   │   │   │   ├── for-download
│   │   │   │   │   ├── index-with-api.html
│   │   │   │   │   ├── index.html
│   │   │   │   │   ├── mockApi.js
│   │   │   │   │   ├── start-darwin.sh
│   │   │   │   │   ├── start-linux.sh
│   │   │   │   │   ├── start.bat
│   │   │   │   │   └── xmlui
│   │   │   │   │       └── xmlui-standalone.umd.js
│   │   │   │   ├── getting-started
│   │   │   │   │   ├── cl-tutorial-final.zip
│   │   │   │   │   ├── cl-tutorial.zip
│   │   │   │   │   ├── cl-tutorial2.zip
│   │   │   │   │   ├── cl-tutorial3.zip
│   │   │   │   │   ├── cl-tutorial4.zip
│   │   │   │   │   ├── cl-tutorial5.zip
│   │   │   │   │   ├── cl-tutorial6.zip
│   │   │   │   │   ├── getting-started.zip
│   │   │   │   │   ├── hello-xmlui.zip
│   │   │   │   │   ├── xmlui-empty.zip
│   │   │   │   │   └── xmlui-starter.zip
│   │   │   │   ├── howto
│   │   │   │   │   └── component-icons
│   │   │   │   │       └── up-arrow.svg
│   │   │   │   ├── invoices.json
│   │   │   │   ├── monthly-status.json
│   │   │   │   ├── news-and-reviews.json
│   │   │   │   ├── products.json
│   │   │   │   ├── releases.json
│   │   │   │   ├── tutorials
│   │   │   │   │   ├── datasource
│   │   │   │   │   │   └── api.ts
│   │   │   │   │   └── p2do
│   │   │   │   │       ├── api.ts
│   │   │   │   │       └── todo-logo.svg
│   │   │   │   └── xmlui.json
│   │   │   ├── github.svg
│   │   │   ├── images
│   │   │   │   ├── apiaction-tutorial
│   │   │   │   │   ├── add-success.png
│   │   │   │   │   ├── apiaction-param.png
│   │   │   │   │   ├── change-completed.png
│   │   │   │   │   ├── change-in-progress.png
│   │   │   │   │   ├── confirm-delete.png
│   │   │   │   │   ├── data-error.png
│   │   │   │   │   ├── data-progress.png
│   │   │   │   │   ├── data-success.png
│   │   │   │   │   ├── display-1.png
│   │   │   │   │   ├── item-deleted.png
│   │   │   │   │   ├── item-updated.png
│   │   │   │   │   ├── missing-api-key.png
│   │   │   │   │   ├── new-item-added.png
│   │   │   │   │   └── test-message.png
│   │   │   │   ├── chat-api
│   │   │   │   │   └── domain-model.svg
│   │   │   │   ├── components
│   │   │   │   │   ├── image
│   │   │   │   │   │   └── breakfast.jpg
│   │   │   │   │   ├── markdown
│   │   │   │   │   │   └── colors.png
│   │   │   │   │   └── modal
│   │   │   │   │       ├── deep_link_dialog_1.jpg
│   │   │   │   │       └── deep_link_dialog_2.jpg
│   │   │   │   ├── create-apps
│   │   │   │   │   ├── collapsed-vertical.png
│   │   │   │   │   ├── using-forms-warning-dialog.png
│   │   │   │   │   └── using-forms.png
│   │   │   │   ├── datasource-tutorial
│   │   │   │   │   ├── data-with-header.png
│   │   │   │   │   ├── filtered-data.png
│   │   │   │   │   ├── filtered-items.png
│   │   │   │   │   ├── initial-page-items.png
│   │   │   │   │   ├── list-items.png
│   │   │   │   │   ├── next-page-items.png
│   │   │   │   │   ├── no-data.png
│   │   │   │   │   ├── pagination-1.jpg
│   │   │   │   │   ├── pagination-1.png
│   │   │   │   │   ├── polling-1.png
│   │   │   │   │   ├── refetch-data.png
│   │   │   │   │   ├── slow-loading.png
│   │   │   │   │   ├── test-message.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── unconventional-data.png
│   │   │   │   │   └── unfiltered-items.png
│   │   │   │   ├── flower.jpg
│   │   │   │   ├── get-started
│   │   │   │   │   ├── add-new-contact.png
│   │   │   │   │   ├── app-modified.png
│   │   │   │   │   ├── app-start.png
│   │   │   │   │   ├── app-with-boxes.png
│   │   │   │   │   ├── app-with-toast.png
│   │   │   │   │   ├── boilerplate-structure.png
│   │   │   │   │   ├── cl-initial.png
│   │   │   │   │   ├── cl-start.png
│   │   │   │   │   ├── contact-counts.png
│   │   │   │   │   ├── contact-dialog-title.png
│   │   │   │   │   ├── contact-dialog.png
│   │   │   │   │   ├── contact-menus.png
│   │   │   │   │   ├── contact-predicates.png
│   │   │   │   │   ├── context-menu.png
│   │   │   │   │   ├── dashboard-numbers.png
│   │   │   │   │   ├── default-contact-list.png
│   │   │   │   │   ├── delete-contact.png
│   │   │   │   │   ├── delete-task.png
│   │   │   │   │   ├── detailed-template.png
│   │   │   │   │   ├── edit-contact-details.png
│   │   │   │   │   ├── edited-contact-saved.png
│   │   │   │   │   ├── empty-sections.png
│   │   │   │   │   ├── filter-completed.png
│   │   │   │   │   ├── fullwidth-desktop.png
│   │   │   │   │   ├── fullwidth-mobile.png
│   │   │   │   │   ├── initial-table.png
│   │   │   │   │   ├── items-and-badges.png
│   │   │   │   │   ├── loading-message.png
│   │   │   │   │   ├── new-contact-button.png
│   │   │   │   │   ├── new-contact-saved.png
│   │   │   │   │   ├── no-empty-sections.png
│   │   │   │   │   ├── personal-todo-initial.png
│   │   │   │   │   ├── piechart.png
│   │   │   │   │   ├── review-today.png
│   │   │   │   │   ├── rudimentary-dashboard.png
│   │   │   │   │   ├── section-collapsed.png
│   │   │   │   │   ├── sectioned-items.png
│   │   │   │   │   ├── sections-ordered.png
│   │   │   │   │   ├── spacex-list-with-links.png
│   │   │   │   │   ├── spacex-list.png
│   │   │   │   │   ├── start-personal-todo-1.png
│   │   │   │   │   ├── submit-new-contact.png
│   │   │   │   │   ├── submit-new-task.png
│   │   │   │   │   ├── syntax-highlighting.png
│   │   │   │   │   ├── table-with-badge.png
│   │   │   │   │   ├── template-with-card.png
│   │   │   │   │   ├── test-emulated-api.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── todo-logo.png
│   │   │   │   │   └── xmlui-tools.png
│   │   │   │   ├── HelloApp.png
│   │   │   │   ├── HelloApp2.png
│   │   │   │   ├── logos
│   │   │   │   │   ├── xmlui1.svg
│   │   │   │   │   ├── xmlui2.svg
│   │   │   │   │   ├── xmlui3.svg
│   │   │   │   │   ├── xmlui4.svg
│   │   │   │   │   ├── xmlui5.svg
│   │   │   │   │   ├── xmlui6.svg
│   │   │   │   │   └── xmlui7.svg
│   │   │   │   ├── pdf
│   │   │   │   │   └── dummy-pdf.jpg
│   │   │   │   ├── rendering-engine
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   ├── Component.svg
│   │   │   │   │   ├── CompoundComponent.svg
│   │   │   │   │   ├── RootComponent.svg
│   │   │   │   │   └── tree-with-containers.svg
│   │   │   │   ├── reviewers-guide
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   └── incbutton-in-action.png
│   │   │   │   ├── tools
│   │   │   │   │   └── boilerplate-structure.png
│   │   │   │   ├── try.svg
│   │   │   │   ├── tutorial
│   │   │   │   │   ├── app-chat-history.png
│   │   │   │   │   ├── app-content-placeholder.png
│   │   │   │   │   ├── app-header-and-content.png
│   │   │   │   │   ├── app-links-channel-selected.png
│   │   │   │   │   ├── app-links-click.png
│   │   │   │   │   ├── app-navigation.png
│   │   │   │   │   ├── finished-ex01.png
│   │   │   │   │   ├── finished-ex02.png
│   │   │   │   │   ├── hello.png
│   │   │   │   │   ├── splash-screen-advanced.png
│   │   │   │   │   ├── splash-screen-after-click.png
│   │   │   │   │   ├── splash-screen-centered.png
│   │   │   │   │   ├── splash-screen-events.png
│   │   │   │   │   ├── splash-screen-expression.png
│   │   │   │   │   ├── splash-screen-reuse-after.png
│   │   │   │   │   ├── splash-screen-reuse-before.png
│   │   │   │   │   └── splash-screen.png
│   │   │   │   └── tutorial-01.png
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   ├── Boxes.xmlui
│   │   │   ├── Breadcrumb.xmlui
│   │   │   ├── ChangeLog.xmlui
│   │   │   ├── ColorPalette.xmlui
│   │   │   ├── DocumentLinks.xmlui
│   │   │   ├── DocumentPage.xmlui
│   │   │   ├── DocumentPageNoTOC.xmlui
│   │   │   ├── Icons.xmlui
│   │   │   ├── IncButton.xmlui
│   │   │   ├── IncButton2.xmlui
│   │   │   ├── NameValue.xmlui
│   │   │   ├── PageNotFound.xmlui
│   │   │   ├── PaletteItem.xmlui
│   │   │   ├── Palettes.xmlui
│   │   │   ├── SectionHeader.xmlui
│   │   │   ├── TBD.xmlui
│   │   │   ├── Test.xmlui
│   │   │   ├── ThemesIntro.xmlui
│   │   │   ├── ThousandThemes.xmlui
│   │   │   ├── TubeStops.xmlui
│   │   │   ├── TubeStops.xmlui.xs
│   │   │   └── TwoColumnCode.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       ├── docs-theme.ts
│   │       ├── earthtone.ts
│   │       ├── xmlui-gray-on-default.ts
│   │       ├── xmlui-green-on-default.ts
│   │       └── xmlui-orange-on-default.ts
│   └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│   ├── xmlui-animations
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── Animation.tsx
│   │   │   ├── AnimationNative.tsx
│   │   │   ├── FadeAnimation.tsx
│   │   │   ├── FadeInAnimation.tsx
│   │   │   ├── FadeOutAnimation.tsx
│   │   │   ├── index.tsx
│   │   │   ├── ScaleAnimation.tsx
│   │   │   └── SlideInAnimation.tsx
│   │   └── tsconfig.json
│   ├── xmlui-devtools
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── devtools
│   │   │   │   ├── DevTools.tsx
│   │   │   │   ├── DevToolsNative.module.scss
│   │   │   │   ├── DevToolsNative.tsx
│   │   │   │   ├── ModalDialog.module.scss
│   │   │   │   ├── ModalDialog.tsx
│   │   │   │   ├── ModalVisibilityContext.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── editor
│   │   │   │   └── Editor.tsx
│   │   │   └── index.tsx
│   │   ├── tsconfig.json
│   │   └── vite.config-overrides.ts
│   ├── xmlui-hello-world
│   │   ├── .gitignore
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── HelloWorld.module.scss
│   │   │   ├── HelloWorld.tsx
│   │   │   ├── HelloWorldNative.tsx
│   │   │   └── index.tsx
│   │   └── tsconfig.json
│   ├── xmlui-os-frames
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── IPhoneFrame.module.scss
│   │   │   ├── IPhoneFrame.tsx
│   │   │   ├── MacOSAppFrame.module.scss
│   │   │   ├── MacOSAppFrame.tsx
│   │   │   ├── WindowsAppFrame.module.scss
│   │   │   └── WindowsAppFrame.tsx
│   │   └── tsconfig.json
│   ├── xmlui-pdf
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   ├── components
│   │   │   │   └── Pdf.xmlui
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── LazyPdfNative.tsx
│   │   │   ├── Pdf.module.scss
│   │   │   └── Pdf.tsx
│   │   └── tsconfig.json
│   ├── xmlui-playground
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── hooks
│   │   │   │   ├── usePlayground.ts
│   │   │   │   └── useToast.ts
│   │   │   ├── index.tsx
│   │   │   ├── playground
│   │   │   │   ├── Box.module.scss
│   │   │   │   ├── Box.tsx
│   │   │   │   ├── CodeSelector.tsx
│   │   │   │   ├── ConfirmationDialog.module.scss
│   │   │   │   ├── ConfirmationDialog.tsx
│   │   │   │   ├── Editor.tsx
│   │   │   │   ├── Header.module.scss
│   │   │   │   ├── Header.tsx
│   │   │   │   ├── Playground.tsx
│   │   │   │   ├── PlaygroundContent.module.scss
│   │   │   │   ├── PlaygroundContent.tsx
│   │   │   │   ├── PlaygroundNative.module.scss
│   │   │   │   ├── PlaygroundNative.tsx
│   │   │   │   ├── Preview.module.scss
│   │   │   │   ├── Preview.tsx
│   │   │   │   ├── Select.module.scss
│   │   │   │   ├── StandalonePlayground.tsx
│   │   │   │   ├── StandalonePlaygroundNative.module.scss
│   │   │   │   ├── StandalonePlaygroundNative.tsx
│   │   │   │   ├── ThemeSwitcher.module.scss
│   │   │   │   ├── ThemeSwitcher.tsx
│   │   │   │   ├── ToneSwitcher.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── providers
│   │   │   │   ├── Toast.module.scss
│   │   │   │   └── ToastProvider.tsx
│   │   │   ├── state
│   │   │   │   └── store.ts
│   │   │   ├── themes
│   │   │   │   └── theme.ts
│   │   │   └── utils
│   │   │       └── helpers.ts
│   │   └── tsconfig.json
│   ├── xmlui-search
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── Search.module.scss
│   │   │   └── Search.tsx
│   │   └── tsconfig.json
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── Spreadsheet.tsx
│   │   │   └── SpreadsheetNative.tsx
│   │   └── tsconfig.json
│   └── xmlui-website-blocks
│       ├── .gitignore
│       ├── CHANGELOG.md
│       ├── demo
│       │   ├── components
│       │   │   ├── HeroBackgroundBreakoutPage.xmlui
│       │   │   ├── HeroBackgroundsPage.xmlui
│       │   │   ├── HeroContentsPage.xmlui
│       │   │   ├── HeroTextAlignPage.xmlui
│       │   │   ├── HeroTextPage.xmlui
│       │   │   └── HeroTonesPage.xmlui
│       │   ├── Main.xmlui
│       │   └── themes
│       │       └── default.ts
│       ├── index.html
│       ├── index.ts
│       ├── meta
│       │   └── componentsMetadata.ts
│       ├── package.json
│       ├── public
│       │   └── resources
│       │       ├── building.jpg
│       │       └── xmlui-logo.svg
│       ├── src
│       │   ├── Carousel
│       │   │   ├── Carousel.module.scss
│       │   │   ├── Carousel.tsx
│       │   │   ├── CarouselContext.tsx
│       │   │   └── CarouselNative.tsx
│       │   ├── FancyButton
│       │   │   ├── FancyButton.module.scss
│       │   │   ├── FancyButton.tsx
│       │   │   └── FancyButton.xmlui
│       │   ├── Hello
│       │   │   ├── Hello.tsx
│       │   │   ├── Hello.xmlui
│       │   │   └── Hello.xmlui.xs
│       │   ├── HeroSection
│       │   │   ├── HeroSection.module.scss
│       │   │   ├── HeroSection.tsx
│       │   │   └── HeroSectionNative.tsx
│       │   ├── index.tsx
│       │   ├── ScrollToTop
│       │   │   ├── ScrollToTop.module.scss
│       │   │   ├── ScrollToTop.tsx
│       │   │   └── ScrollToTopNative.tsx
│       │   └── vite-env.d.ts
│       └── tsconfig.json
├── README.md
├── tools
│   ├── codefence
│   │   └── xmlui-code-fence-docs.md
│   ├── create-app
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── create-app.ts
│   │   ├── helpers
│   │   │   ├── copy.ts
│   │   │   ├── get-pkg-manager.ts
│   │   │   ├── git.ts
│   │   │   ├── install.ts
│   │   │   ├── is-folder-empty.ts
│   │   │   ├── is-writeable.ts
│   │   │   ├── make-dir.ts
│   │   │   └── validate-pkg.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── templates
│   │   │   ├── default
│   │   │   │   └── ts
│   │   │   │       ├── gitignore
│   │   │   │       ├── index.html
│   │   │   │       ├── index.ts
│   │   │   │       ├── public
│   │   │   │       │   ├── mockServiceWorker.js
│   │   │   │       │   ├── resources
│   │   │   │       │   │   ├── favicon.ico
│   │   │   │       │   │   └── xmlui-logo.svg
│   │   │   │       │   └── serve.json
│   │   │   │       └── src
│   │   │   │           ├── components
│   │   │   │           │   ├── ApiAware.xmlui
│   │   │   │           │   ├── Home.xmlui
│   │   │   │           │   ├── IncButton.xmlui
│   │   │   │           │   └── PagePanel.xmlui
│   │   │   │           ├── config.ts
│   │   │   │           └── Main.xmlui
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── tsconfig.json
│   ├── create-xmlui-hello-world
│   │   ├── index.js
│   │   └── package.json
│   └── vscode
│       ├── .gitignore
│       ├── .vscode
│       │   ├── launch.json
│       │   └── tasks.json
│       ├── .vscodeignore
│       ├── build.sh
│       ├── CHANGELOG.md
│       ├── esbuild.js
│       ├── eslint.config.mjs
│       ├── formatter-docs.md
│       ├── generate-test-sample.sh
│       ├── LICENSE.md
│       ├── package-lock.json
│       ├── package.json
│       ├── README.md
│       ├── resources
│       │   ├── xmlui-logo.png
│       │   └── xmlui-markup-syntax-highlighting.png
│       ├── src
│       │   ├── extension.ts
│       │   └── server.ts
│       ├── syntaxes
│       │   └── xmlui.tmLanguage.json
│       ├── test-samples
│       │   └── sample.xmlui
│       ├── tsconfig.json
│       └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
    ├── .gitignore
    ├── bin
    │   ├── bootstrap.js
    │   ├── build-lib.ts
    │   ├── build.ts
    │   ├── index.ts
    │   ├── preview.ts
    │   ├── start.ts
    │   ├── vite-xmlui-plugin.ts
    │   └── viteConfig.ts
    ├── CHANGELOG.md
    ├── conventions
    │   ├── component-qa-checklist.md
    │   ├── copilot-conventions.md
    │   ├── create-xmlui-components.md
    │   ├── mermaid.md
    │   ├── testing-conventions.md
    │   └── xmlui-in-a-nutshell.md
    ├── dev-docs
    │   ├── accessibility.md
    │   ├── build-system.md
    │   ├── build-xmlui.md
    │   ├── component-behaviors.md
    │   ├── components-with-options.md
    │   ├── containers.md
    │   ├── data-operations.md
    │   ├── glossary.md
    │   ├── index.md
    │   ├── next
    │   │   ├── component-dev-guide.md
    │   │   ├── configuration-management-enhancement-summary.md
    │   │   ├── documentation-scripts-refactoring-complete-summary.md
    │   │   ├── documentation-scripts-refactoring-plan.md
    │   │   ├── duplicate-pattern-extraction-summary.md
    │   │   ├── error-handling-standardization-summary.md
    │   │   ├── generating-component-reference.md
    │   │   ├── index.md
    │   │   ├── logging-consistency-implementation-summary.md
    │   │   ├── project-build.md
    │   │   ├── project-structure.md
    │   │   ├── theme-context.md
    │   │   ├── tiptap-design-considerations.md
    │   │   ├── working-with-code.md
    │   │   ├── xmlui-runtime-architecture
    │   │   └── xmlui-wcag-accessibility-report.md
    │   ├── react-fundamentals.md
    │   ├── release-method.md
    │   ├── standalone-app.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── playwright.config.ts
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── generate-docs
    │   │   ├── build-downloads-map.mjs
    │   │   ├── build-pages-map.mjs
    │   │   ├── components-config.json
    │   │   ├── configuration-management.mjs
    │   │   ├── constants.mjs
    │   │   ├── create-theme-files.mjs
    │   │   ├── DocsGenerator.mjs
    │   │   ├── error-handling.mjs
    │   │   ├── extensions-config.json
    │   │   ├── folders.mjs
    │   │   ├── generate-summary-files.mjs
    │   │   ├── get-docs.mjs
    │   │   ├── input-handler.mjs
    │   │   ├── logger.mjs
    │   │   ├── logging-standards.mjs
    │   │   ├── MetadataProcessor.mjs
    │   │   ├── pattern-utilities.mjs
    │   │   └── utils.mjs
    │   ├── get-langserver-metadata.mjs
    │   ├── inline-links.mjs
    │   └── README-e2e-summary.md
    ├── src
    │   ├── abstractions
    │   │   ├── _conventions.md
    │   │   ├── ActionDefs.ts
    │   │   ├── AppContextDefs.ts
    │   │   ├── ComponentDefs.ts
    │   │   ├── ContainerDefs.ts
    │   │   ├── ExtensionDefs.ts
    │   │   ├── FunctionDefs.ts
    │   │   ├── RendererDefs.ts
    │   │   ├── scripting
    │   │   │   ├── BlockScope.ts
    │   │   │   ├── Compilation.ts
    │   │   │   ├── LogicalThread.ts
    │   │   │   ├── LoopScope.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── ScriptParserError.ts
    │   │   │   ├── Token.ts
    │   │   │   ├── TryScope.ts
    │   │   │   └── TryScopeExp.ts
    │   │   └── ThemingDefs.ts
    │   ├── components
    │   │   ├── _conventions.md
    │   │   ├── abstractions.ts
    │   │   ├── Accordion
    │   │   │   ├── Accordion.md
    │   │   │   ├── Accordion.module.scss
    │   │   │   ├── Accordion.spec.ts
    │   │   │   ├── Accordion.tsx
    │   │   │   ├── AccordionContext.tsx
    │   │   │   ├── AccordionItem.tsx
    │   │   │   ├── AccordionItemNative.tsx
    │   │   │   └── AccordionNative.tsx
    │   │   ├── Animation
    │   │   │   └── AnimationNative.tsx
    │   │   ├── APICall
    │   │   │   ├── APICall.md
    │   │   │   ├── APICall.spec.ts
    │   │   │   ├── APICall.tsx
    │   │   │   └── APICallNative.tsx
    │   │   ├── App
    │   │   │   ├── App.md
    │   │   │   ├── App.module.scss
    │   │   │   ├── App.spec.ts
    │   │   │   ├── App.tsx
    │   │   │   ├── AppLayoutContext.ts
    │   │   │   ├── AppNative.tsx
    │   │   │   ├── AppStateContext.ts
    │   │   │   ├── doc-resources
    │   │   │   │   ├── condensed-sticky.xmlui
    │   │   │   │   ├── condensed.xmlui
    │   │   │   │   ├── horizontal-sticky.xmlui
    │   │   │   │   ├── horizontal.xmlui
    │   │   │   │   ├── vertical-full-header.xmlui
    │   │   │   │   ├── vertical-sticky.xmlui
    │   │   │   │   └── vertical.xmlui
    │   │   │   ├── IndexerContext.ts
    │   │   │   ├── LinkInfoContext.ts
    │   │   │   ├── SearchContext.tsx
    │   │   │   ├── Sheet.module.scss
    │   │   │   └── Sheet.tsx
    │   │   ├── AppHeader
    │   │   │   ├── AppHeader.md
    │   │   │   ├── AppHeader.module.scss
    │   │   │   ├── AppHeader.spec.ts
    │   │   │   ├── AppHeader.tsx
    │   │   │   └── AppHeaderNative.tsx
    │   │   ├── AppState
    │   │   │   ├── AppState.md
    │   │   │   ├── AppState.spec.ts
    │   │   │   ├── AppState.tsx
    │   │   │   └── AppStateNative.tsx
    │   │   ├── AutoComplete
    │   │   │   ├── AutoComplete.md
    │   │   │   ├── AutoComplete.module.scss
    │   │   │   ├── AutoComplete.spec.ts
    │   │   │   ├── AutoComplete.tsx
    │   │   │   ├── AutoCompleteContext.tsx
    │   │   │   └── AutoCompleteNative.tsx
    │   │   ├── Avatar
    │   │   │   ├── Avatar.md
    │   │   │   ├── Avatar.module.scss
    │   │   │   ├── Avatar.spec.ts
    │   │   │   ├── Avatar.tsx
    │   │   │   └── AvatarNative.tsx
    │   │   ├── Backdrop
    │   │   │   ├── Backdrop.md
    │   │   │   ├── Backdrop.module.scss
    │   │   │   ├── Backdrop.spec.ts
    │   │   │   ├── Backdrop.tsx
    │   │   │   └── BackdropNative.tsx
    │   │   ├── Badge
    │   │   │   ├── Badge.md
    │   │   │   ├── Badge.module.scss
    │   │   │   ├── Badge.spec.ts
    │   │   │   ├── Badge.tsx
    │   │   │   └── BadgeNative.tsx
    │   │   ├── Bookmark
    │   │   │   ├── Bookmark.md
    │   │   │   ├── Bookmark.module.scss
    │   │   │   ├── Bookmark.spec.ts
    │   │   │   ├── Bookmark.tsx
    │   │   │   └── BookmarkNative.tsx
    │   │   ├── Breakout
    │   │   │   ├── Breakout.module.scss
    │   │   │   ├── Breakout.spec.ts
    │   │   │   ├── Breakout.tsx
    │   │   │   └── BreakoutNative.tsx
    │   │   ├── Button
    │   │   │   ├── Button-style.spec.ts
    │   │   │   ├── Button.md
    │   │   │   ├── Button.module.scss
    │   │   │   ├── Button.spec.ts
    │   │   │   ├── Button.tsx
    │   │   │   └── ButtonNative.tsx
    │   │   ├── Card
    │   │   │   ├── Card.md
    │   │   │   ├── Card.module.scss
    │   │   │   ├── Card.spec.ts
    │   │   │   ├── Card.tsx
    │   │   │   └── CardNative.tsx
    │   │   ├── Carousel
    │   │   │   ├── Carousel.md
    │   │   │   ├── Carousel.module.scss
    │   │   │   ├── Carousel.spec.ts
    │   │   │   ├── Carousel.tsx
    │   │   │   ├── CarouselContext.tsx
    │   │   │   ├── CarouselItem.tsx
    │   │   │   ├── CarouselItemNative.tsx
    │   │   │   └── CarouselNative.tsx
    │   │   ├── ChangeListener
    │   │   │   ├── ChangeListener.md
    │   │   │   ├── ChangeListener.spec.ts
    │   │   │   ├── ChangeListener.tsx
    │   │   │   └── ChangeListenerNative.tsx
    │   │   ├── chart-color-schemes.ts
    │   │   ├── Charts
    │   │   │   ├── AreaChart
    │   │   │   │   ├── AreaChart.md
    │   │   │   │   ├── AreaChart.spec.ts
    │   │   │   │   ├── AreaChart.tsx
    │   │   │   │   └── AreaChartNative.tsx
    │   │   │   ├── BarChart
    │   │   │   │   ├── BarChart.md
    │   │   │   │   ├── BarChart.module.scss
    │   │   │   │   ├── BarChart.spec.ts
    │   │   │   │   ├── BarChart.tsx
    │   │   │   │   └── BarChartNative.tsx
    │   │   │   ├── DonutChart
    │   │   │   │   ├── DonutChart.spec.ts
    │   │   │   │   └── DonutChart.tsx
    │   │   │   ├── LabelList
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   ├── LabelListNative.module.scss
    │   │   │   │   └── LabelListNative.tsx
    │   │   │   ├── Legend
    │   │   │   │   ├── Legend.spec.ts
    │   │   │   │   ├── Legend.tsx
    │   │   │   │   └── LegendNative.tsx
    │   │   │   ├── LineChart
    │   │   │   │   ├── LineChart.md
    │   │   │   │   ├── LineChart.module.scss
    │   │   │   │   ├── LineChart.spec.ts
    │   │   │   │   ├── LineChart.tsx
    │   │   │   │   └── LineChartNative.tsx
    │   │   │   ├── PieChart
    │   │   │   │   ├── PieChart.md
    │   │   │   │   ├── PieChart.spec.ts
    │   │   │   │   ├── PieChart.tsx
    │   │   │   │   ├── PieChartNative.module.scss
    │   │   │   │   └── PieChartNative.tsx
    │   │   │   ├── RadarChart
    │   │   │   │   ├── RadarChart.md
    │   │   │   │   ├── RadarChart.spec.ts
    │   │   │   │   ├── RadarChart.tsx
    │   │   │   │   └── RadarChartNative.tsx
    │   │   │   ├── Tooltip
    │   │   │   │   ├── TooltipContent.module.scss
    │   │   │   │   ├── TooltipContent.spec.ts
    │   │   │   │   └── TooltipContent.tsx
    │   │   │   └── utils
    │   │   │       ├── abstractions.ts
    │   │   │       └── ChartProvider.tsx
    │   │   ├── Checkbox
    │   │   │   ├── Checkbox.md
    │   │   │   ├── Checkbox.spec.ts
    │   │   │   └── Checkbox.tsx
    │   │   ├── CodeBlock
    │   │   │   ├── CodeBlock.module.scss
    │   │   │   ├── CodeBlock.spec.ts
    │   │   │   ├── CodeBlock.tsx
    │   │   │   ├── CodeBlockNative.tsx
    │   │   │   └── highlight-code.ts
    │   │   ├── collectedComponentMetadata.ts
    │   │   ├── ColorPicker
    │   │   │   ├── ColorPicker.md
    │   │   │   ├── ColorPicker.module.scss
    │   │   │   ├── ColorPicker.spec.ts
    │   │   │   ├── ColorPicker.tsx
    │   │   │   └── ColorPickerNative.tsx
    │   │   ├── Column
    │   │   │   ├── Column.md
    │   │   │   ├── Column.tsx
    │   │   │   ├── ColumnNative.tsx
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   └── TableContext.tsx
    │   │   ├── component-utils.ts
    │   │   ├── ComponentProvider.tsx
    │   │   ├── ComponentRegistryContext.tsx
    │   │   ├── container-helpers.tsx
    │   │   ├── ContentSeparator
    │   │   │   ├── ContentSeparator.md
    │   │   │   ├── ContentSeparator.module.scss
    │   │   │   ├── ContentSeparator.spec.ts
    │   │   │   ├── ContentSeparator.tsx
    │   │   │   └── ContentSeparatorNative.tsx
    │   │   ├── DataSource
    │   │   │   ├── DataSource.md
    │   │   │   └── DataSource.tsx
    │   │   ├── DateInput
    │   │   │   ├── DateInput.md
    │   │   │   ├── DateInput.module.scss
    │   │   │   ├── DateInput.spec.ts
    │   │   │   ├── DateInput.tsx
    │   │   │   └── DateInputNative.tsx
    │   │   ├── DatePicker
    │   │   │   ├── DatePicker.md
    │   │   │   ├── DatePicker.module.scss
    │   │   │   ├── DatePicker.spec.ts
    │   │   │   ├── DatePicker.tsx
    │   │   │   └── DatePickerNative.tsx
    │   │   ├── DropdownMenu
    │   │   │   ├── DropdownMenu.md
    │   │   │   ├── DropdownMenu.module.scss
    │   │   │   ├── DropdownMenu.spec.ts
    │   │   │   ├── DropdownMenu.tsx
    │   │   │   ├── DropdownMenuNative.tsx
    │   │   │   ├── MenuItem.md
    │   │   │   └── SubMenuItem.md
    │   │   ├── EmojiSelector
    │   │   │   ├── EmojiSelector.md
    │   │   │   ├── EmojiSelector.spec.ts
    │   │   │   ├── EmojiSelector.tsx
    │   │   │   └── EmojiSelectorNative.tsx
    │   │   ├── ExpandableItem
    │   │   │   ├── ExpandableItem.module.scss
    │   │   │   ├── ExpandableItem.spec.ts
    │   │   │   ├── ExpandableItem.tsx
    │   │   │   └── ExpandableItemNative.tsx
    │   │   ├── FileInput
    │   │   │   ├── FileInput.md
    │   │   │   ├── FileInput.module.scss
    │   │   │   ├── FileInput.spec.ts
    │   │   │   ├── FileInput.tsx
    │   │   │   └── FileInputNative.tsx
    │   │   ├── FileUploadDropZone
    │   │   │   ├── FileUploadDropZone.md
    │   │   │   ├── FileUploadDropZone.module.scss
    │   │   │   ├── FileUploadDropZone.spec.ts
    │   │   │   ├── FileUploadDropZone.tsx
    │   │   │   └── FileUploadDropZoneNative.tsx
    │   │   ├── FlowLayout
    │   │   │   ├── FlowLayout.md
    │   │   │   ├── FlowLayout.module.scss
    │   │   │   ├── FlowLayout.spec.ts
    │   │   │   ├── FlowLayout.spec.ts-snapshots
    │   │   │   │   └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
    │   │   │   ├── FlowLayout.tsx
    │   │   │   └── FlowLayoutNative.tsx
    │   │   ├── Footer
    │   │   │   ├── Footer.md
    │   │   │   ├── Footer.module.scss
    │   │   │   ├── Footer.spec.ts
    │   │   │   ├── Footer.tsx
    │   │   │   └── FooterNative.tsx
    │   │   ├── Form
    │   │   │   ├── Form.md
    │   │   │   ├── Form.module.scss
    │   │   │   ├── Form.spec.ts
    │   │   │   ├── Form.tsx
    │   │   │   ├── formActions.ts
    │   │   │   ├── FormContext.ts
    │   │   │   └── FormNative.tsx
    │   │   ├── FormItem
    │   │   │   ├── FormItem.md
    │   │   │   ├── FormItem.module.scss
    │   │   │   ├── FormItem.spec.ts
    │   │   │   ├── FormItem.tsx
    │   │   │   ├── FormItemNative.tsx
    │   │   │   ├── HelperText.module.scss
    │   │   │   ├── HelperText.tsx
    │   │   │   ├── ItemWithLabel.tsx
    │   │   │   └── Validations.ts
    │   │   ├── FormSection
    │   │   │   ├── FormSection.md
    │   │   │   ├── FormSection.ts
    │   │   │   └── FormSection.xmlui
    │   │   ├── Fragment
    │   │   │   ├── Fragment.spec.ts
    │   │   │   └── Fragment.tsx
    │   │   ├── Heading
    │   │   │   ├── abstractions.ts
    │   │   │   ├── H1.md
    │   │   │   ├── H1.spec.ts
    │   │   │   ├── H2.md
    │   │   │   ├── H2.spec.ts
    │   │   │   ├── H3.md
    │   │   │   ├── H3.spec.ts
    │   │   │   ├── H4.md
    │   │   │   ├── H4.spec.ts
    │   │   │   ├── H5.md
    │   │   │   ├── H5.spec.ts
    │   │   │   ├── H6.md
    │   │   │   ├── H6.spec.ts
    │   │   │   ├── Heading.md
    │   │   │   ├── Heading.module.scss
    │   │   │   ├── Heading.spec.ts
    │   │   │   ├── Heading.tsx
    │   │   │   └── HeadingNative.tsx
    │   │   ├── HoverCard
    │   │   │   ├── HoverCard.tsx
    │   │   │   └── HovercardNative.tsx
    │   │   ├── HtmlTags
    │   │   │   ├── HtmlTags.module.scss
    │   │   │   ├── HtmlTags.spec.ts
    │   │   │   └── HtmlTags.tsx
    │   │   ├── Icon
    │   │   │   ├── AdmonitionDanger.tsx
    │   │   │   ├── AdmonitionInfo.tsx
    │   │   │   ├── AdmonitionNote.tsx
    │   │   │   ├── AdmonitionTip.tsx
    │   │   │   ├── AdmonitionWarning.tsx
    │   │   │   ├── ApiIcon.tsx
    │   │   │   ├── ArrowDropDown.module.scss
    │   │   │   ├── ArrowDropDown.tsx
    │   │   │   ├── ArrowDropUp.module.scss
    │   │   │   ├── ArrowDropUp.tsx
    │   │   │   ├── ArrowLeft.module.scss
    │   │   │   ├── ArrowLeft.tsx
    │   │   │   ├── ArrowRight.module.scss
    │   │   │   ├── ArrowRight.tsx
    │   │   │   ├── Attach.tsx
    │   │   │   ├── Binding.module.scss
    │   │   │   ├── Binding.tsx
    │   │   │   ├── BoardIcon.tsx
    │   │   │   ├── BoxIcon.tsx
    │   │   │   ├── CheckIcon.tsx
    │   │   │   ├── ChevronDownIcon.tsx
    │   │   │   ├── ChevronLeft.tsx
    │   │   │   ├── ChevronRight.tsx
    │   │   │   ├── ChevronUpIcon.tsx
    │   │   │   ├── CodeFileIcon.tsx
    │   │   │   ├── CodeSandbox.tsx
    │   │   │   ├── CompactListIcon.tsx
    │   │   │   ├── ContentCopyIcon.tsx
    │   │   │   ├── DarkToLightIcon.tsx
    │   │   │   ├── DatabaseIcon.module.scss
    │   │   │   ├── DatabaseIcon.tsx
    │   │   │   ├── DocFileIcon.tsx
    │   │   │   ├── DocIcon.tsx
    │   │   │   ├── DotMenuHorizontalIcon.tsx
    │   │   │   ├── DotMenuIcon.tsx
    │   │   │   ├── EmailIcon.tsx
    │   │   │   ├── EmptyFolderIcon.tsx
    │   │   │   ├── ErrorIcon.tsx
    │   │   │   ├── ExpressionIcon.tsx
    │   │   │   ├── FillPlusCricleIcon.tsx
    │   │   │   ├── FilterIcon.tsx
    │   │   │   ├── FolderIcon.tsx
    │   │   │   ├── GlobeIcon.tsx
    │   │   │   ├── HomeIcon.tsx
    │   │   │   ├── HyperLinkIcon.tsx
    │   │   │   ├── Icon.md
    │   │   │   ├── Icon.module.scss
    │   │   │   ├── Icon.spec.ts
    │   │   │   ├── Icon.tsx
    │   │   │   ├── IconNative.tsx
    │   │   │   ├── ImageFileIcon.tsx
    │   │   │   ├── Inspect.tsx
    │   │   │   ├── LightToDark.tsx
    │   │   │   ├── LinkIcon.tsx
    │   │   │   ├── ListIcon.tsx
    │   │   │   ├── LooseListIcon.tsx
    │   │   │   ├── MoonIcon.tsx
    │   │   │   ├── MoreOptionsIcon.tsx
    │   │   │   ├── NoSortIcon.tsx
    │   │   │   ├── PDFIcon.tsx
    │   │   │   ├── PenIcon.tsx
    │   │   │   ├── PhoneIcon.tsx
    │   │   │   ├── PhotoIcon.tsx
    │   │   │   ├── PlusIcon.tsx
    │   │   │   ├── SearchIcon.tsx
    │   │   │   ├── ShareIcon.tsx
    │   │   │   ├── SortAscendingIcon.tsx
    │   │   │   ├── SortDescendingIcon.tsx
    │   │   │   ├── StarsIcon.tsx
    │   │   │   ├── SunIcon.tsx
    │   │   │   ├── svg
    │   │   │   │   ├── admonition_danger.svg
    │   │   │   │   ├── admonition_info.svg
    │   │   │   │   ├── admonition_note.svg
    │   │   │   │   ├── admonition_tip.svg
    │   │   │   │   ├── admonition_warning.svg
    │   │   │   │   ├── api.svg
    │   │   │   │   ├── arrow-dropdown.svg
    │   │   │   │   ├── arrow-left.svg
    │   │   │   │   ├── arrow-right.svg
    │   │   │   │   ├── arrow-up.svg
    │   │   │   │   ├── attach.svg
    │   │   │   │   ├── binding.svg
    │   │   │   │   ├── box.svg
    │   │   │   │   ├── bulb.svg
    │   │   │   │   ├── code-file.svg
    │   │   │   │   ├── code-sandbox.svg
    │   │   │   │   ├── dark_to_light.svg
    │   │   │   │   ├── database.svg
    │   │   │   │   ├── doc.svg
    │   │   │   │   ├── empty-folder.svg
    │   │   │   │   ├── expression.svg
    │   │   │   │   ├── eye-closed.svg
    │   │   │   │   ├── eye-dark.svg
    │   │   │   │   ├── eye.svg
    │   │   │   │   ├── file-text.svg
    │   │   │   │   ├── filter.svg
    │   │   │   │   ├── folder.svg
    │   │   │   │   ├── img.svg
    │   │   │   │   ├── inspect.svg
    │   │   │   │   ├── light_to_dark.svg
    │   │   │   │   ├── moon.svg
    │   │   │   │   ├── pdf.svg
    │   │   │   │   ├── photo.svg
    │   │   │   │   ├── share.svg
    │   │   │   │   ├── stars.svg
    │   │   │   │   ├── sun.svg
    │   │   │   │   ├── trending-down.svg
    │   │   │   │   ├── trending-level.svg
    │   │   │   │   ├── trending-up.svg
    │   │   │   │   ├── txt.svg
    │   │   │   │   ├── unknown-file.svg
    │   │   │   │   ├── unlink.svg
    │   │   │   │   └── xls.svg
    │   │   │   ├── TableDeleteColumnIcon.tsx
    │   │   │   ├── TableDeleteRowIcon.tsx
    │   │   │   ├── TableInsertColumnIcon.tsx
    │   │   │   ├── TableInsertRowIcon.tsx
    │   │   │   ├── TrashIcon.tsx
    │   │   │   ├── TrendingDownIcon.tsx
    │   │   │   ├── TrendingLevelIcon.tsx
    │   │   │   ├── TrendingUpIcon.tsx
    │   │   │   ├── TxtIcon.tsx
    │   │   │   ├── UnknownFileIcon.tsx
    │   │   │   ├── UnlinkIcon.tsx
    │   │   │   ├── UserIcon.tsx
    │   │   │   ├── WarningIcon.tsx
    │   │   │   └── XlsIcon.tsx
    │   │   ├── IconProvider.tsx
    │   │   ├── IconRegistryContext.tsx
    │   │   ├── IFrame
    │   │   │   ├── IFrame.md
    │   │   │   ├── IFrame.module.scss
    │   │   │   ├── IFrame.spec.ts
    │   │   │   ├── IFrame.tsx
    │   │   │   └── IFrameNative.tsx
    │   │   ├── Image
    │   │   │   ├── Image.md
    │   │   │   ├── Image.module.scss
    │   │   │   ├── Image.spec.ts
    │   │   │   ├── Image.tsx
    │   │   │   └── ImageNative.tsx
    │   │   ├── Input
    │   │   │   ├── index.ts
    │   │   │   ├── InputAdornment.module.scss
    │   │   │   ├── InputAdornment.tsx
    │   │   │   ├── InputDivider.module.scss
    │   │   │   ├── InputDivider.tsx
    │   │   │   ├── InputLabel.module.scss
    │   │   │   ├── InputLabel.tsx
    │   │   │   ├── PartialInput.module.scss
    │   │   │   └── PartialInput.tsx
    │   │   ├── InspectButton
    │   │   │   ├── InspectButton.module.scss
    │   │   │   └── InspectButton.tsx
    │   │   ├── Items
    │   │   │   ├── Items.md
    │   │   │   ├── Items.spec.ts
    │   │   │   ├── Items.tsx
    │   │   │   └── ItemsNative.tsx
    │   │   ├── Link
    │   │   │   ├── Link.md
    │   │   │   ├── Link.module.scss
    │   │   │   ├── Link.spec.ts
    │   │   │   ├── Link.tsx
    │   │   │   └── LinkNative.tsx
    │   │   ├── List
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── List.md
    │   │   │   ├── List.module.scss
    │   │   │   ├── List.spec.ts
    │   │   │   ├── List.tsx
    │   │   │   └── ListNative.tsx
    │   │   ├── Logo
    │   │   │   ├── doc-resources
    │   │   │   │   └── xmlui-logo.svg
    │   │   │   ├── Logo.md
    │   │   │   ├── Logo.tsx
    │   │   │   └── LogoNative.tsx
    │   │   ├── Markdown
    │   │   │   ├── CodeText.module.scss
    │   │   │   ├── CodeText.tsx
    │   │   │   ├── Markdown.md
    │   │   │   ├── Markdown.module.scss
    │   │   │   ├── Markdown.spec.ts
    │   │   │   ├── Markdown.tsx
    │   │   │   ├── MarkdownNative.tsx
    │   │   │   ├── parse-binding-expr.ts
    │   │   │   └── utils.ts
    │   │   ├── metadata-helpers.ts
    │   │   ├── ModalDialog
    │   │   │   ├── ConfirmationModalContextProvider.tsx
    │   │   │   ├── Dialog.module.scss
    │   │   │   ├── Dialog.tsx
    │   │   │   ├── ModalDialog.md
    │   │   │   ├── ModalDialog.module.scss
    │   │   │   ├── ModalDialog.spec.ts
    │   │   │   ├── ModalDialog.tsx
    │   │   │   ├── ModalDialogNative.tsx
    │   │   │   └── ModalVisibilityContext.tsx
    │   │   ├── NavGroup
    │   │   │   ├── NavGroup.md
    │   │   │   ├── NavGroup.module.scss
    │   │   │   ├── NavGroup.spec.ts
    │   │   │   ├── NavGroup.tsx
    │   │   │   ├── NavGroupContext.ts
    │   │   │   └── NavGroupNative.tsx
    │   │   ├── NavLink
    │   │   │   ├── NavLink.md
    │   │   │   ├── NavLink.module.scss
    │   │   │   ├── NavLink.spec.ts
    │   │   │   ├── NavLink.tsx
    │   │   │   └── NavLinkNative.tsx
    │   │   ├── NavPanel
    │   │   │   ├── NavPanel.md
    │   │   │   ├── NavPanel.module.scss
    │   │   │   ├── NavPanel.spec.ts
    │   │   │   ├── NavPanel.tsx
    │   │   │   └── NavPanelNative.tsx
    │   │   ├── NestedApp
    │   │   │   ├── AppWithCodeView.module.scss
    │   │   │   ├── AppWithCodeView.tsx
    │   │   │   ├── AppWithCodeViewNative.tsx
    │   │   │   ├── defaultProps.tsx
    │   │   │   ├── logo.svg
    │   │   │   ├── NestedApp.module.scss
    │   │   │   ├── NestedApp.tsx
    │   │   │   ├── NestedAppNative.tsx
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── utils.ts
    │   │   ├── NoResult
    │   │   │   ├── NoResult.md
    │   │   │   ├── NoResult.module.scss
    │   │   │   ├── NoResult.spec.ts
    │   │   │   ├── NoResult.tsx
    │   │   │   └── NoResultNative.tsx
    │   │   ├── NumberBox
    │   │   │   ├── numberbox-abstractions.ts
    │   │   │   ├── NumberBox.md
    │   │   │   ├── NumberBox.module.scss
    │   │   │   ├── NumberBox.spec.ts
    │   │   │   ├── NumberBox.tsx
    │   │   │   └── NumberBoxNative.tsx
    │   │   ├── Option
    │   │   │   ├── Option.md
    │   │   │   ├── Option.spec.ts
    │   │   │   ├── Option.tsx
    │   │   │   ├── OptionNative.tsx
    │   │   │   └── OptionTypeProvider.tsx
    │   │   ├── PageMetaTitle
    │   │   │   ├── PageMetaTilteNative.tsx
    │   │   │   ├── PageMetaTitle.md
    │   │   │   ├── PageMetaTitle.spec.ts
    │   │   │   └── PageMetaTitle.tsx
    │   │   ├── Pages
    │   │   │   ├── Page.md
    │   │   │   ├── Pages.md
    │   │   │   ├── Pages.module.scss
    │   │   │   ├── Pages.tsx
    │   │   │   └── PagesNative.tsx
    │   │   ├── Pagination
    │   │   │   ├── Pagination.md
    │   │   │   ├── Pagination.module.scss
    │   │   │   ├── Pagination.spec.ts
    │   │   │   ├── Pagination.tsx
    │   │   │   └── PaginationNative.tsx
    │   │   ├── PositionedContainer
    │   │   │   ├── PositionedContainer.module.scss
    │   │   │   ├── PositionedContainer.tsx
    │   │   │   └── PositionedContainerNative.tsx
    │   │   ├── ProfileMenu
    │   │   │   ├── ProfileMenu.module.scss
    │   │   │   └── ProfileMenu.tsx
    │   │   ├── ProgressBar
    │   │   │   ├── ProgressBar.md
    │   │   │   ├── ProgressBar.module.scss
    │   │   │   ├── ProgressBar.spec.ts
    │   │   │   ├── ProgressBar.tsx
    │   │   │   └── ProgressBarNative.tsx
    │   │   ├── Queue
    │   │   │   ├── Queue.md
    │   │   │   ├── Queue.spec.ts
    │   │   │   ├── Queue.tsx
    │   │   │   ├── queueActions.ts
    │   │   │   └── QueueNative.tsx
    │   │   ├── RadioGroup
    │   │   │   ├── RadioGroup.md
    │   │   │   ├── RadioGroup.module.scss
    │   │   │   ├── RadioGroup.spec.ts
    │   │   │   ├── RadioGroup.tsx
    │   │   │   ├── RadioGroupNative.tsx
    │   │   │   ├── RadioItem.tsx
    │   │   │   └── RadioItemNative.tsx
    │   │   ├── RealTimeAdapter
    │   │   │   ├── RealTimeAdapter.tsx
    │   │   │   └── RealTimeAdapterNative.tsx
    │   │   ├── Redirect
    │   │   │   ├── Redirect.md
    │   │   │   ├── Redirect.spec.ts
    │   │   │   └── Redirect.tsx
    │   │   ├── ResponsiveBar
    │   │   │   ├── README.md
    │   │   │   ├── ResponsiveBar.md
    │   │   │   ├── ResponsiveBar.module.scss
    │   │   │   ├── ResponsiveBar.spec.ts
    │   │   │   ├── ResponsiveBar.tsx
    │   │   │   └── ResponsiveBarNative.tsx
    │   │   ├── Select
    │   │   │   ├── HiddenOption.tsx
    │   │   │   ├── OptionContext.ts
    │   │   │   ├── Select.md
    │   │   │   ├── Select.module.scss
    │   │   │   ├── Select.spec.ts
    │   │   │   ├── Select.tsx
    │   │   │   ├── SelectContext.tsx
    │   │   │   └── SelectNative.tsx
    │   │   ├── SelectionStore
    │   │   │   ├── SelectionStore.md
    │   │   │   ├── SelectionStore.tsx
    │   │   │   └── SelectionStoreNative.tsx
    │   │   ├── Slider
    │   │   │   ├── Slider.md
    │   │   │   ├── Slider.module.scss
    │   │   │   ├── Slider.spec.ts
    │   │   │   ├── Slider.tsx
    │   │   │   └── SliderNative.tsx
    │   │   ├── Slot
    │   │   │   ├── Slot.md
    │   │   │   ├── Slot.spec.ts
    │   │   │   └── Slot.ts
    │   │   ├── SlotItem.tsx
    │   │   ├── SpaceFiller
    │   │   │   ├── SpaceFiller.md
    │   │   │   ├── SpaceFiller.module.scss
    │   │   │   ├── SpaceFiller.spec.ts
    │   │   │   ├── SpaceFiller.tsx
    │   │   │   └── SpaceFillerNative.tsx
    │   │   ├── Spinner
    │   │   │   ├── Spinner.md
    │   │   │   ├── Spinner.module.scss
    │   │   │   ├── Spinner.spec.ts
    │   │   │   ├── Spinner.tsx
    │   │   │   └── SpinnerNative.tsx
    │   │   ├── Splitter
    │   │   │   ├── HSplitter.md
    │   │   │   ├── HSplitter.spec.ts
    │   │   │   ├── Splitter.md
    │   │   │   ├── Splitter.module.scss
    │   │   │   ├── Splitter.spec.ts
    │   │   │   ├── Splitter.tsx
    │   │   │   ├── SplitterNative.tsx
    │   │   │   ├── utils.ts
    │   │   │   ├── VSplitter.md
    │   │   │   └── VSplitter.spec.ts
    │   │   ├── Stack
    │   │   │   ├── CHStack.md
    │   │   │   ├── CHStack.spec.ts
    │   │   │   ├── CVStack.md
    │   │   │   ├── CVStack.spec.ts
    │   │   │   ├── HStack.md
    │   │   │   ├── HStack.spec.ts
    │   │   │   ├── Stack.md
    │   │   │   ├── Stack.module.scss
    │   │   │   ├── Stack.spec.ts
    │   │   │   ├── Stack.tsx
    │   │   │   ├── StackNative.tsx
    │   │   │   ├── VStack.md
    │   │   │   └── VStack.spec.ts
    │   │   ├── StickyBox
    │   │   │   ├── StickyBox.md
    │   │   │   ├── StickyBox.module.scss
    │   │   │   ├── StickyBox.tsx
    │   │   │   └── StickyBoxNative.tsx
    │   │   ├── Switch
    │   │   │   ├── Switch.md
    │   │   │   ├── Switch.spec.ts
    │   │   │   └── Switch.tsx
    │   │   ├── Table
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── react-table-config.d.ts
    │   │   │   ├── Table.md
    │   │   │   ├── Table.module.scss
    │   │   │   ├── Table.spec.ts
    │   │   │   ├── Table.tsx
    │   │   │   ├── TableNative.tsx
    │   │   │   └── useRowSelection.tsx
    │   │   ├── TableOfContents
    │   │   │   ├── TableOfContents.module.scss
    │   │   │   ├── TableOfContents.spec.ts
    │   │   │   ├── TableOfContents.tsx
    │   │   │   └── TableOfContentsNative.tsx
    │   │   ├── Tabs
    │   │   │   ├── TabContext.tsx
    │   │   │   ├── TabItem.md
    │   │   │   ├── TabItem.tsx
    │   │   │   ├── TabItemNative.tsx
    │   │   │   ├── Tabs.md
    │   │   │   ├── Tabs.module.scss
    │   │   │   ├── Tabs.spec.ts
    │   │   │   ├── Tabs.tsx
    │   │   │   └── TabsNative.tsx
    │   │   ├── Text
    │   │   │   ├── Text.md
    │   │   │   ├── Text.module.scss
    │   │   │   ├── Text.spec.ts
    │   │   │   ├── Text.tsx
    │   │   │   └── TextNative.tsx
    │   │   ├── TextArea
    │   │   │   ├── TextArea.md
    │   │   │   ├── TextArea.module.scss
    │   │   │   ├── TextArea.spec.ts
    │   │   │   ├── TextArea.tsx
    │   │   │   ├── TextAreaNative.tsx
    │   │   │   ├── TextAreaResizable.tsx
    │   │   │   └── useComposedRef.ts
    │   │   ├── TextBox
    │   │   │   ├── TextBox.md
    │   │   │   ├── TextBox.module.scss
    │   │   │   ├── TextBox.spec.ts
    │   │   │   ├── TextBox.tsx
    │   │   │   └── TextBoxNative.tsx
    │   │   ├── Theme
    │   │   │   ├── NotificationToast.tsx
    │   │   │   ├── Theme.md
    │   │   │   ├── Theme.module.scss
    │   │   │   ├── Theme.spec.ts
    │   │   │   ├── Theme.tsx
    │   │   │   └── ThemeNative.tsx
    │   │   ├── TimeInput
    │   │   │   ├── TimeInput.md
    │   │   │   ├── TimeInput.module.scss
    │   │   │   ├── TimeInput.spec.ts
    │   │   │   ├── TimeInput.tsx
    │   │   │   ├── TimeInputNative.tsx
    │   │   │   └── utils.ts
    │   │   ├── Timer
    │   │   │   ├── Timer.md
    │   │   │   ├── Timer.spec.ts
    │   │   │   ├── Timer.tsx
    │   │   │   └── TimerNative.tsx
    │   │   ├── Toggle
    │   │   │   ├── Toggle.module.scss
    │   │   │   └── Toggle.tsx
    │   │   ├── ToneChangerButton
    │   │   │   ├── ToneChangerButton.md
    │   │   │   ├── ToneChangerButton.spec.ts
    │   │   │   └── ToneChangerButton.tsx
    │   │   ├── ToneSwitch
    │   │   │   ├── ToneSwitch.md
    │   │   │   ├── ToneSwitch.module.scss
    │   │   │   ├── ToneSwitch.spec.ts
    │   │   │   ├── ToneSwitch.tsx
    │   │   │   └── ToneSwitchNative.tsx
    │   │   ├── Tooltip
    │   │   │   ├── Tooltip.md
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.spec.ts
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── TooltipNative.tsx
    │   │   ├── Tree
    │   │   │   ├── testData.ts
    │   │   │   ├── Tree-dynamic.spec.ts
    │   │   │   ├── Tree-icons.spec.ts
    │   │   │   ├── Tree.md
    │   │   │   ├── Tree.spec.ts
    │   │   │   ├── TreeComponent.module.scss
    │   │   │   ├── TreeComponent.tsx
    │   │   │   └── TreeNative.tsx
    │   │   ├── TreeDisplay
    │   │   │   ├── TreeDisplay.md
    │   │   │   ├── TreeDisplay.module.scss
    │   │   │   ├── TreeDisplay.tsx
    │   │   │   └── TreeDisplayNative.tsx
    │   │   ├── ValidationSummary
    │   │   │   ├── ValidationSummary.module.scss
    │   │   │   └── ValidationSummary.tsx
    │   │   └── VisuallyHidden.tsx
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   ├── ComponentRenderer.ts
    │   │   │   ├── LoaderRenderer.ts
    │   │   │   ├── standalone.ts
    │   │   │   └── treeAbstractions.ts
    │   │   ├── action
    │   │   │   ├── actions.ts
    │   │   │   ├── APICall.tsx
    │   │   │   ├── FileDownloadAction.tsx
    │   │   │   ├── FileUploadAction.tsx
    │   │   │   ├── NavigateAction.tsx
    │   │   │   └── TimedAction.tsx
    │   │   ├── ApiBoundComponent.tsx
    │   │   ├── appContext
    │   │   │   ├── date-functions.ts
    │   │   │   ├── math-function.ts
    │   │   │   └── misc-utils.ts
    │   │   ├── AppContext.tsx
    │   │   ├── behaviors
    │   │   │   ├── Behavior.tsx
    │   │   │   └── CoreBehaviors.tsx
    │   │   ├── component-hooks.ts
    │   │   ├── ComponentDecorator.tsx
    │   │   ├── ComponentViewer.tsx
    │   │   ├── CompoundComponent.tsx
    │   │   ├── constants.ts
    │   │   ├── DebugViewProvider.tsx
    │   │   ├── descriptorHelper.ts
    │   │   ├── devtools
    │   │   │   ├── InspectorDialog.module.scss
    │   │   │   ├── InspectorDialog.tsx
    │   │   │   └── InspectorDialogVisibilityContext.tsx
    │   │   ├── EngineError.ts
    │   │   ├── event-handlers.ts
    │   │   ├── InspectorButton.module.scss
    │   │   ├── InspectorContext.tsx
    │   │   ├── interception
    │   │   │   ├── abstractions.ts
    │   │   │   ├── ApiInterceptor.ts
    │   │   │   ├── ApiInterceptorProvider.tsx
    │   │   │   ├── apiInterceptorWorker.ts
    │   │   │   ├── Backend.ts
    │   │   │   ├── Errors.ts
    │   │   │   ├── IndexedDb.ts
    │   │   │   ├── initMock.ts
    │   │   │   ├── InMemoryDb.ts
    │   │   │   ├── ReadonlyCollection.ts
    │   │   │   └── useApiInterceptorContext.tsx
    │   │   ├── loader
    │   │   │   ├── ApiLoader.tsx
    │   │   │   ├── DataLoader.tsx
    │   │   │   ├── ExternalDataLoader.tsx
    │   │   │   ├── Loader.tsx
    │   │   │   ├── MockLoaderRenderer.tsx
    │   │   │   └── PageableLoader.tsx
    │   │   ├── LoaderComponent.tsx
    │   │   ├── markup-check.ts
    │   │   ├── parts.ts
    │   │   ├── renderers.ts
    │   │   ├── rendering
    │   │   │   ├── AppContent.tsx
    │   │   │   ├── AppRoot.tsx
    │   │   │   ├── AppWrapper.tsx
    │   │   │   ├── buildProxy.ts
    │   │   │   ├── collectFnVarDeps.ts
    │   │   │   ├── ComponentAdapter.tsx
    │   │   │   ├── ComponentWrapper.tsx
    │   │   │   ├── Container.tsx
    │   │   │   ├── containers.ts
    │   │   │   ├── ContainerWrapper.tsx
    │   │   │   ├── ErrorBoundary.module.scss
    │   │   │   ├── ErrorBoundary.tsx
    │   │   │   ├── InvalidComponent.module.scss
    │   │   │   ├── InvalidComponent.tsx
    │   │   │   ├── nodeUtils.ts
    │   │   │   ├── reducer.ts
    │   │   │   ├── renderChild.tsx
    │   │   │   ├── StandaloneComponent.tsx
    │   │   │   ├── StateContainer.tsx
    │   │   │   ├── UnknownComponent.module.scss
    │   │   │   ├── UnknownComponent.tsx
    │   │   │   └── valueExtractor.ts
    │   │   ├── reportEngineError.ts
    │   │   ├── RestApiProxy.ts
    │   │   ├── script-runner
    │   │   │   ├── asyncProxy.ts
    │   │   │   ├── AttributeValueParser.ts
    │   │   │   ├── bannedFunctions.ts
    │   │   │   ├── BindingTreeEvaluationContext.ts
    │   │   │   ├── eval-tree-async.ts
    │   │   │   ├── eval-tree-common.ts
    │   │   │   ├── eval-tree-sync.ts
    │   │   │   ├── ParameterParser.ts
    │   │   │   ├── process-statement-async.ts
    │   │   │   ├── process-statement-common.ts
    │   │   │   ├── process-statement-sync.ts
    │   │   │   ├── ScriptingSourceTree.ts
    │   │   │   ├── simplify-expression.ts
    │   │   │   ├── statement-queue.ts
    │   │   │   └── visitors.ts
    │   │   ├── StandaloneApp.tsx
    │   │   ├── StandaloneExtensionManager.ts
    │   │   ├── TableOfContentsContext.tsx
    │   │   ├── theming
    │   │   │   ├── _themes.scss
    │   │   │   ├── component-layout-resolver.ts
    │   │   │   ├── extendThemeUtils.ts
    │   │   │   ├── hvar.ts
    │   │   │   ├── layout-resolver.ts
    │   │   │   ├── parse-layout-props.ts
    │   │   │   ├── StyleContext.tsx
    │   │   │   ├── StyleRegistry.ts
    │   │   │   ├── ThemeContext.tsx
    │   │   │   ├── ThemeProvider.tsx
    │   │   │   ├── themes
    │   │   │   │   ├── base-utils.ts
    │   │   │   │   ├── palette.ts
    │   │   │   │   ├── root.ts
    │   │   │   │   ├── solid.ts
    │   │   │   │   ├── theme-colors.ts
    │   │   │   │   └── xmlui.ts
    │   │   │   ├── themeVars.module.scss
    │   │   │   ├── themeVars.ts
    │   │   │   ├── transformThemeVars.ts
    │   │   │   └── utils.ts
    │   │   ├── utils
    │   │   │   ├── actionUtils.ts
    │   │   │   ├── audio-utils.ts
    │   │   │   ├── base64-utils.ts
    │   │   │   ├── compound-utils.ts
    │   │   │   ├── css-utils.ts
    │   │   │   ├── DataLoaderQueryKeyGenerator.ts
    │   │   │   ├── date-utils.ts
    │   │   │   ├── extractParam.ts
    │   │   │   ├── hooks.tsx
    │   │   │   ├── LruCache.ts
    │   │   │   ├── mergeProps.ts
    │   │   │   ├── misc.ts
    │   │   │   ├── request-params.ts
    │   │   │   ├── statementUtils.ts
    │   │   │   └── treeUtils.ts
    │   │   └── xmlui-parser.ts
    │   ├── index-standalone.ts
    │   ├── index.scss
    │   ├── index.ts
    │   ├── language-server
    │   │   ├── server-common.ts
    │   │   ├── server-web-worker.ts
    │   │   ├── server.ts
    │   │   ├── services
    │   │   │   ├── common
    │   │   │   │   ├── docs-generation.ts
    │   │   │   │   ├── lsp-utils.ts
    │   │   │   │   ├── metadata-utils.ts
    │   │   │   │   └── syntax-node-utilities.ts
    │   │   │   ├── completion.ts
    │   │   │   ├── diagnostic.ts
    │   │   │   ├── format.ts
    │   │   │   └── hover.ts
    │   │   └── xmlui-metadata-generated.mjs
    │   ├── logging
    │   │   ├── LoggerContext.tsx
    │   │   ├── LoggerInitializer.tsx
    │   │   ├── LoggerService.ts
    │   │   └── xmlui.ts
    │   ├── logo.svg
    │   ├── parsers
    │   │   ├── common
    │   │   │   ├── GenericToken.ts
    │   │   │   ├── InputStream.ts
    │   │   │   └── utils.ts
    │   │   ├── scripting
    │   │   │   ├── code-behind-collect.ts
    │   │   │   ├── Lexer.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── Parser.ts
    │   │   │   ├── ParserError.ts
    │   │   │   ├── ScriptingNodeTypes.ts
    │   │   │   ├── TokenTrait.ts
    │   │   │   ├── TokenType.ts
    │   │   │   └── tree-visitor.ts
    │   │   ├── style-parser
    │   │   │   ├── errors.ts
    │   │   │   ├── source-tree.ts
    │   │   │   ├── StyleInputStream.ts
    │   │   │   ├── StyleLexer.ts
    │   │   │   ├── StyleParser.ts
    │   │   │   └── tokens.ts
    │   │   └── xmlui-parser
    │   │       ├── CharacterCodes.ts
    │   │       ├── diagnostics.ts
    │   │       ├── fileExtensions.ts
    │   │       ├── index.ts
    │   │       ├── lint.ts
    │   │       ├── parser.ts
    │   │       ├── ParserError.ts
    │   │       ├── scanner.ts
    │   │       ├── syntax-kind.ts
    │   │       ├── syntax-node.ts
    │   │       ├── transform.ts
    │   │       ├── utils.ts
    │   │       ├── xmlui-serializer.ts
    │   │       └── xmlui-tree.ts
    │   ├── react-app-env.d.ts
    │   ├── syntax
    │   │   ├── monaco
    │   │   │   ├── grammar.monacoLanguage.ts
    │   │   │   ├── index.ts
    │   │   │   ├── xmlui-dark.ts
    │   │   │   ├── xmlui-light.ts
    │   │   │   └── xmluiscript.monacoLanguage.ts
    │   │   └── textMate
    │   │       ├── index.ts
    │   │       ├── xmlui-dark.json
    │   │       ├── xmlui-light.json
    │   │       ├── xmlui.json
    │   │       └── xmlui.tmLanguage.json
    │   ├── testing
    │   │   ├── assertions.ts
    │   │   ├── component-test-helpers.ts
    │   │   ├── ComponentDrivers.ts
    │   │   ├── drivers
    │   │   │   ├── DateInputDriver.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── infrastructure
    │   │   │   ├── index.html
    │   │   │   ├── main.tsx
    │   │   │   ├── public
    │   │   │   │   ├── mockServiceWorker.js
    │   │   │   │   ├── resources
    │   │   │   │   │   ├── bell.svg
    │   │   │   │   │   ├── box.svg
    │   │   │   │   │   ├── doc.svg
    │   │   │   │   │   ├── eye.svg
    │   │   │   │   │   ├── flower-640x480.jpg
    │   │   │   │   │   ├── sun.svg
    │   │   │   │   │   ├── test-image-100x100.jpg
    │   │   │   │   │   └── txt.svg
    │   │   │   │   └── serve.json
    │   │   │   └── TestBed.tsx
    │   │   └── themed-app-test-helpers.ts
    │   └── vite-env.d.ts
    ├── tests
    │   ├── components
    │   │   ├── CodeBlock
    │   │   │   └── hightlight-code.test.ts
    │   │   ├── playground-pattern.test.ts
    │   │   └── Tree
    │   │       └── Tree-states.test.ts
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   └── treeAbstractions.test.ts
    │   │   ├── container
    │   │   │   └── buildProxy.test.ts
    │   │   ├── interception
    │   │   │   ├── orderBy.test.ts
    │   │   │   ├── ReadOnlyCollection.test.ts
    │   │   │   └── request-param-converter.test.ts
    │   │   ├── scripts-runner
    │   │   │   ├── AttributeValueParser.test.ts
    │   │   │   ├── eval-tree-arrow-async.test.ts
    │   │   │   ├── eval-tree-arrow.test.ts
    │   │   │   ├── eval-tree-func-decl-async.test.ts
    │   │   │   ├── eval-tree-func-decl.test.ts
    │   │   │   ├── eval-tree-pre-post.test.ts
    │   │   │   ├── eval-tree-regression.test.ts
    │   │   │   ├── eval-tree.test.ts
    │   │   │   ├── function-proxy.test.ts
    │   │   │   ├── parser-regression.test.ts
    │   │   │   ├── process-event.test.ts
    │   │   │   ├── process-function.test.ts
    │   │   │   ├── process-implicit-context.test.ts
    │   │   │   ├── process-statement-asgn.test.ts
    │   │   │   ├── process-statement-destruct.test.ts
    │   │   │   ├── process-statement-regs.test.ts
    │   │   │   ├── process-statement-sync.test.ts
    │   │   │   ├── process-statement.test.ts
    │   │   │   ├── process-switch-sync.test.ts
    │   │   │   ├── process-switch.test.ts
    │   │   │   ├── process-try-sync.test.ts
    │   │   │   ├── process-try.test.ts
    │   │   │   └── test-helpers.ts
    │   │   ├── test-metadata-handler.ts
    │   │   ├── theming
    │   │   │   ├── border-segments.test.ts
    │   │   │   ├── component-layout.resolver.test.ts
    │   │   │   ├── layout-property-parser.test.ts
    │   │   │   ├── layout-resolver.test.ts
    │   │   │   ├── layout-resolver2.test.ts
    │   │   │   ├── layout-vp-override.test.ts
    │   │   │   └── padding-segments.test.ts
    │   │   └── utils
    │   │       ├── date-utils.test.ts
    │   │       ├── format-human-elapsed-time.test.ts
    │   │       └── LruCache.test.ts
    │   ├── language-server
    │   │   ├── completion.test.ts
    │   │   ├── format.test.ts
    │   │   ├── hover.test.ts
    │   │   └── mockData.ts
    │   └── parsers
    │       ├── common
    │       │   └── input-stream.test.ts
    │       ├── markdown
    │       │   └── parse-binding-expression.test.ts
    │       ├── parameter-parser.test.ts
    │       ├── paremeter-parser.test.ts
    │       ├── scripting
    │       │   ├── eval-tree-arrow.test.ts
    │       │   ├── eval-tree-pre-post.test.ts
    │       │   ├── eval-tree.test.ts
    │       │   ├── function-proxy.test.ts
    │       │   ├── lexer-literals.test.ts
    │       │   ├── lexer-misc.test.ts
    │       │   ├── module-parse.test.ts
    │       │   ├── parser-arrow.test.ts
    │       │   ├── parser-assignments.test.ts
    │       │   ├── parser-binary.test.ts
    │       │   ├── parser-destructuring.test.ts
    │       │   ├── parser-errors.test.ts
    │       │   ├── parser-expressions.test.ts
    │       │   ├── parser-function.test.ts
    │       │   ├── parser-literals.test.ts
    │       │   ├── parser-primary.test.ts
    │       │   ├── parser-regex.test.ts
    │       │   ├── parser-statements.test.ts
    │       │   ├── parser-unary.test.ts
    │       │   ├── process-event.test.ts
    │       │   ├── process-implicit-context.test.ts
    │       │   ├── process-statement-asgn.test.ts
    │       │   ├── process-statement-destruct.test.ts
    │       │   ├── process-statement-regs.test.ts
    │       │   ├── process-statement-sync.test.ts
    │       │   ├── process-statement.test.ts
    │       │   ├── process-switch-sync.test.ts
    │       │   ├── process-switch.test.ts
    │       │   ├── process-try-sync.test.ts
    │       │   ├── process-try.test.ts
    │       │   ├── simplify-expression.test.ts
    │       │   ├── statement-hooks.test.ts
    │       │   └── test-helpers.ts
    │       ├── style-parser
    │       │   ├── generateHvarChain.test.ts
    │       │   ├── parseHVar.test.ts
    │       │   ├── parser.test.ts
    │       │   └── tokens.test.ts
    │       └── xmlui
    │           ├── lint.test.ts
    │           ├── parser.test.ts
    │           ├── scanner.test.ts
    │           ├── transform.attr.test.ts
    │           ├── transform.circular.test.ts
    │           ├── transform.element.test.ts
    │           ├── transform.errors.test.ts
    │           ├── transform.escape.test.ts
    │           ├── transform.regression.test.ts
    │           ├── transform.script.test.ts
    │           ├── transform.test.ts
    │           └── xmlui.ts
    ├── tests-e2e
    │   ├── api-bound-component-regression.spec.ts
    │   ├── api-call-as-extracted-component.spec.ts
    │   ├── assign-to-object-or-array-regression.spec.ts
    │   ├── binding-regression.spec.ts
    │   ├── children-as-template-context-vars.spec.ts
    │   ├── compound-component.spec.ts
    │   ├── context-vars-regression.spec.ts
    │   ├── data-bindings.spec.ts
    │   ├── datasource-and-api-usage-in-var.spec.ts
    │   ├── datasource-direct-binding.spec.ts
    │   ├── datasource-onLoaded-regression.spec.ts
    │   ├── modify-array-item-regression.spec.ts
    │   ├── namespaces.spec.ts
    │   ├── push-to-array-regression.spec.ts
    │   ├── screen-breakpoints.spec.ts
    │   ├── scripting.spec.ts
    │   ├── state-scope-in-pages.spec.ts
    │   └── state-var-scopes.spec.ts
    ├── tsconfig.bin.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/xmlui/src/components/Charts/RadarChart/RadarChartNative.tsx:
--------------------------------------------------------------------------------

```typescript
import {
  RadarChart as RRadarChart,
  Radar,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
  Tooltip,
  Legend as RLegend,
} from "recharts";

import type { ReactNode} from "react";
import { useEffect, useRef, useState, useCallback } from "react";
import { useMemo } from "react";
import ChartProvider, { useChartContextValue } from "../utils/ChartProvider";
import { TooltipContent } from "../Tooltip/TooltipContent";
import { useTheme } from "../../../components-core/theming/ThemeContext";

export type RadarChartProps = {
  data: any[];
  nameKey: string;
  dataKeys?: string[];
  className?: string;
  hideGrid?: boolean;
  hideAngleAxis?: boolean;
  hideRadiusAxis?: boolean;
  hideTooltip?: boolean;
  children?: ReactNode;
  showLegend?: boolean;
  filled?: boolean;
  strokeWidth?: number;
  fillOpacity?: number;
  tooltipRenderer?: (tooltipData: any) => ReactNode;
};

export const defaultProps: Pick<
  RadarChartProps,
  | "hideGrid"
  | "hideAngleAxis"
  | "hideRadiusAxis"
  | "hideTooltip"
  | "showLegend"
  | "filled"
  | "strokeWidth"
  | "fillOpacity"
> = {
  hideGrid: false,
  hideAngleAxis: false,
  hideRadiusAxis: false,
  hideTooltip: false,
  showLegend: false,
  filled: true,
  strokeWidth: 2,
  fillOpacity: 0.3,
};

export function RadarChart({
  data = [],
  nameKey,
  dataKeys = [],
  hideGrid = defaultProps.hideGrid,
  hideAngleAxis = defaultProps.hideAngleAxis,
  hideRadiusAxis = defaultProps.hideRadiusAxis,
  hideTooltip = defaultProps.hideTooltip,
  className,
  children,
  showLegend = defaultProps.showLegend,
  filled = defaultProps.filled,
  strokeWidth = defaultProps.strokeWidth,
  fillOpacity = defaultProps.fillOpacity,
  tooltipRenderer,
}: RadarChartProps) {
  // Validate and normalize data
  const validData = Array.isArray(data) ? data : [];
  const { getThemeVar } = useTheme();

  const colorValues = useMemo(() => {
    return [
      getThemeVar("color-primary-500"),
      getThemeVar("color-primary-300"),
      getThemeVar("color-success-500"),
      getThemeVar("color-success-300"),
      getThemeVar("color-warn-500"),
      getThemeVar("color-warn-300"),
      getThemeVar("color-danger-500"),
      getThemeVar("color-danger-300"),
      getThemeVar("color-info-500"),
      getThemeVar("color-info-300"),
      getThemeVar("color-secondary-500"),
      getThemeVar("color-secondary-300"),
    ];
  }, [getThemeVar]);

  const config = useMemo(() => {
    return Object.assign(
      {},
      ...dataKeys.map((key, index) => {
        return {
          [key]: {
            label: key,
            color: colorValues[index % colorValues.length],
          },
        };
      }),
    );
  }, [colorValues, dataKeys]);

  const chartContextValue = useChartContextValue({ dataKeys, nameKey });
  
  // Process data and create radar elements based on dataKeys
  const radarElements = useMemo(() => {
    return dataKeys.map((key, index) => {
      const color = colorValues[index % colorValues.length];
      
      return (
        <Radar
          key={key}
          name={key}
          dataKey={key}
          stroke={color}
          fill={filled ? color : "none"}
          fillOpacity={filled ? fillOpacity : 0}
          strokeWidth={strokeWidth}
        />
      );
    });
  }, [dataKeys, colorValues, filled, fillOpacity, strokeWidth]);

  // Handle responsive behavior
  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const updateSize = () => {
      if (containerRef.current) {
        const { width, height } = containerRef.current.getBoundingClientRect();
        setContainerSize({ width, height });
      }
    };

    updateSize();
    window.addEventListener('resize', updateSize);
    return () => window.removeEventListener('resize', updateSize);
  }, []);

  // Determine if we're in mini mode (very small container)
  const isMiniMode = containerSize.height < 150;

  const safeTooltipRenderer = useCallback(
    (props: any) => {
      if (!tooltipRenderer) return <TooltipContent {...props} />;

      const payloadObject: Record<string, any> = {};

      if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
        Object.assign(payloadObject, props.payload[0].payload);
      }

      // Extract tooltip data from Recharts props
      const tooltipData = {
        label: props.label,
        payload: payloadObject,
        active: props.active,
      };

      return tooltipRenderer(tooltipData);
    },
    [tooltipRenderer],
  );

  return (
    <ChartProvider value={chartContextValue}>
      <div ref={containerRef} className={className}>
        <ResponsiveContainer width="100%" height="100%">
          <RRadarChart data={validData}>
            {!hideGrid && <PolarGrid />}
            {!hideAngleAxis && (
              <PolarAngleAxis
                dataKey={nameKey}
                hide={isMiniMode}
              />
            )}
            {!hideRadiusAxis && (
              <PolarRadiusAxis
                hide={isMiniMode}
              />
            )}
            {!isMiniMode && !hideTooltip && (
              <Tooltip content={safeTooltipRenderer} />
            )}
            {showLegend && !isMiniMode && <RLegend />}
            {radarElements}
            {children}
          </RRadarChart>
        </ResponsiveContainer>
      </div>
    </ChartProvider>
  );
}

```

--------------------------------------------------------------------------------
/xmlui/tests/components-core/interception/request-param-converter.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it } from "vitest";
import { convertRequestParamPart } from "../../../src/components-core/utils/request-params"

describe("Request parameter converter", () => {
    it("string to integer #1", () => {
        // --- Arrange
        const data = {
            a: "123",
            b: true,
            c: 345
        }
        
        // --- Act
        const types = {
            a: "integer"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 123,
            b: true,
            c: 345
        })
    });
    
    it("string to integer #2", () => {
        // --- Arrange
        const data = {
            a: "123",
            b: "-444",
            c: 345
        }

        // --- Act
        const types = {
            a: "integer",
            b: "integer"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 123,
            b: -444,
            c: 345
        })
    });

    it("string to float #1", () => {
        // --- Arrange
        const data = {
            a: "123.25",
            b: true,
            c: 345
        }

        // --- Act
        const types = {
            a: "float"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 123.25,
            b: true,
            c: 345
        })
    });

    it("string to float #2", () => {
        // --- Arrange
        const data = {
            a: "123.25",
            b: "234.5",
            c: 345
        }

        // --- Act
        const types = {
            a: "float",
            b: "real"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 123.25,
            b: 234.5,
            c: 345
        })
    });

    it("string to float #3", () => {
        // --- Arrange
        const data = {
            a: "123.25",
            b: "234.5",
            c: 345
        }

        // --- Act
        const types = {
            a: "double",
            b: "real"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 123.25,
            b: 234.5,
            c: 345
        })
    });
    
    const stringToBoolCases = [
        { s: "true",  exp: true},
        { s: "yes",  exp: true},
        { s: "on",  exp: true},
        { s: "false",  exp: false},
        { s: "no",  exp: false},
        { s: "off",  exp: false},
    ]

    stringToBoolCases.forEach((tc, idx) => it(`string to bool #${idx + 1}`, () => {
        // --- Arrange
        const data = {
            a: tc.s,
            b: "234.5",
            c: 345
        }

        // --- Act
        const types = {
            a: "boolean",
            b: "real"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: tc.exp,
            b: 234.5,
            c: 345
        })
    }))

    it("number to integer #1", () => {
        // --- Arrange
        const data = {
            a: 123.25,
            b: true,
            c: 345
        }

        // --- Act
        const types = {
            a: "integer"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 123,
            b: true,
            c: 345
        })
    });

    it("number to integer #2", () => {
        // --- Arrange
        const data = {
            a: 123.25,
            b: 234,
            c: 345.5
        }

        // --- Act
        const types = {
            a: "integer",
            b: "integer",
            c: "integer"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 123,
            b: 234,
            c: 346
        })
    });

    it("number to bool", () => {
        // --- Arrange
        const data = {
            a: 123.25,
            b: true,
            c: 0
        }

        // --- Act
        const types = {
            a: "boolean",
            c: "boolean"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: true,
            b: true,
            c: false
        })
    });

    it("boolean to integer", () => {
        // --- Arrange
        const data = {
            a: true,
            b: "123",
            c: false
        }

        // --- Act
        const types = {
            a: "integer",
            c: "integer"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 1,
            b: "123",
            c: 0
        })
    });

    it("boolean to real", () => {
        // --- Arrange
        const data = {
            a: true,
            b: true,
            c: false
        }

        // --- Act
        const types = {
            a: "real",
            b: "double",
            c: "float"
        }
        const res = convertRequestParamPart(data, types)

        // --- Assert
        expect(res).deep.equal({
            a: 1,
            b: 1,
            c: 0
        })
    });


});
```

--------------------------------------------------------------------------------
/docs/public/pages/scoping.md:
--------------------------------------------------------------------------------

```markdown
# Scoping

## Variables

A variable declared in a Main.xmlui component is visible to built-in child components (e.g. `Text`) at any level.

```xmlui-pg
---app display filename="Main.xmlui" /grandparent/ /parent/ /child/
<App var.message="Hello from App">
  <Card id="grandparent">
    <Text>Message: {message}</Text>
    <Card id="parent" var.message2="Hello from Card">
      <Text>Message: {message}</Text>
      <Text>Message2: {message2}</Text>
        <Card id="child">
          <Text>Message: {message}</Text>
          <Text>Message2: {message2}</Text>
        </Card>
    </Card>
  </Card>
</App>
```

A variable declared in a Main.xmlui component is not automatically visible to a user-defined child component.

```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
  <Card>
    <Text>Message: {message}</Text>
  </Card>
  <MyCard />
</App>
---comp display filename="MyCard"
<Component name="MyCard">
  <Card>
    <Text>Message: {message}</Text>
  </Card>
</Component>
```

The variable can be passed into a user-defined component.

```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
  <Card>
    <Text>Message: {message}</Text>
  </Card>
  <MyCard message="{message}" />
</App>
---comp display filename="MyCard"
<Component name="MyCard">
  <Card>
    <Text>Message: {$props.message}</Text>
  </Card>
</Component>
```


Or the variable can be transposed into the user-defined component by means of the [Slot](/components/Slot) mechanism. The `Slot` content evaluates in the parent's scope, so it can see parent vars and IDs, but renders inside the child’s layout.

```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
  <Card>
    <Text>Message: {message}</Text>
  </Card>
  <MyCard>
    <Text>Message: {message}</Text>
  </MyCard>
</App>
---comp display filename="MyCard.xmlui"
<Component name="MyCard">
  <Card>
    <Slot/>
  </Card>
</Component>
```

A child component can redeclare a variable.

```xmlui-pg
---app display filename="Main.xmlui" /grandparent/ /parent/ /child/
<App var.message="Hello from App">
  <Card id="grandparent">
    <Text>Message: {message}</Text>
    <Card id="parent" var.message="Hello from parent Card">
      <Text>Message: {message}</Text>
        <Card id="child" var.message="Hello from child Card">
          <Text>Message: {message}</Text>
        </Card>
    </Card>
  </Card>
</App>
```


All these rules apply within a user-defined component defined in a file like `MyComponent.xmlui`.

```xmlui-pg
---app display filename="Main.xmlui"
<App>
  <MyComponent />
</App>
---comp display filename="MyComponent.xmlui"
<Component name="MyComponent" var.message="Hello from MyComponent">
  <Card id="grandparent">
    <Text>Message: {message}</Text>
    <Card id="parent" var.message2="Hello from Card">
      <Text>Message: {message}</Text>
      <Text>Message2: {message2}</Text>
        <Card id="child">
          <Text>Message: {message}</Text>
          <Text>Message2: {message2}</Text>
        </Card>
    </Card>
  </Card>
</Component>
```

A variable declared in a user-defined component can be passed into another user-defined component.


```xmlui-pg
---app display filename="Main.xmlui"
<App>
  <MyComponent />
</App>
---comp display filename="MyComponent.xmlui"
<Component name="MyComponent" var.message="Hello from MyComponent">
  <Card>
    <Text>Message: {message}</Text>
  </Card>
  <MyOtherComponent message="{message}" />
</Component>
---comp display filename="MyOtherComponent.xmlui"
<Component name="MyOtherComponent">
  <Card>
    <Text>Passed message: {$props.message}</Text>
  </Card>
</Component>
```




## Component IDs

A component ID declared on a Main.xmlui component is visible to built-in child components (e.g. `Text`) at any level.

```xmlui-pg
---app display filename="Main.xmlui" /parent/ /child/ /textBox/
<App var.message="Hello from App">
  <TextBox id="textBox" initialValue="{message}" />
  <Card id="parent">
    <Text>
      { textBox.value }
    </Text>
    <Card id="child">
      <Text>
        { textBox.value }
      </Text>
    </Card>
  </Card>
</App>
```

A component ID declared on a Main.xmlui component is not automatically visible to a user-defined child component.


```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
  <TextBox id="textBox" initialValue="{message}" />
  <MyCard />
</App>
---comp display filename="MyCard.xmlui"
<Component name="MyCard">
  <Card>
    <Text>Message: {textBox.value}</Text>
  </Card>
</Component>
```

The id can be passed into a user-defined component.

```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
  <TextBox id="textBox" initialValue="{message}" />
  <MyCard textBox="{textBox}" />
</App>
---comp display filename="MyCard.xmlui"
<Component name="MyCard">
  <Card>
    <Text>Message: {$props.textBox.value}</Text>
  </Card>
</Component>
```

Or the component ID can be transposed into the user-defined component by means of the [Slot](/components/Slot) mechanism.

```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
  <TextBox id="textBox" initialValue="{message}" />
  <MyCard>
    <Text>Message: {textBox.value}</Text>
  </MyCard>
</App>
---comp display filename="MyCard.xmlui"
<Component name="MyCard">
  <Card>
    <Slot/>
  </Card>
</Component>
```

All these rules apply within a user-defined component defined in a file like `MyComponent.xmlui`.

```

--------------------------------------------------------------------------------
/docs/public/pages/tutorial-06.md:
--------------------------------------------------------------------------------

```markdown
# Slider

The `Dashboard` page continues with a chart of daily revenue that uses a [Slider](/components/Slider) to control both ends of a date range.

Here is a simplified version of that mechanism. Try using both slider handles to adjust the date range and corresponding total revenue.

```xmlui-pg noHeader
---app display
<App>
  <SliderDemo />
</App>
---comp
<Component name="SliderDemo">
  <variable name="startDate" value="2022-06-01" />
  <variable name="endDate" value="2022-06-30" />

  <variable name="dailyData" value="{[
    {date: '2022-06-01', total: 1200},
    {date: '2022-06-02', total: 1850},
    {date: '2022-06-03', total: 0},
    {date: '2022-06-04', total: 950},
    {date: '2022-06-05', total: 1650},
    {date: '2022-06-06', total: 2200},
    {date: '2022-06-07', total: 1400},
    {date: '2022-06-08', total: 0},
    {date: '2022-06-09', total: 1750},
    {date: '2022-06-10', total: 1300},
    {date: '2022-06-11', total: 1900},
    {date: '2022-06-12', total: 2350},
    {date: '2022-06-13', total: 0},
    {date: '2022-06-14', total: 1800},
    {date: '2022-06-15', total: 2150},
    {date: '2022-06-16', total: 1450},
    {date: '2022-06-17', total: 0},
    {date: '2022-06-18', total: 2000},
    {date: '2022-06-19', total: 1250},
    {date: '2022-06-20', total: 1950},
    {date: '2022-06-21', total: 0},
    {date: '2022-06-22', total: 1600},
    {date: '2022-06-23', total: 1850},
    {date: '2022-06-24', total: 2250},
    {date: '2022-06-25', total: 0},
    {date: '2022-06-26', total: 1750},
    {date: '2022-06-27', total: 2050},
    {date: '2022-06-28', total: 1500},
    {date: '2022-06-29', total: 0},
    {date: '2022-06-30', total: 2200}
  ]}" />

  <variable name="filteredData" value="{
    dailyData.filter(item => item.date >= startDate && item.date <= endDate)
  }" />

  <VStack>
    <H1>Slider Demo</H1>

    <Text>Selected records: {filteredData.length}</Text>

    <Slider
      id="dateSlider"
      label="Date range"
      minValue="{1}"
      maxValue="{30}"
      initialValue="{[1, 30]}"
      step="{1}"
      onDidChange="{
        startDate = window.sliderValueToDate(dateSlider.value[0]);
        endDate = window.sliderValueToDate(dateSlider.value[1]);
      }"
      valueFormat="{ (value) => {
        const result = window.sliderValueToDate(value);
        return result;
        }
      }"
    />

    <Text>Total Revenue: ${filteredData.reduce((sum, item) => sum + item.total, 0)}</Text>

  </VStack>
</Component>
```

Here's `SliderDemo`.

```xmlui /filteredData/ /startDate/ /endDate/ /sliderValueToDate/
<Component name="SliderDemo">
  <variable name="startDate" value="2022-06-01" />
  <variable name="endDate" value="2022-06-30" />

  <variable name="dailyData" value="{[
    {date: '2022-06-01', total: 1200},
    {date: '2022-06-02', total: 1850},
    ...
    {date: '2022-06-29', total: 0},
    {date: '2022-06-30', total: 2200}
  ]}" />

  <variable name="filteredData" value="{
    dailyData.filter(item => item.date >= startDate && item.date <= endDate)
  }" />

  <VStack>
    <H1>Slider Demo</H1>

    <Text>Selected records: {filteredData.length}</Text>

    <Slider
      id="dateSlider"
      label="Date range"
      minValue="{1}"
      maxValue="{30}"
      initialValue="{[1, 30]}"
      step="{1}"
      onDidChange="{
        startDate = window.sliderValueToDate(dateSlider.value[0]);
        endDate = window.sliderValueToDate(dateSlider.value[1]);
      }"
      valueFormat="{ (value) => {
        const result = window.sliderValueToDate(value);
        return result;
        }
      }"
    />

    <Text>
      Total Revenue: ${filteredData.reduce((sum, item) => sum + item.total, 0)}
    </Text>

  </VStack>
</Component>
```

When the handles move, the slider's `onDidChange` event updates `startDate` and `endDate` using a function, `sliderValueToDate`, that translates the slider position to a date in the range of dates. In the Invoices app those variables form part of a `DataSource` URL that fires when there's a change; here they update the `filteredData` variable to simulate the real `DataSource`.

The slider's `valueFormat` property uses the same function to report the new `startDate` and `endDate`.

## A custom Slider

The Invoices app encapsulates this behavior in a custom component called `DateRangeSlider`.

```xmlui /updateState/
<Component name="DateRangeSlider">
  <variable name="originalStartDate" value="{ $props.minDate }"/>
  <variable name="maxEndDate" value="{ $props.maxDate }"/>
  <variable name="startDate" value="{ originalStartDate }"/>
  <variable name="endDate" value="{ maxEndDate }"/>
  <variable
    name="totalDays"
    value="{ window.daysBetween(originalStartDate, maxEndDate)}"/>

  <ChangeListener
    listenTo="{slider.value}"
    onDidChange="{() => {
      // Update the start and end dates based on slider values
      updateState({
        value: {
          startDate: window.sliderValueToDate(slider.value[0], originalStartDate),
          endDate: window.sliderValueToDate(slider.value[1], originalStartDate)
        }
      });
    }}"
  />

  <Slider
    id="slider"
    label="dateRange"
    minValue="{0}"
    maxValue="{ totalDays }"
    initialValue="{ [0, totalDays] }"
    step="10"
    valueFormat="{ (value) => {
      const date = window.sliderValueToDate(value, originalStartDate);
      return date;
    }}"
  />
</Component>
```

The `updateState` method, available in all components, is a merge operation that can set multiple variables.

```

--------------------------------------------------------------------------------
/xmlui/src/components/Tabs/Tabs.module.scss:
--------------------------------------------------------------------------------

```scss
@use "../../components-core/theming/themes" as t;

// --- This code snippet is required to collect the theme variables used in this module
$component: "Tabs";
$themeVars: ();
@function createThemeVar($componentVariable) {
  $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  @return t.getThemeVar($themeVars, $componentVariable);
}

$themeVars: t.composePaddingVars($themeVars, "trigger-Tabs");

$backgroundColor-Tabs: createThemeVar("backgroundColor-Tabs");
$borderColor-Tabs: createThemeVar("borderColor-Tabs");
$borderWidth-Tabs: createThemeVar("borderWidth-Tabs");
$borderColor-active-Tabs: createThemeVar("borderColor-active-Tabs");
$backgroundColor-trigger-Tabs: createThemeVar("backgroundColor-trigger-Tabs");
$borderRadius-trigger-Tabs: createThemeVar("borderRadius-trigger-Tabs");
$border-trigger-Tabs: createThemeVar("border-trigger-Tabs");
$textColor-trigger-Tabs: createThemeVar("textColor-trigger-Tabs");
$backgroundColor-trigger-Tabs--hover: createThemeVar("backgroundColor-trigger-Tabs--hover");
$backgroundColor-trigger-Tabs--active: createThemeVar("backgroundColor-trigger-Tabs--active");
$backgroundColor-list-Tabs: createThemeVar("backgroundColor-list-Tabs");
$borderRadius-list-Tabs: createThemeVar("borderRadius-list-Tabs");
$border-list-Tabs: createThemeVar("border-list-Tabs");

@layer components {
  .tabs {
    display: flex;
    width: 100%;
    background-color: $backgroundColor-Tabs;
    overflow: hidden;
    &[data-orientation="vertical"] {
      flex-direction: row;
    }

    &[data-orientation="horizontal"] {
      flex-direction: column;
    }
  }

  .filler {
    flex: 1 1 auto;

    &[data-orientation="vertical"] {
      border-right-width: $borderWidth-Tabs;
      border-right-style: solid;
      border-right-color: $borderColor-Tabs;
    }

    &[data-orientation="horizontal"] {
      border-bottom-width: $borderWidth-Tabs;
      border-bottom-style: solid;
      border-bottom-color: $borderColor-Tabs;
    }
  }

  .tabTrigger {
    @include t.paddingVars($themeVars, "trigger-Tabs");
    &.distributeEvenly {
      flex: 1 1 auto;
    }

    color: $textColor-trigger-Tabs;
    background-color: $backgroundColor-trigger-Tabs;
    border-radius: $borderRadius-trigger-Tabs;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: t.$fontSize-base;
    line-height: 1;
    user-select: none;
    //border-color: transparent;
    border: $border-trigger-Tabs;

    &:hover {
      background-color: $backgroundColor-trigger-Tabs--hover;
    }

    &[data-orientation="vertical"] {
      border-right-width: $borderWidth-Tabs;
      border-right-style: solid;
      border-right-color: $borderColor-Tabs;

      &[data-state="active"] {
        border-right-width: $borderWidth-Tabs;
        border-right-style: solid;
        border-right-color: $borderColor-active-Tabs;
        background-color: $backgroundColor-trigger-Tabs--active;
      }
    }

    &[data-orientation="horizontal"] {
      border-bottom-width: $borderWidth-Tabs;
      border-bottom-style: solid;
      border-bottom-color: $borderColor-Tabs;

      &[data-state="active"] {
        border-bottom-width: $borderWidth-Tabs;
        border-bottom-style: solid;
        border-bottom-color: $borderColor-active-Tabs;
        background-color: $backgroundColor-trigger-Tabs--active;
      }
    }

    &:hover {
      cursor: pointer;
    }
  }

  .tabsList {
    background-color: $backgroundColor-list-Tabs;
    border-radius: $borderRadius-list-Tabs;
    border: $border-list-Tabs;
    position: relative;
    z-index: 99;
    overflow: hidden;
    display: flex;
    flex-shrink: 0;
    scrollbar-width: thin;

    &[data-orientation="vertical"] {
      flex-direction: column;
    }

    &[data-orientation="horizontal"] {
      flex-direction: row;
    }

    &.alignStart {
      justify-content: flex-start;
    }

    &.alignEnd {
      justify-content: flex-end;
    }

    &.alignCenter {
      justify-content: center;
    }

    &.alignStretch {
      justify-content: stretch;
    }
  }

  .tabsList:hover {
    overflow: auto;
  }

  .tabsContent {
    flex-grow: 1;
    outline: none;
  }

  // Accordion view styles
  .accordionView {
    width: 100%;
  }

  .accordionRoot {
    display: flex;
    flex-direction: column !important;
    width: 100%;
  }

  .accordionInterleaved {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .accordionList {
    display: contents; // Makes children act as direct children of parent
    background-color: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  .accordionItem {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .accordionTrigger {
    width: 100%;
    justify-content: flex-start;
    border-bottom-width: $borderWidth-Tabs;
    border-bottom-style: solid;
    border-bottom-color: $borderColor-Tabs;
    border-right: none !important;

    &[data-state="active"] {
      border-bottom-width: $borderWidth-Tabs;
      border-bottom-style: solid;
      border-bottom-color: $borderColor-active-Tabs;
      background-color: $backgroundColor-trigger-Tabs--active;
      border-right: none !important;
    }
  }

  // Style for accordion content to appear inline with headers
  .accordionInterleaved .tabsContent {
    width: 100%;
    order: inherit;
  }
}

// --- We export the theme variables to add them to the component renderer
:export {
  themeVars: t.json-stringify($themeVars);
}

```

--------------------------------------------------------------------------------
/docs/content/components/FlowLayout.md:
--------------------------------------------------------------------------------

```markdown
# FlowLayout [#flowlayout]

`FlowLayout` positions content in rows with automatic wrapping. When items exceed the available horizontal space, they automatically wrap to a new line.

For details on how to work with \`FlowLayout\` (like sizing children), see [this guide](/layout#flowlayout).

## Using `SpaceFiller` with `FlowLayout` [#using-spacefiller-with-flowlayout]

The `SpaceFiller` component can be used as a line break.
See the [reference docs](/components/SpaceFiller) for details.

## Properties [#properties]

### `columnGap` (default: "$gap-normal") [#columngap-default-gap-normal]

The `columnGap` property specifies the space between items in a single row; it overrides the `gap` value.

The `columnGap` property specifies the space between items in a single row; it overrides the `gap` value.

```xmlui-pg copy display name="Example: columnGap"
---app copy display
<App>
  <FlowLayout columnGap="$space-8">
  <Stack width="25%" height="32px" backgroundColor="red" />
  <Stack width="25%" height="32px" backgroundColor="blue" />
  <Stack width="25%" height="32px" backgroundColor="green" />
  <Stack width="25%" height="32px" backgroundColor="yellow" />
  <Stack width="25%" height="32px" backgroundColor="maroon" />
  <Stack width="25%" height="32px" backgroundColor="teal" />
  <Stack width="25%" height="32px" backgroundColor="seagreen" />
  <Stack width="25%" height="32px" backgroundColor="olive" />
  </FlowLayout>
</App>
---desc
You can observe no gap between the rows of the `FlowLayout`, as `columnGap` keeps the space between rows intact:
```

### `gap` (default: "$gap-normal") [#gap-default-gap-normal]

This property defines the gap between items in the same row and between rows. The FlowLayout component creates a new row when an item is about to overflow the current row.

The `gap` property defines the gap between items in the same row and between rows. The `FlowLayout` component creates a new row when an item is about to overflow the current row.

```xmlui-pg copy display name="Example: gap"
---app copy display
<App>
  <FlowLayout gap="$space-12">
    <Stack width="25%" height="32px" backgroundColor="red" />
    <Stack width="25%" height="32px" backgroundColor="blue" />
    <Stack width="25%" height="32px" backgroundColor="green" />
    <Stack width="25%" height="32px" backgroundColor="yellow" />
    <Stack width="25%" height="32px" backgroundColor="maroon" />
    <Stack width="25%" height="32px" backgroundColor="teal" />
    <Stack width="25%" height="32px" backgroundColor="seagreen" />
    <Stack width="25%" height="32px" backgroundColor="olive" />
  </FlowLayout>
</App>
---desc
In this markup, only four items fit in a single row. 
The `gap` property sets the same gaps within and between rows.
```

This markup demonstrates different `gap` values:

```xmlui-pg copy display name="Example: different size units"
---app copy display
<App>
  <FlowLayout>
    <Stack width="25%" height="32px" backgroundColor="red" />
    <Stack width="25%" height="32px" backgroundColor="blue" />
    <Stack width="25%" height="32px" backgroundColor="green" />
    <Stack width="25%" height="32px" backgroundColor="yellow" />
  </FlowLayout>
  <FlowLayout gap="10px">
    <Stack width="25%" height="32px" backgroundColor="red" />
    <Stack width="25%" height="32px" backgroundColor="blue" />
    <Stack width="25%" height="32px" backgroundColor="green" />
    <Stack width="25%" height="32px" backgroundColor="yellow" />
  </FlowLayout>
  <FlowLayout gap="1rem">
    <Stack width="25%" height="32px" backgroundColor="red" />
    <Stack width="25%" height="32px" backgroundColor="blue" />
    <Stack width="25%" height="32px" backgroundColor="green" />
    <Stack width="25%" height="32px" backgroundColor="yellow" />
  </FlowLayout>
  <FlowLayout gap="4ch">
    <Stack width="25%" height="32px" backgroundColor="red" />
    <Stack width="25%" height="32px" backgroundColor="blue" />
    <Stack width="25%" height="32px" backgroundColor="green" />
    <Stack width="25%" height="32px" backgroundColor="yellow" />
  </FlowLayout>
</App>
---desc
All items within a `FlowLayout` instance fit in a single row, so `gap` affects only the space between items. The space between rows comes from the outermost `Stack`.
```

### `rowGap` (default: "$gap-normal") [#rowgap-default-gap-normal]

The `rowGap` property specifies the space between the FlowLayout rows; it overrides the `gap` value.

The `rowGap` property specifies the space between the `FlowLayout` rows; it overrides the `gap` value.

```xmlui-pg copy display name="Example: rowGap"
---app copy display
<App>
  <FlowLayout rowGap="2px">
    <Stack width="25%" height="32px" backgroundColor="red" />
    <Stack width="25%" height="32px" backgroundColor="blue" />
    <Stack width="25%" height="32px" backgroundColor="green" />
    <Stack width="25%" height="32px" backgroundColor="yellow" />
    <Stack width="25%" height="32px" backgroundColor="maroon" />
    <Stack width="25%" height="32px" backgroundColor="teal" />
    <Stack width="25%" height="32px" backgroundColor="seagreen" />
    <Stack width="25%" height="32px" backgroundColor="olive" />
  </FlowLayout>
</App>
---desc
You can observe no gap between the items in a single row of the `FlowLayout`, as `rowGap` keeps the gap within a row intact:
```

## Events [#events]

This component does not have any events.

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

This component does not have any styles.

```

--------------------------------------------------------------------------------
/docs/content/components/MenuItem.md:
--------------------------------------------------------------------------------

```markdown
# MenuItem [#menuitem]

`MenuItem` represents individual clickable items within dropdown menus and other menu components. Each menu item can display text, icons, and respond to clicks with either navigation or custom actions, making it the building block for interactive menu systems.

**Key features:**
- **Action handling**: Support both navigation (`to` property) and custom click handlers
- **Visual feedback**: Built-in active, hover, and disabled states for clear user interaction
- **Icon support**: Optional icons with flexible positioning (start or end)
- **Menu integration**: Designed to work seamlessly within `DropdownMenu` and `SubMenuItem` hierarchies

**Usage pattern:**
Always used within menu containers like `DropdownMenu`. Use `to` for navigation or `onClick` for custom actions. For complex menu structures, combine with `MenuSeparator` and `SubMenuItem` components.

## Properties [#properties]

### `active` (default: false) [#active-default-false]

This property indicates if the specified menu item is active.

```xmlui-pg copy display name="Example: active" height="200px"
<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive" active="true">Item 1</MenuItem>
    <MenuItem icon="trash">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>
```

### `enabled` (default: true) [#enabled-default-true]

This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).

### `icon` [#icon]

This property names an optional icon to display with the menu item. You can use component-specific icons in the format "iconName:MenuItem".

```xmlui-pg copy display name="Example: icon" height="200px"
<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive">Item 1</MenuItem>
    <MenuItem icon="trash">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>
```

### `iconPosition` (default: "start") [#iconposition-default-start]

This property allows you to determine the position of the icon displayed in the menu item.

Available values:

| Value | Description |
| --- | --- |
| `start` | The icon will appear at the start (left side when the left-to-right direction is set) **(default)** |
| `end` | The icon will appear at the end (right side when the left-to-right direction is set) |

```xmlui-pg copy display name="Example: iconPosition" height="200px"
<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive" iconPosition="start">Item 1</MenuItem>
    <MenuItem icon="trash" iconPosition="end">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>
```

### `label` [#label]

This property sets the label of the component.  If not set, the component will not display a label.

### `to` [#to]

This property defines the URL of the menu item. If this property is defined (and the `click` event does not have an event handler), clicking the menu item navigates to this link.

## Events [#events]

### `click` [#click]

This event is triggered when the MenuItem is clicked.

This event is fired when the user clicks the menu item. With an event handler, you can define how to respond to the user's click. If this event does not have an associated event handler but the `to` property has a value, clicking the component navigates the URL set in `to`.

If both properties are defined, `click` takes precedence.

```xmlui-pg copy display name="Example: click" height="200px"
<DropdownMenu label="DropdownMenu">
  <MenuItem onClick="toast('Item 1 clicked')">Item 1</MenuItem>
  <MenuItem onClick="toast('Item 2 clicked')">Item 2</MenuItem>
  <MenuItem onClick="toast('Item 3 clicked')">Item 3</MenuItem>
</DropdownMenu>
```

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

### Theme Variables [#theme-variables]

| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-MenuItem | $backgroundColor-dropdown-item | $backgroundColor-dropdown-item |
| [backgroundColor](../styles-and-themes/common-units/#color)-MenuItem--active | $backgroundColor-dropdown-item--active | $backgroundColor-dropdown-item--active |
| [backgroundColor](../styles-and-themes/common-units/#color)-MenuItem--active--hover | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-MenuItem--hover | $backgroundColor-dropdown-item--hover | $backgroundColor-dropdown-item--hover |
| [color](../styles-and-themes/common-units/#color)-MenuItem | $textColor-primary | $textColor-primary |
| [color](../styles-and-themes/common-units/#color)-MenuItem--active | $color-primary | $color-primary |
| [color](../styles-and-themes/common-units/#color)-MenuItem--active--hover | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-MenuItem--disabled | $textColor--disabled | $textColor--disabled |
| [color](../styles-and-themes/common-units/#color)-MenuItem--hover | inherit | inherit |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-MenuItem | $fontFamily | $fontFamily |
| [fontSize](../styles-and-themes/common-units/#size)-MenuItem | $fontSize-sm | $fontSize-sm |
| [gap](../styles-and-themes/common-units/#size)-MenuItem | $space-2 | $space-2 |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-MenuItem | $space-3 | $space-3 |
| [paddingVertical](../styles-and-themes/common-units/#size)-MenuItem | $space-2 | $space-2 |

```

--------------------------------------------------------------------------------
/xmlui/dev-docs/next/logging-consistency-implementation-summary.md:
--------------------------------------------------------------------------------

```markdown
# Logging Consistency Implementation Summary

## Overview
Successfully implemented logging consistency across the XMLUI documentation generation scripts to provide standardized logging patterns, better debugging capabilities, and consistent message formatting.

## Changes Made

### 1. Created Standardized Logging Infrastructure

#### `logging-standards.mjs` - New Centralized Logging Module
- **Logging Patterns**: Predefined message templates for common operations
- **Standard Logger**: Wrapper functions for consistent logging calls
- **Scoped Logger**: Context-aware logging with module/operation prefixes
- **Log Levels**: Standardized severity levels (INFO, WARN, ERROR)

#### Enhanced `logger.mjs`
- Added `warn()` method as alias for `warning()` to support both naming conventions
- Maintains backward compatibility while providing flexibility

### 2. Key Features of the New Logging System

#### Predefined Message Patterns
```javascript
LOGGING_PATTERNS = {
  OPERATION_START: (operation) => `Starting ${operation}...`,
  OPERATION_COMPLETE: (operation) => `Completed ${operation}`,
  FILE_PROCESSING: (filePath) => `Processing file: ${filePath}`,
  COMPONENT_PROCESSING: (componentName) => `Processing component: ${componentName}`,
  // ... and many more standardized patterns
}
```

#### Scoped Logging
```javascript
const logger = createScopedLogger("ThemeGenerator");
logger.operationStart("theme file generation");
// Output: [ThemeGenerator] Starting theme file generation...
```

#### Consistent Method Names
- `logger.info()` - Informational messages
- `logger.warn()` - Warning messages (standardized from `warning()`)
- `logger.error()` - Error messages

### 3. Updated Scripts with Consistent Logging

#### `create-theme-files.mjs`
- **Before**: Mixed console.log and basic logger calls
- **After**:
  - Uses scoped logger: `createScopedLogger("ThemeGenerator")`
  - Standardized operation tracking: `operationStart()`, `operationComplete()`
  - Consistent component processing: `componentProcessing()`
  - Standardized file operations: `fileWritten()`

#### `get-docs.mjs`
- **Before**: Mixed logger.info/warning calls
- **After**:
  - Multiple scoped loggers for different operations
  - `createScopedLogger("DocsGenerator")` for main operations
  - `createScopedLogger("FolderCleaner")` for cleanup operations
  - `createScopedLogger("PackageLoader")` for package operations
  - Standardized package operations: `packageLoaded()`, `packageSkipped()`

#### `build-pages-map.mjs`
- **Before**: Used `logger.warning()` directly
- **After**:
  - Uses scoped logger: `createScopedLogger("PagesMapBuilder")`
  - Standardized operation tracking
  - Consistent warning messages with `warn()`

#### `build-downloads-map.mjs`
- **Before**: Used `logger.warning()` directly
- **After**:
  - Uses scoped logger: `createScopedLogger("DownloadsMapBuilder")`
  - Standardized operation tracking
  - Consistent warning messages with `warn()`

### 4. Logging Consistency Benefits

#### Standardized Message Formats
- All operation messages follow consistent patterns
- Scoped messages provide clear context about which module is logging
- Predictable message structure for easier parsing and monitoring

#### Better Debugging
- Clear operation boundaries with start/complete logging
- Context-aware messages help identify the source of issues
- Consistent formatting makes logs easier to read and filter

#### Maintainability
- Centralized logging patterns reduce code duplication
- Easy to modify message formats across all scripts
- Standard operations (file processing, component handling) use shared patterns

#### Flexibility
- Supports both `warn()` and `warning()` methods for backward compatibility
- Scoped loggers can be easily created for new modules
- Extensible pattern system for new operation types

## Before/After Examples

### Before (Inconsistent)
```javascript
console.log(`Processing component: ${key}`);
logger.info(LOG_MESSAGES.GENERATING_EXTENSION_DOCS);
logger.warning(`Duplicate entries found...`);
```

### After (Consistent)
```javascript
const logger = createScopedLogger("ThemeGenerator");
logger.componentProcessing(key);
logger.operationStart("extension documentation generation");
logger.warn(`Duplicate entries found...`);
```

## Files Modified
- ✅ `scripts/generate-docs/logging-standards.mjs` (new)
- ✅ `scripts/generate-docs/logger.mjs` (enhanced with warn() alias)
- ✅ `scripts/generate-docs/create-theme-files.mjs` (standardized)
- ✅ `scripts/generate-docs/get-docs.mjs` (standardized)
- ✅ `scripts/generate-docs/build-pages-map.mjs` (standardized)
- ✅ `scripts/generate-docs/build-downloads-map.mjs` (standardized)

## Standards Established

### 1. **Scoped Logging**: All modules use scoped loggers for context
### 2. **Operation Tracking**: Start/complete logging for major operations
### 3. **Consistent Method Names**: Standardized on `info()`, `warn()`, `error()`
### 4. **Message Patterns**: Predefined templates for common operations
### 5. **Context Awareness**: Module names in log messages for easy identification

## Next Steps
This logging standardization provides:
- A solid foundation for adding structured logging and monitoring
- Consistent patterns that can be extended to other scripts
- Better debugging capabilities for development and production
- Framework for adding log levels, filtering, and external logging systems

The logging system is now professional-grade, consistent, and maintainable across the entire documentation generation pipeline.

```

--------------------------------------------------------------------------------
/docs/scripts/generate-rss.js:
--------------------------------------------------------------------------------

```javascript
const fs = require('fs');
const path = require('path');

// Extract blog posts data from Main.xmlui's var.posts definition
function extractBlogPosts() {
  const mainXmluiPath = path.join(__dirname, '../src/Main.xmlui');
  const content = fs.readFileSync(mainXmluiPath, 'utf8');

  try {
    // Find the var.posts definition - extract content between backticks
    const postsMatch = content.match(/var\.posts\s*=\s*`\{\{([^`]*)\}\}`/s);
    if (!postsMatch) {
      console.warn('No var.posts found in Main.xmlui');
      return [];
    }

    const postsContent = postsMatch[1].trim();
    const blogPosts = [];

    // Parse each post entry (p1: {...}, p2: {...}, etc.)
    const postMatches = postsContent.match(/(\w+):\s*\{([^}]*)\}/g);
    
    if (postMatches) {
      postMatches.forEach(postMatch => {
        const [, postKey] = postMatch.match(/(\w+):/);
        
        // Extract properties from the post object
        const titleMatch = postMatch.match(/title:\s*"([^"]*)"/);
        const slugMatch = postMatch.match(/slug:\s*"([^"]*)"/);
        const authorMatch = postMatch.match(/author:\s*"([^"]*)"/);
        const dateMatch = postMatch.match(/date:\s*"([^"]*)"/);

        if (titleMatch && slugMatch && authorMatch && dateMatch) {
          blogPosts.push({
            key: postKey,
            title: titleMatch[1],
            slug: slugMatch[1],
            author: authorMatch[1],
            date: dateMatch[1]
          });
        }
      });
    }

    return blogPosts;
  } catch (error) {
    console.error('Error extracting blog posts:', error.message);
    return [];
  }
}

// Read blog post content and extract description
function getPostDescription(slug) {
  try {
    const postPath = path.join(__dirname, '../public/blog', `${slug}.md`);
    const content = fs.readFileSync(postPath, 'utf8');

    // Strip markdown formatting for description
    let plainText = content
      .replace(/^#+\s+/gm, '') // Remove headers
      .replace(/\*\*(.*?)\*\*/g, '$1') // Remove bold
      .replace(/\*(.*?)\*/g, '$1') // Remove italic
      .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1') // Remove links, keep text
      .replace(/!\[([^\]]*)\]\([^)]*\)/g, '') // Remove images
      .replace(/`([^`]*)`/g, '$1') // Remove inline code
      .replace(/```[\s\S]*?```/g, '') // Remove code blocks
      .replace(/\n+/g, ' ') // Replace newlines with spaces
      .replace(/\s+/g, ' ') // Normalize whitespace
      .trim();

    // Take first 250 characters for description
    if (plainText.length > 250) {
      return plainText.substring(0, 250).trim() + '...';
    }

    return plainText;
  } catch (error) {
    console.warn(`Warning: Could not read post content for ${slug}:`, error.message);
    return 'Blog post content not available.';
  }
}

// Convert date string to RFC 822 format for RSS
function formatDate(dateStr) {
  const date = new Date(dateStr);
  return date.toUTCString();
}

// Generate RSS XML
function generateRSS(blogPosts) {
  const now = new Date().toUTCString();

  let rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>XMLUI Blog</title>
    <link>https://docs.xmlui.org</link>
    <description>Latest updates, tutorials, and insights for XMLUI - the declarative UI framework. Stay informed about new features, best practices, and community highlights.</description>
    <language>en</language>
    <lastBuildDate>${now}</lastBuildDate>
`;

  // Sort posts by date (newest first)
  blogPosts.sort((a, b) => new Date(b.date) - new Date(a.date));

  blogPosts.forEach(post => {
    const pubDate = formatDate(post.date);
    const postUrl = `https://docs.xmlui.org/${post.slug}`;
    const description = getPostDescription(post.slug);

    rss += `
    <item>
      <title>${escapeXml(post.title)}</title>
      <link>${postUrl}</link>
      <description>${escapeXml(description)}</description>
      <pubDate>${pubDate}</pubDate>
      <author>support@xmlui.org (${escapeXml(post.author)})</author>
      <guid>${postUrl}</guid>
    </item>`;
  });

  rss += `
  </channel>
</rss>`;

  return rss;
}

// Escape XML special characters
function escapeXml(text) {
  if (typeof text !== 'string') {
    text = String(text);
  }
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

// Main execution
function main() {
  try {
    console.log('Generating RSS feed...');

    const blogPosts = extractBlogPosts();
    console.log(`Found ${blogPosts.length} blog post(s)`);
    
    if (blogPosts.length === 0) {
      console.warn('No blog posts found, creating empty RSS feed');
    } else {
      blogPosts.forEach(post => {
        console.log(`  - "${post.title}" by ${post.author} (${post.date})`);
      });
    }

    const rssContent = generateRSS(blogPosts);
    const outputPath = path.join(__dirname, '../public/feed.rss');

    // Ensure the public directory exists
    const publicDir = path.dirname(outputPath);
    if (!fs.existsSync(publicDir)) {
      fs.mkdirSync(publicDir, { recursive: true });
    }

    fs.writeFileSync(outputPath, rssContent);
    console.log(`RSS feed generated successfully: ${outputPath}`);
    console.log(`Feed will be available at: https://docs.xmlui.org/feed.rss`);

  } catch (error) {
    console.error('Error generating RSS feed:', error);
    process.exit(1);
  }
}

// Run if called directly
if (require.main === module) {
  main();
}

module.exports = { extractBlogPosts, generateRSS, getPostDescription };

```

--------------------------------------------------------------------------------
/xmlui/src/components/Form/FormContext.ts:
--------------------------------------------------------------------------------

```typescript
import type { Dispatch } from "react";
import { createContext, useContext, useContextSelector } from "use-context-selector";

import type { ContainerAction } from "../../components-core/rendering/containers";
import type { FormAction } from "../Form/formActions";
import type { LabelPosition } from "../abstractions";
import type { PropertyValueDescription } from "../../abstractions/ComponentDefs";

export type InteractionFlags = {
  isDirty: boolean;
  invalidToValid: boolean;
  isValidOnFocus: boolean;
  isValidLostFocus: boolean;
  focused: boolean;
  afterFirstDirtyBlur: boolean;
  forceShowValidationResult: boolean;
};

interface IFormContext {
  subject: Record<string, any>;
  originalSubject: Record<string, any>;
  validationResults: Record<string, ValidationResult>;
  interactionFlags: Record<string, InteractionFlags>;
  dispatch: Dispatch<ContainerAction | FormAction>;
  enabled?: boolean;
  itemLabelWidth?: string;
  itemLabelBreak?: boolean;
  itemLabelPosition?: string | LabelPosition;
}

export type ValidationResult = {
  isValid: boolean;
  validations: Array<SingleValidationResult>;
  validatedValue: any;
  partial: boolean;
};

export type SingleValidationResult = {
  isValid: boolean;
  severity: ValidationSeverity;
  invalidMessage?: string;
  validMessage?: string;
  async?: boolean;
  stale?: boolean;
  fromBackend?: boolean;
};

export interface FormItemValidations {
  required: boolean | undefined;
  requiredInvalidMessage: string | undefined;
  minLength: number | undefined;
  maxLength: number | undefined;
  lengthInvalidMessage: string | undefined;
  lengthInvalidSeverity: ValidationSeverity | undefined;
  minValue: number | undefined;
  maxValue: number | undefined;
  rangeInvalidMessage: string | undefined;
  rangeInvalidSeverity: ValidationSeverity | undefined;
  pattern: string | undefined;
  patternInvalidMessage: string | undefined;
  patternInvalidSeverity: ValidationSeverity | undefined;
  regex: string | undefined;
  regexInvalidMessage: string | undefined;
  regexInvalidSeverity: ValidationSeverity | undefined;
}

export const validationSeverityValues = ["error", "warning", "valid", "none"] as const;
export type ValidationSeverity = (typeof validationSeverityValues)[number];
export const validationSeverityMd: PropertyValueDescription[] = [
  { value: "valid", description: "Visual indicator for an input that is accepted" },
  { value: "warning", description: "Visual indicator for an input that produced a warning" },
  { value: "error", description: "Visual indicator for an input that produced an error" },
];

export type ValidateEventHandler = ((value: any) => Promise<ValidateFunctionResult>) | undefined;

type ValidateFunctionResult = boolean | SingleValidationResult | Array<SingleValidationResult>;

export const validationModeValues = ["errorLate", "onChanged", "onLostFocus"] as const;
export type ValidationMode = (typeof validationModeValues)[number];
export const defaultValidationMode = "errorLate";
export const validationModeMd: PropertyValueDescription[] = [
  {
    value: "errorLate",
    description:
      "Display the error when the field loses focus." +
      "If an error is already displayed, continue for every keystroke until input is accepted.",
  },
  {
    value: "onChanged",
    description: "Display error (if present) for every keystroke.",
  },
  {
    value: "onLostFocus",
    description: "Show/hide error (if present) only if the field loses focus.",
  },
];

export const FormContext = createContext<IFormContext>(undefined as unknown as IFormContext);

export function useFormContextPart<T = unknown>(selector: (value?: IFormContext) => T) {
  return useContextSelector(FormContext, selector);
}

export function useIsInsideForm(){
  const contextPart = useFormContextPart((value) => value?.dispatch);
  return contextPart !== undefined;
}

export const formControlTypes = [
  "text",
  "password",
  "textarea",
  "checkbox",
  "number",
  "integer",
  "number2",
  "integer2",
  "file",
  "select",
  "autocomplete",
  "datePicker",
  "radioGroup",
  "custom",
  "switch",
  "slider",
  "colorpicker",
  "items",
] as const;

export const formControlTypesMd: PropertyValueDescription[] = [
  {
    value: "text",
    description: "Renders TextBox",
  },
  {
    value: "password",
    description: "Renders TextBox with `password` type",
  },
  {
    value: "textarea",
    description: "Renders Textarea",
  },
  {
    value: "checkbox",
    description: "Renders Checkbox",
  },
  {
    value: "number",
    description: "Renders NumberBox",
  },
  {
    value: "integer",
    description: "Renders NumberBox with `integersOnly` set to true",
  },
  {
    value: "file",
    description: "Renders FileInput",
  },
  {
    value: "datePicker",
    description: "Renders DatePicker",
  },
  {
    value: "radioGroup",
    description: "Renders RadioGroup",
  },
  {
    value: "switch",
    description: "Renders Switch",
  },
  {
    value: "select",
    description: "Renders Select",
  },
  {
    value: "autocomplete",
    description: "Renders AutoComplete",
  },
  {
    value: "slider",
    description: "Renders Slider",
  },
  {
    value: "colorpicker",
    description: "Renders ColorPicker",
  },
  {
    value: "items",
    description: "Renders Items",
  },
  {
    value: "custom",
    description:
      "A custom control specified in children. If `type` is not specified " +
      "but the `FormItem` has children, it considers the control a custom one.",
  },
];
export type FormControlType = (typeof formControlTypes)[number];

```

--------------------------------------------------------------------------------
/docs/public/pages/components-intro.md:
--------------------------------------------------------------------------------

```markdown
# Components

We've already seen a number of XMLUI components in action: [DataSource](/components/DataSource),

[Items](/components/Items),
[List](/components/List),
[Markdown](/components/Markdown),
[Select](/components/Select),
[Option](/components/Option),
[Table](/components/Table).

## Built-in components

As an XMLUI developer you'll create user interfaces by combining these with others in the [core library](/components/_overview), drawing from these categories:

**Data**: [AppState](/components/AppState),
[DataSource](/components/DataSource),
[APICall](/components/APICall) ...

**Display**: [Avatar](/components/Avatar),
[Card](/components/Card), [Heading](/components/Heading), [Image](/components/Image),
[Icon](/components/Icon),
[Markdown](/components/Markdown),
[Text](/components/Text),
[Table](/components/Table) ...

**Input**: [Checkbox](/components/Checkbox),
[DatePicker](/components/DatePicker), [Form](/components/Form),
[FormItem](/components/FormItem),
[FileInput](/components/FileInput),
[NumberBox](/components/NumberBox),
[Select](/components/Select),
[TextArea](/components/TextArea),
[TextBox](/components/TextBox) ...

**Layout**: [FlowLayout](/components/FlowLayout), [HStack](/components/HStack), [VStack](/components/VStack) ...

**Navigation**: [DropdownMenu](/components/DropdownMenu),
[MenuItem](/components/MenuItem),
[NavLink](/components/NavLink),
[NavPanel](/components/NavPanel),
[Tabs](/components/Tabs),
[TabItem](/components/TabItem) ...

## Custom components

You'll also create your own components to combine and extend the built-ins. For example, here's a component that represents the stops on a London tube line.

```xmlui-pg
---app display /line/
<App>
  <TubeStops line="Bakerloo"/>
</App>
---comp display /line/
<Component name="TubeStops">
  <DataSource
    id="stops"
    when="{$props.line}"
    url="https://api.tfl.gov.uk/Line/{$props.line}/StopPoints"
    transformResult="{window.transformStops}"
  />
  <Text variant="strong">{$props.line}</Text>

  <Table data="{stops}">
    <Column width="3*" bindTo="name" />
    <Column bindTo="zone" />
    <Column bindTo="wifi" >
      <Fragment when="{$item.wifi === 'yes'}">
        <Icon name="checkmark"/>
      </Fragment>
    </Column>
    <Column bindTo="toilets" >
      <Fragment when="{$item.toilets === 'yes'}">
        <Icon name="checkmark"/>
      </Fragment>
    </Column>
  </Table>

</Component>
```

```javascript
window.transformStops = function(stops) {
  return stops.map(function(stop) {
  // Helper to extract a value from additionalProperties by key
    function getProp(key) {
      if (!stop.additionalProperties) return '';
      var propObj = stop.additionalProperties.find(function(p) {
        return p.key === key;
      });
      return propObj ? propObj.value : '';
    }
    return {
      name: stop.commonName,
      zone: getProp('Zone'),
      wifi: getProp('WiFi'),
      toilets: getProp('Toilets'),
      // A comma-separated list of line names that serve this stop
      lines: stop.lines
        ? stop.lines.map(function(line) { return line.name; }).join(', ')
        : ''
    };
  });
}
```

An instance of `TubeStops` extracts details for a given tube line. Multiple instances can be arranged on the display using layout components. For example, here's a two-column layout.

```xmlui-pg display
---app display
<App>
    <FlowLayout>
      <Stack width="*">
        <TubeStops line="victoria"/>
      </Stack>
      <Stack width="*">
        <TubeStops line="waterloo-city"/>
      </Stack>
    </FlowLayout>
</App>
---comp
<Component name="TubeStops">
  <DataSource
    id="stops"
    when="{$props.line}"
    url="https://api.tfl.gov.uk/Line/{$props.line}/StopPoints"
    transformResult="{window.transformStops}"
  />
  <Text variant="strong">{$props.line}</Text>

  <Table data="{stops}">
    <Column width="3*" bindTo="name" />
    <Column bindTo="zone" />
    <Column bindTo="wifi" >
      <Fragment when="{$item.wifi === 'yes'}">
        <Icon name="checkmark"/>
      </Fragment>
    </Column>
    <Column bindTo="toilets" >
      <Fragment when="{$item.toilets === 'yes'}">
        <Icon name="checkmark"/>
      </Fragment>
    </Column>
  </Table>

</Component>
```


The `TubeStops` component:

- **Lives in the `components` folder**. The full path is `components/TubeStops.xmlui`.
- **Can handle any properties passed in the `$props` [context variable](/context-variables)**. A calling component can send one or more `name="value"` pairs like `line="Bakerloo"`.
- **Defines a dynamic data source**. When this page embeds `<TubeStops line="Bakerloo"/>`, the `TubeStops` component receives a `line` property used to form the URL that fetches data.
- **Transforms data**. When API responses are complex, the expressions needed to unpack them can clutter your XMLUI markup. In this case the  component offloads that work to the `transformStops` function so it can work with a simplified structure.
- **Enriches data**. The transformed data has `yes`/`no` values for `wifi` and `toilets`. `TubeStops` uses [Fragment](/components/Fragment) to display an [Icon](/components/Icon) only for `yes` values.

When you use custom components to access, transform, and present data, your XMLUI markup stays clean, readable, and easy to read and maintain.

Another way to keep your markup clean: rely on XMLUI's layout and style engine to make your app look good and behave gracefully by default. You can adjust the (many!) settings that define an XMLUI [Theme](/components/Theme), but you'll rarely need to. The next chapter explains why.

```

--------------------------------------------------------------------------------
/xmlui/src/components/Charts/AreaChart/AreaChartNative.tsx:
--------------------------------------------------------------------------------

```typescript
import {
  AreaChart as RAreaChart,
  Area,
  CartesianGrid,
  XAxis,
  YAxis,
  ResponsiveContainer,
  Tooltip,
  Legend as RLegend,
} from "recharts";

import type { ReactNode} from "react";
import { useEffect, useRef, useState, useCallback } from "react";
import { useMemo } from "react";
import ChartProvider, { useChartContextValue } from "../utils/ChartProvider";
import { TooltipContent } from "../Tooltip/TooltipContent";
import { useTheme } from "../../../components-core/theming/ThemeContext";

export type AreaChartProps = {
  data: any[];
  nameKey: string;
  dataKeys?: string[];
  className?: string;
  hideTickX?: boolean;
  hideTickY?: boolean;
  hideX?: boolean;
  hideY?: boolean;
  hideTooltip?: boolean;
  tickFormatterX?: (value: any) => any;
  tickFormatterY?: (value: any) => any;
  children?: ReactNode;
  showLegend?: boolean;
  stacked?: boolean;
  curved?: boolean;
  tooltipRenderer?: (tooltipData: any) => ReactNode;
};

export const defaultProps: Pick<
  AreaChartProps,
  | "hideTickX"
  | "hideTickY"
  | "hideX"
  | "hideY"
  | "hideTooltip"
  | "tickFormatterX"
  | "tickFormatterY"
  | "showLegend"
  | "stacked"
  | "curved"
> = {
  hideTickX: false,
  hideTickY: false,
  hideX: false,
  hideY: false,
  hideTooltip: false,
  tickFormatterX: (value) => value,
  tickFormatterY: (value) => value,
  showLegend: false,
  stacked: false,
  curved: false,
};

export function AreaChart({
  data = [],
  nameKey,
  dataKeys = [],
  hideTickX = defaultProps.hideTickX,
  hideTickY = defaultProps.hideTickY,
  hideY = defaultProps.hideY,
  hideX = defaultProps.hideX,
  hideTooltip = defaultProps.hideTooltip,
  tickFormatterX = defaultProps.tickFormatterX,
  tickFormatterY = defaultProps.tickFormatterY,
  className,
  children,
  showLegend = defaultProps.showLegend,
  stacked = defaultProps.stacked,
  curved = defaultProps.curved,
  tooltipRenderer,
}: AreaChartProps) {
  // Validate and normalize data
  const validData = Array.isArray(data) ? data : [];
  const { getThemeVar } = useTheme();

  const colorValues = useMemo(() => {
    return [
      getThemeVar("color-primary-500"),
      getThemeVar("color-primary-300"),
      getThemeVar("color-success-500"),
      getThemeVar("color-success-300"),
      getThemeVar("color-warn-500"),
      getThemeVar("color-warn-300"),
      getThemeVar("color-danger-500"),
      getThemeVar("color-danger-300"),
      getThemeVar("color-info-500"),
      getThemeVar("color-info-300"),
      getThemeVar("color-secondary-500"),
      getThemeVar("color-secondary-300"),
    ];
  }, [getThemeVar]);

  const config = useMemo(() => {
    return Object.assign(
      {},
      ...dataKeys.map((key, index) => {
        return {
          [key]: {
            label: key,
            color: colorValues[index % colorValues.length],
          },
        };
      }),
    );
  }, [colorValues, dataKeys]);

  const chartContextValue = useChartContextValue({ dataKeys, nameKey });

  // Process data and create chart elements based on dataKeys
  const chartElements = useMemo(() => {
    return dataKeys.map((key, index) => {
      const color = colorValues[index % colorValues.length];

      return (
        <Area
          key={key}
          dataKey={key}
          fill={color}
          stroke={color}
          fillOpacity={0.6}
          strokeWidth={2}
          type={curved ? "monotone" : "linear"}
          stackId={stacked ? "1" : undefined}
        />
      );
    });
  }, [dataKeys, colorValues, curved, stacked]);

  // Handle responsive behavior
  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const updateSize = () => {
      if (containerRef.current) {
        const { width, height } = containerRef.current.getBoundingClientRect();
        setContainerSize({ width, height });
      }
    };

    updateSize();
    window.addEventListener("resize", updateSize);
    return () => window.removeEventListener("resize", updateSize);
  }, []);

  // Determine if we're in mini mode (very small container)
  const isMiniMode = containerSize.height < 150;

  const safeTooltipRenderer = useCallback(
    (props: any) => {
      if (!tooltipRenderer) return <TooltipContent {...props} />;

      const payloadObject: Record<string, any> = {};

      if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
        Object.assign(payloadObject, props.payload[0].payload);
      }

      // Extract tooltip data from Recharts props
      const tooltipData = {
        label: props.label,
        payload: payloadObject,
        active: props.active,
      };

      return tooltipRenderer(tooltipData);
    },
    [tooltipRenderer],
  );

  return (
    <ChartProvider value={chartContextValue}>
      <div ref={containerRef} className={className}>
        <ResponsiveContainer width="100%" height="100%">
          <RAreaChart data={validData}>
            {!hideX && (
              <XAxis
                dataKey={nameKey}
                tick={!hideTickX}
                tickFormatter={tickFormatterX}
                hide={isMiniMode}
              />
            )}
            {!hideY && <YAxis tick={!hideTickY} tickFormatter={tickFormatterY} hide={isMiniMode} />}
            <CartesianGrid strokeDasharray="3 3" />
            {!isMiniMode && !hideTooltip && <Tooltip content={safeTooltipRenderer} />}
            {showLegend && !isMiniMode && <RLegend />}
            {chartElements}
            {children}
          </RAreaChart>
        </ResponsiveContainer>
      </div>
    </ChartProvider>
  );
}

```

--------------------------------------------------------------------------------
/docs/content/components/Stack.md:
--------------------------------------------------------------------------------

```markdown
# 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.

**Key features:**
- **Dynamic orientation**: Switch between horizontal and vertical layouts programmatically
- **Comprehensive alignment**: Precise control over both horizontal and vertical child positioning
- **Flexible spacing**: Configurable gaps between elements with theme-aware sizing
- **Content wrapping**: Automatic wrapping when space constraints require it
- **Order control**: Reverse child element order with the reverse property
- **Foundation for variants**: Powers HStack, VStack, CHStack, and CVStack specialized components

For common scenarios, consider the specialized variants: [HStack](/components/HStack) (horizontal), [VStack](/components/VStack) (vertical), [CHStack](/components/CHStack) (centered horizontal), and [CVStack](/components/CVStack) (centered vertical).

## Properties [#properties]

### `gap` (default: "$gap-normal") [#gap-default-gap-normal]

Optional size value indicating the gap between child elements.

In the following example we use pixels, characters (shorthand `ch`), and the `em` CSS unit size which is a relative size to the font size of the element (See size values).

```xmlui-pg copy {3, 10} display name="Example: gap"
<App>
  <Stack orientation="horizontal" backgroundColor="cyan"
    gap="80px">
    <Stack height="40px" width="40px" backgroundColor="red" />
    <Stack height="40px" width="40px" backgroundColor="green" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="yellow" />
  </Stack>
  <Stack orientation="horizontal" backgroundColor="cyan"
    gap="12ch">
    <Stack height="40px" width="40px" backgroundColor="red" />
    <Stack height="40px" width="40px" backgroundColor="green" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="yellow" />
  </Stack>
</App>
```

### `horizontalAlignment` (default: "start") [#horizontalalignment-default-start]

Manages the horizontal content alignment for each child element in the Stack.

Available values: `start` **(default)**, `center`, `end`

>[!INFO]
> The `start` and `end` values can be affected by i18n if the layout is in a right-to-left writing style.

```xmlui-pg copy {3} display name="Example: horizontalAlignment"
<App>
  <Stack width="100%" horizontalAlignment="center" backgroundColor="cyan">
    <Stack width="36px" height="36px" backgroundColor="red" />
  </Stack>
</App>
```

### `orientation` (default: "vertical") [#orientation-default-vertical]

An optional property that governs the Stack's orientation (whether the Stack lays out its children in a row or a column).

Available values: `horizontal`, `vertical` **(default)**

### `reverse` (default: false) [#reverse-default-false]

Optional boolean property to reverse the order of child elements.

Default is **false**, which indicates a left-to-right layout.

```xmlui-pg copy display name="Example: reverse"
<App>
  <Stack backgroundColor="cyan">
    <Stack gap="10px" orientation="horizontal">
      <Stack height="40px" width="40px" backgroundColor="red" />
      <Stack height="40px" width="40px" backgroundColor="green" />
      <Stack height="40px" width="40px" backgroundColor="blue" />
    </Stack>
    <Stack reverse="true" orientation="horizontal">
      <Stack height="40px" width="40px" backgroundColor="red" />
      <Stack height="40px" width="40px" backgroundColor="green" />
      <Stack height="40px" width="40px" backgroundColor="blue" />
    </Stack>
  </Stack>
</App>
```

### `verticalAlignment` (default: "start") [#verticalalignment-default-start]

Manages the vertical content alignment for each child element in the Stack.

Available values: `start` **(default)**, `center`, `end`

```xmlui-pg copy {2} display name="Example: verticalAlignment"
<App>
  <Stack height="100px" verticalAlignment="end" backgroundColor="cyan">
    <Stack width="36px" height="36px" backgroundColor="red" />
  </Stack>
</App>
```

### `wrapContent` (default: false) [#wrapcontent-default-false]

Optional boolean which wraps the content if set to true and the available space is not big enough. Works only with horizontal orientations.

Optional boolean which wraps the content if set to true and the available space is not big enough. Works in all orientations.

```xmlui-pg copy display name="Example: wrapContent"
<App>
  <Stack wrapContent="true" width="140px" orientation="horizontal" backgroundColor="cyan">
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
    <Stack height="40px" width="40px" backgroundColor="blue" />
  </Stack>
</App>
```

## Events [#events]

### `click` [#click]

This event is triggered when the Stack is clicked.

Describes the logic that fires when the component is clicked.

```xmlui-pg copy display name="Example: click"
<App>
  <HStack var.shown="{false}">
    <Stack height="40px" width="40px" backgroundColor="red" onClick="shown = !shown" />
    <Stack when="{shown}" height="40px" width="40px" backgroundColor="blue" />
  </HStack>
</App>
```

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

This component does not have any styles.

```

--------------------------------------------------------------------------------
/tools/codefence/xmlui-code-fence-docs.md:
--------------------------------------------------------------------------------

```markdown
# XMLUI Code Fence Syntax Documentation

This document describes the various syntax options supported in XMLUI markdown code fences.

## Basic Fence Types

### Standard Code Display: `xmlui`
```xmlui
<Button label="Hello World" />
```
Basic code fence for showing XMLUI code without any special features.

### Playground: `xmlui-pg`
```xmlui-pg
<Button label="Interactive Button" />
```
Creates an interactive playground where the XMLUI code can be executed and displayed inline.

### Application Context: `---app`
```
---app
<App>
  <Button label="Full App Example" />
</App>
```
Used for showing complete application examples with full App context.

### Component Context: `---comp`
```
---comp
<Button label="Component Example" />
```
Used for showing component-level examples.

## Supported Modifiers

### `copy`
Adds a copy button to the code block, allowing users to copy the code to clipboard.

```xmlui copy
<Button label="Copyable Code" />
```

```xmlui-pg copy
<Button label="Copyable Playground" />
```

### `display`
Shows the rendered output alongside or instead of just the code.

```xmlui-pg copy display
<Button label="Both Code and Output" />
```

### `name="Example Name"`
Provides a descriptive name for the example.

```xmlui-pg copy display name="Example: Basic Button"
<Button label="Named Example" />
```

### `height="XXXpx"`
Sets a specific height for the playground container.

```xmlui-pg copy display height="200px"
<VStack>
  <Button label="Button 1" />
  <Button label="Button 2" />
</VStack>
```

### `filename="filename.xmlui"`
Specifies a filename for the code block, useful for multi-file examples.

```xmlui copy filename="Main.xmlui"
<App>
  <Button label="Main App" />
</App>
```

## Line Highlighting: `{line-numbers}`

Highlights specific lines in the code block. Supports various formats:

### Single Line
```xmlui copy {3}
<App>
  <VStack>
    <Button label="This line is highlighted" />
  </VStack>
</App>
```

### Multiple Lines (comma-separated)
```xmlui copy {2, 4, 6}
<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>
```

### Line Ranges
```xmlui copy {2-4}
<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
  </VStack>
</App>
```

### Mixed Ranges and Individual Lines
```xmlui copy {2-4, 7, 10-12}
<!-- Complex highlighting example -->
```

## Attribute Highlighting: `/attribute/`

Highlights specific attributes, values, or patterns within the code using forward slash delimiters.

### Highlight Specific Attributes
```xmlui copy /variant="outlined"/ /themeColor="primary"/
<Button label="Highlighted Attributes" variant="outlined" themeColor="primary" />
```

### Highlight Attribute Names Only
```xmlui copy /name/ /size/
<Icon name="star" size="large" />
```

### Highlight Specific Values
```xmlui copy /direction="rtl"/
<Button label="Right-to-Left" direction="rtl" />
```

### Highlight IDs or References
```xmlui copy /#red/ /#green/ /#blue/ /id="red"/ /id="green"/ /id="blue"/
<VStack>
  <Bookmark id="red" />
  <Bookmark id="green" />
  <Bookmark id="blue" />
</VStack>
```

### Highlight Method Names or Complex Values
```xmlui copy /onSelect="(emoji) => { selected = emoji }"/
<EmojiSelector onSelect="(emoji) => { selected = emoji }" />
```

```xmlui copy /loggedInUser="{{ name: 'Joe', token: '1234' }}"/
<App loggedInUser="{{ name: 'Joe', token: '1234' }}" />
```

### Multiple Attribute Highlights
You can highlight multiple different attributes in the same code block:

```xmlui copy /orientation="horizontal"/ /showAvatar="true"/ /subtitle="Example"/
<Card orientation="horizontal" showAvatar="true" subtitle="Example" />
```

### Red Border Highlighting: `!/pattern/`
Using `!` before the forward slash delimiters produces a red border instead of the standard highlight:

```xmlui !/{ 6 * 7 }/
<Text value="Life, the universe, and everything: { 6 * 7 }" />
```

## Complete Examples

### Full-Featured Playground
```xmlui-pg copy display name="Example: Button Variants" height="300px" {3-5}
<App>
  <VStack gap="8px">
    <Button label="Solid" variant="solid" />
    <Button label="Outlined" variant="outlined" />
    <Button label="Ghost" variant="ghost" />
  </VStack>
</App>
```

### Multi-File Example with App Context
```
---app copy display filename="Main.xmlui" height="200px"
<App>
  <Component1 />
</App>

---comp copy display filename="Component1.xmlui"
<VStack>
  <Button label="Component Button" />
</VStack>
```

## Modifier Combinations

All modifiers can be combined in various ways:

- `copy + display` = Shows both code and rendered output with copy functionality
- `copy + display + name` = Named example with copy and display
- `copy + display + height` = Sized playground with copy and display
- `copy + {lines}` = Copyable code with line highlighting
- `filename + any combination` = File-specific examples

## Context-Specific Usage

### In Component Documentation
- Use `xmlui-pg` for interactive examples that users can modify
- Use `xmlui copy` for code snippets users will copy into their projects
- Use line highlighting to draw attention to specific properties or patterns

### In Multi-File Examples
- Use `---app` for the main application file
- Use `---comp` for individual component files
- Always include `filename` for clarity in multi-file scenarios

### For Complex Layouts
- Use `height` to ensure adequate space for the rendered output
- Use `name` to provide clear context for what the example demonstrates
- Combine `display` with appropriate sizing for optimal presentation


### Descriptions

Use `---desc` to inject narrative markdown. 
```

--------------------------------------------------------------------------------
/xmlui/src/components/ModalDialog/ModalDialog.md:
--------------------------------------------------------------------------------

```markdown
%-DESC-START

**Key features:**
- **Overlay presentation**: Appears above existing content with backdrop dimming
- **Programmatic control**: Open and close via exposed methods like `open()` and `close()`
- **Parameter passing**: Accept data when opened for dynamic dialog content
- **Focus management**: Automatically handles focus trapping and accessibility
- **Form integration**: When containing Form components, automatically closes on form submission or cancellation (unless overridden)

## Using the Component

>[!INFO]
> When using the examples in this article, pop them out to the full screen to check how they work.

Opening and closing the modal dialog can be done in two ways depending on circumstances.

### With Imperative API

Event-driven display of the `ModalDialog` dialog is also possible using imperative API.

This method is a good way to toggle the display of the `ModalDialog` if no deep linking is necessary.
It also lends to itself that these events can be triggered programmatically from codebehind.

Note the `id` property of the `ModalDialog` in the example below and how it is used to call the [`open`](#open-api) and [`close`](#close-api)
operations of the component in the `onClick` event handlers.

```xmlui-pg copy display name="Example: imperative API" height="220px"
<App>
  <ModalDialog id="dialog" title="Example Dialog">
    <Button label="Close Dialog" onClick="dialog.close()" />
  </ModalDialog>
  <Button label="Open Dialog" onClick="dialog.open()" />
</App>
```

>[!INFO]
> The imperative approach is perhaps the most intuitive way to display and hide modal dialogs.

### With `when`

The `when` property accepts a primitive boolean or a binding expression resolving to a boolean value to toggle the display of a component.

Using the `when` property in a `ModalDialog` dialog component is commonly used with deep linking:
showing the modal in conjunction with an updated URL so that the opened state of the modal dialog is referable.

```xmlui-pg height="220px"
---app copy display name="Example: when"
<App>
  <variable name="isDialogShown" value="{false}"/>
  <Button label="Open Dialog" onClick="isDialogShown = true" />
  <ModalDialog 
    when="{isDialogShown}" 
    title="Example Dialog" 
    onClose="isDialogShown = false" />
</App>
---desc
Click on the button in the demo below to open the modal dialog. Click anywhere outside the opened dialog or the close button to close it.
```

Setting the `when` property is the most straightforward way for deep-linked modals. If you use deep links with query parameters to show a particular dialog, you can set the `when` property to show or hide the dialog according to parameter values.

### The `ModalDialog` as a Container

The `ModalDialog` component is also a container such as the [`Card`](/components/Card), that it also accepts child components.

```xmlui-pg copy {3-8} display name="Example: children" height="340px"
<App>
  <Button label="Open Dialog" onClick="dialog.open()" />
  <ModalDialog id="dialog" title="Example Dialog">
    <Form data="{{ firstName: 'Billy', lastName: 'Bob' }}">
      <FormItem bindTo="firstName" required="true" />
      <FormItem bindTo="lastName" required="true" />
    </Form>
  </ModalDialog>
</App>
```

>[!INFO]
> When a form is nested into a modal dialog, closing the form (canceling it or completing its submit action) automatically closes the dialog.

%-DESC-END

%-PROP-START fullScreen

```xmlui-pg height="220px"
---app copy display name="Example: fullScreen"
<App>
  <Button label="Open Dialog" onClick="dialog.open()" />
  <ModalDialog id="dialog" fullScreen="true" title="Example Dialog" />
</App>
---desc
Click the button to display a full-screen dialog. The icon at the top-right corner of the dialog allows you to close it.
```

%-PROP-END

%-PROP-START title

```xmlui-pg copy {3} display name="Example: title" height="220px"
<App>
  <Button label="Open Dialog" onClick="dialog.open()" />
  <ModalDialog id="dialog" title="Example Title" />
</App>
```

%-PROP-END

%-PROP-START closeButtonVisible

```xmlui-pg height="220px"
---app copy display name="Example: closeButtonVisible"
<App>
  <Button label="Open Dialog" onClick="dialog.open()" />
  <ModalDialog id="dialog" closeButtonVisible="false" title="Example Dialog" />
</App>
---desc
Click outside the dialog to close it.
```

%-PROP-END

%-EVENT-START close

In this example, the `close` event counts how many times you closed the dialog:

```xmlui-pg height="220px"
---app copy {6-8} display name="Example: open/close events"
<App>
  <Button label="Open Dialog" onClick="myDialog.open()" />
  <ModalDialog
    id="myDialog"
    title="Example Dialog"
    var.counter="{0}"
    onClose="counter++">
    <Text value="Dialog closed {counter} number of times." />
  </ModalDialog>
</App>
---desc
Open and close the dialog several times to test that it changes the counter.
```

%-EVENT-END

%-EVENT-START open

In this example, the `open` event counts how many times you opened the dialog:

```xmlui-pg height="220px"
---app copy {6-8} display name="Example: open/close events"
<App>
  <Button label="Open Dialog" onClick="myDialog.open()" />
  <ModalDialog
    id="myDialog"
    title="Example Dialog"
    var.counter="{0}"
    onOpen="counter++">
    <Text value="Dialog opened {counter} number of times." />
  </ModalDialog>
</App>
---desc
Open and close the dialog several times to test that it changes the counter.
```

%-EVENT-END

%-API-START open

See the [\`With Imperative API\`](#with-imperative-api) subsection for an example.

%-API-END

%-API-START close

See the [\`With Imperative API\`](#with-imperative-api) subsection for an example.

%-API-END

```

--------------------------------------------------------------------------------
/xmlui/tests/components-core/interception/orderBy.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it } from "vitest";
import { orderBy } from "../../../src/components-core/utils/misc"

const numArray = [3,4,1,2,5];
const strArray = ["beta", "delta", "alpha", "gamma", "charlie"]
const objArray = [
    { key: "hey", value: 1},
    { key: "bye", value: 114},
    { key: "hey", value: 3},
    { key: "bye", value: 41},
    { key: "ok", value: 1000},
]

describe("orderBy", () => {
    it("single number", async () => {
        // --- Act
        const res = await orderBy(numArray, async (i: any) => i);
        
        // --- Assert
        expect(res[0]).equal(1);
        expect(res[1]).equal(2);
        expect(res[2]).equal(3);
        expect(res[3]).equal(4);
        expect(res[4]).equal(5);
    });

    it("single number, desc", async () => {
        // --- Act
        const res = await orderBy(numArray, async (i: any) => i, true);

        // --- Assert
        expect(res[0]).equal(5);
        expect(res[1]).equal(4);
        expect(res[2]).equal(3);
        expect(res[3]).equal(2);
        expect(res[4]).equal(1);
    });

    it("single string", async () => {
        // --- Act
        const res = await orderBy(strArray, async (i: any) => i);

        // --- Assert
        expect(res[0]).equal("alpha");
        expect(res[1]).equal("beta");
        expect(res[2]).equal("charlie");
        expect(res[3]).equal("delta");
        expect(res[4]).equal("gamma");
    });

    it("single string, desc", async () => {
        // --- Act
        const res = await orderBy(strArray, async (i: any) => i, true);

        // --- Assert
        expect(res[0]).equal("gamma");
        expect(res[1]).equal("delta");
        expect(res[2]).equal("charlie");
        expect(res[3]).equal("beta");
        expect(res[4]).equal("alpha");
    });

    it("single object, string mapper", async () => {
        // --- Act
        const res = await orderBy(objArray, "value");

        // --- Assert
        expect(res[0].value).equal(1);
        expect(res[1].value).equal(3);
        expect(res[2].value).equal(41);
        expect(res[3].value).equal(114);
        expect(res[4].value).equal(1000);
    });

    it("single object, string mapper, desc", async () => {
        // --- Act
        const res = await orderBy(objArray, "value", true);

        // --- Assert
        expect(res[0].value).equal(1000);
        expect(res[1].value).equal(114);
        expect(res[2].value).equal(41);
        expect(res[3].value).equal(3);
        expect(res[4].value).equal(1);
    });

    it("single object, func mapper", async () => {
        // --- Act
        const res = await orderBy(objArray, async (i: any) => i.value);

        // --- Assert
        expect(res[0].value).equal(1);
        expect(res[1].value).equal(3);
        expect(res[2].value).equal(41);
        expect(res[3].value).equal(114);
        expect(res[4].value).equal(1000);
    });

    it("single object, func mapper, desc", async () => {
        // --- Act
        const res = await orderBy(objArray, async (i: any) => i.value, true);

        // --- Assert
        expect(res[0].value).equal(1000);
        expect(res[1].value).equal(114);
        expect(res[2].value).equal(41);
        expect(res[3].value).equal(3);
        expect(res[4].value).equal(1);
    });

    it("multiple object #1", async () => {
        // --- Act
        const res = await orderBy(objArray, async (i: any) => i.key, async (i: any) => i.value);

        // --- Assert
        expect(res[0].key).equal("bye");
        expect(res[0].value).equal(41);
        expect(res[1].key).equal("bye");
        expect(res[1].value).equal(114);
        expect(res[2].key).equal("hey");
        expect(res[2].value).equal(1);
        expect(res[3].key).equal("hey");
        expect(res[3].value).equal(3);
        expect(res[4].key).equal("ok");
        expect(res[4].value).equal(1000);
    });

    it("multiple object #2", async () => {
        // --- Act
        const res = await orderBy(objArray, async (i: any) => i.key, true, async (i: any) => i.value);

        // --- Assert
        expect(res[0].key).equal("ok");
        expect(res[0].value).equal(1000);
        expect(res[1].key).equal("hey");
        expect(res[1].value).equal(1);
        expect(res[2].key).equal("hey");
        expect(res[2].value).equal(3);
        expect(res[3].key).equal("bye");
        expect(res[3].value).equal(41);
        expect(res[4].key).equal("bye");
        expect(res[4].value).equal(114);
    });

    it("multiple object #3", async () => {
        // --- Act
        const res = await orderBy(objArray, async (i: any) => i.key, async (i: any) => i.value, true);

        // --- Assert
        expect(res[0].key).equal("bye");
        expect(res[0].value).equal(114);
        expect(res[1].key).equal("bye");
        expect(res[1].value).equal(41);
        expect(res[2].key).equal("hey");
        expect(res[2].value).equal(3);
        expect(res[3].key).equal("hey");
        expect(res[3].value).equal(1);
        expect(res[4].key).equal("ok");
        expect(res[4].value).equal(1000);
    });

    it("multiple object #4", async () => {
        // --- Act
        const res = await orderBy(objArray, async (i: any) => i.key, true, async (i: any) => i.value, true);

        // --- Assert
        expect(res[0].key).equal("ok");
        expect(res[0].value).equal(1000);
        expect(res[1].key).equal("hey");
        expect(res[1].value).equal(3);
        expect(res[2].key).equal("hey");
        expect(res[2].value).equal(1);
        expect(res[3].key).equal("bye");
        expect(res[3].value).equal(114);
        expect(res[4].key).equal("bye");
        expect(res[4].value).equal(41);
    });
});
```

