This is page 29 of 143. Use http://codebase.md/xmlui-org/xmlui/xmlui/0.9.23.js?format=md&lines=false&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-optimized.yml
│       ├── deploy-blog-swa.yml
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs-swa.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
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── an-advanced-codefence.gif
│   │   │   │   ├── an-advanced-codefence.mp4
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── codefence-runner.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   ├── lorem-ipsum.png
│   │   │   │   ├── playground-checkbox-source.png
│   │   │   │   ├── playground.png
│   │   │   │   ├── use-xmlui-mcp-to-find-a-howto.png
│   │   │   │   └── xmlui-demo-gallery.png
│   │   │   ├── introducing-xmlui.md
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   ├── xmlui-playground.md
│   │   │   └── xmlui-powered-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
│   │   ├── staticwebapp.config.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
│   │           ├── FancyButton.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
│   │   │   │   ├── control-cache-invalidation.md
│   │   │   │   ├── debounce-user-input-for-api-calls.md
│   │   │   │   ├── debounce-with-changelistener.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
│   ├── tsconfig.json
│   ├── 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
│   ├── 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
│   │   └── 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
│   ├── 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
│   ├── 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
│   ├── 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.module.scss
│   │       │   ├── 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.tsx
│   │       │   ├── StandalonePlayground.tsx
│   │       │   ├── StandalonePlaygroundNative.module.scss
│   │       │   ├── StandalonePlaygroundNative.tsx
│   │       │   ├── ThemeSwitcher.module.scss
│   │       │   ├── ThemeSwitcher.tsx
│   │       │   └── utils.ts
│   │       ├── providers
│   │       │   ├── Toast.module.scss
│   │       │   └── ToastProvider.tsx
│   │       ├── state
│   │       │   └── store.ts
│   │       ├── themes
│   │       │   └── theme.ts
│   │       └── utils
│   │           └── helpers.ts
│   ├── 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
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Spreadsheet.tsx
│   │       └── SpreadsheetNative.tsx
│   └── 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.spec.ts
│           │   ├── HeroSection.tsx
│           │   └── HeroSectionNative.tsx
│           ├── index.tsx
│           ├── ScrollToTop
│           │   ├── ScrollToTop.module.scss
│           │   ├── ScrollToTop.tsx
│           │   └── ScrollToTopNative.tsx
│           └── vite-env.d.ts
├── playwright.config.ts
├── 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.cjs
    │   ├── 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
    │   ├── component-metadata.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
    │   ├── theme-variables-refactoring.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── extract-component-metadata.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
    │   ├── generate-metadata-markdown.js
    │   ├── get-langserver-metadata.js
    │   ├── 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.module.scss
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   └── 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.js
    │   ├── 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
    │   │   │   ├── index.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── index.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.json
    ├── tsdown.config.ts
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

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

```markdown
%-DESC-START

**Key features:**
- **Flexible modes**: Single date selection (default) or date range selection
- **Format customization**: Support for various date formats (MM/dd/yyyy, yyyy-MM-dd, etc.)
- **Date restrictions**: Set minimum/maximum dates and disable specific dates
- **Localization options**: Configure first day of week and show week numbers

%-DESC-END

%-API-START setValue

```xmlui-pg copy {3, 9, 12} display name="Example: setValue" height="500px"
<App>
  <HStack>
    <Button
      label="Set Date to 05/25/2024"
      onClick="picker.setValue('05/25/2024')" />
    <Button
      label="Remove Date"
      onClick="picker.setValue('')" />
  </HStack>
  <DatePicker inline id="picker" />
</App>
```

%-API-END

%-PROP-START initialValue

```xmlui-pg copy display name="Example: initialValue" height="440px"
<App>
  <DatePicker inline initialValue="05/25/2024" />
</App>  
```

%-PROP-END

%-PROP-START placeholder

```xmlui-pg copy display name="Example: placeholder" height="500px"
<App>
  <DatePicker placeholder="This is a placeholder" />
</App>  
```

%-PROP-END

%-PROP-START enabled

```xmlui-pg copy display name="Example: enabled" height="120px"
<App>
  <DatePicker enabled="false" />
</App>  
```

%-PROP-END

%-PROP-START validationStatus

| Value     | Description                                           |
| :-------- | :---------------------------------------------------- |
| `valid`   | Visual indicator for an input that is accepted        |
| `warning` | Visual indicator for an input that produced a warning |
| `error`   | Visual indicator for an input that produced an error  |

```xmlui-pg copy display name="Example: validationStatus" height="500px"
<App>
  <DatePicker />
  <DatePicker validationStatus="valid" />
  <DatePicker validationStatus="warning" />
  <DatePicker validationStatus="error" />
</App>
```

%-PROP-END

%-PROP-START mode

```xmlui-pg copy {2-3} display name="Example: mode" height="560px"
<App>
  <DatePicker mode="single" />
  <DatePicker mode="range" />
</App>
```

%-PROP-END

%-PROP-START dateFormat

Formats handle years (`y`), months (`m` or `M`), days of the month (`d`).
Providing multiple placeholder letters changes the display of the date.

The table below shows the available date formats:

| Format     | Example    |
| :--------- | :--------- |
| MM/dd/yyyy | 05/25/2024 |
| MM-dd-yyyy | 05-25-2024 |
| yyyy/MM/dd | 2024/05/25 |
| yyyy-MM-dd | 2024-05-25 |
| dd/MM/yyyy | 25/05/2024 |
| dd-MM-yyyy | 25-05-2024 |
| yyyyMMdd   | 20240525   |
| MMddyyyy   | 05252024   |

```xmlui-pg copy display name="Example: dateFormat" height="440px"
<App>
  <DatePicker 
    inline 
    dateFormat="dd-MM-yyyy" 
    initialValue="05/25/2024" />
</App>
```

%-PROP-END

%-PROP-START showWeekNumber

```xmlui-pg copy display name="Example: showWeekNumber" height="500px"
<App>
  <DatePicker showWeekNumber="true" />
</App>
```

%-PROP-END

%-PROP-START weekStartsOn

| Day       | Number |
| :-------- | :----- |
| Sunday    | 0      |
| Monday    | 1      |
| Tuesday   | 2      |
| Wednesday | 3      |
| Thursday  | 4      |
| Friday    | 5      |
| Saturday  | 6      |

```xmlui-pg copy display name="Example: weekStartsOn" height="440px"
<App>
  <DatePicker inline weekStartsOn="1" />
</App>
```

%-PROP-END

%-PROP-START minValue

```xmlui-pg copy display name="Example: minValue" height="440px"
<App>
  <DatePicker inline minValue="05/24/2024" />
</App>
```

%-PROP-END

%-PROP-START maxValue

```xmlui-pg copy display name="Example: maxValue" height="440px"
<App>
  <DatePicker inline maxValue="05/26/2024" />
</App>
```

%-PROP-END

%-PROP-START disabledDates

The `disabledDates` prop supports multiple patterns for disabling specific dates in the calendar. You can use Date objects, strings (parsed using the `dateFormat`), or complex matcher objects.

**Basic patterns:**

| Pattern | Description | Example |
| :------ | :---------- | :------ |
| Single string | Disable one specific date | `"05/25/2024"` |
| Array of strings | Disable multiple specific dates | `["05/25/2024", "05/26/2024"]` |
| Boolean | Disable all dates | `true` |

> [!INFO] You can use the [getDate()](/globals#getdate) function to query the current date.

```xmlui-pg copy display name="Example: Disable specific dates" height="440px"
<App>
  <DatePicker 
    inline 
    disabledDates="{['05/26/2024', '05/27/2024']}" 
    initialValue="05/25/2024" />
</App>  
```

**Advanced patterns:**

| Pattern | Description | Example |
| :------ | :---------- | :------ |
| Date range | Disable a range of dates | `{from: "05/20/2024", to: "05/25/2024"}` |
| Day of week | Disable specific weekdays (0=Sunday, 6=Saturday) | `{dayOfWeek: [0, 6]}` |
| Before date | Disable all dates before a specific date | `{before: "05/25/2024"}` |
| After date | Disable all dates after a specific date | `{after: "05/25/2024"}` |
| Date interval | Disable dates between two dates (exclusive) | `{before: "05/30/2024", after: "05/20/2024"}` |


```xmlui-pg copy display name="Example: Disable weekends" height="440px"
<App>
  <DatePicker inline disabledDates="{{dayOfWeek: [0, 6]}}" />
</App>  
```

```xmlui-pg copy display name="Example: Disable date range" height="440px"
<App>
  <DatePicker 
    inline 
    disabledDates="{{from: '05/20/2024', to: '05/25/2024'}}" 
    initialValue="05/18/2024" />
</App>  
```

```xmlui-pg copy display name="Example: Disable dates before today" height="440px"
<App>
  <DatePicker
    inline 
    disabledDates="{{before: getDate()}}"
    intialValue="{getDate()}"/>
</App>  
```

```xmlui-pg copy display name="Example: Disable dates today and after" height="440px"
<App>
  <DatePicker
    inline 
    disabledDates="{[getDate(), {after: getDate()}]}"
    intialValue="{getDate()}"/>
</App>  
```


```xmlui-pg copy display name="Example: Complex combination" height="440px"
<App>
  <DatePicker 
    inline
    disabledDates="{[
    {dayOfWeek: [0, 6]}, 
    {from: '12/24/2024', to: '12/26/2024'}, 
    '01/01/2025']}" 
    initialValue="12/20/2024"
/>
</App>  
```

%-PROP-END

%-EVENT-START didChange

Write in the input field and see how the `Text` underneath it is updated in parallel.

```xmlui-pg copy {2} display name="Example: didChange" height="520px"
<App var.field="(none)">
  <Text value="{field}" />
  <DatePicker 
    inline
    initialValue="{field}" 
    onDidChange="(val) => field = val" />
</App>
```

%-EVENT-END

%-EVENT-START gotFocus

Clicking on the `DatePicker` in the example demo changes the label text.
Note how clicking elsewhere resets the text to the original.

```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus" height="540px"
<App var.isFocused="false">
  <Text value="{isFocused === true 
    ? 'DatePicker focused' : 'DatePicker lost focus'}" 
  />
  <DatePicker
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false"
  />
</App>
```

%-EVENT-END


```

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

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

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

$width-navPanel-App: createThemeVar("width-navPanel-App");
$backgroundColor-navPanel-App: createThemeVar("backgroundColor-navPanel-App");
$boxShadow-header-App: createThemeVar("boxShadow-header-App");
$boxShadow-navPanel-App: createThemeVar("boxShadow-navPanel-App");
$backgroundColor-content-App: createThemeVar("backgroundColor-content-App");
$borderLeft-content-App: createThemeVar("borderLeft-content-App");
$maxWidth-content-App: createThemeVar("maxWidth-content-App");
$maxWidth-App: createThemeVar("maxWidth-App");
$backgroundColor-AppHeader: createThemeVar("backgroundColor-AppHeader");
$borderBottom-NavPanel: createThemeVar("borderBottom-AppHeader");
$scrollPaddingBlockPage: createThemeVar("scroll-padding-block-Pages");

// Variables for @layer section
$maxWidth-App: createThemeVar("maxWidth-App");

@layer components {
  @include t.withMaxScreenSize(0) {
    .wrapper.verticalFullHeader{
      .navPanelWrapper{
        display: none;
      }
    }
  }



  .wrapper {
    --footer-height: 0px;
    --header-height: 0px;
    width: 100%;
    height: 100%;
    position: relative; //leave it here, otherwise there could be double scrollbars because of the absolute positionings (typically radix's visuallyHidden)
    display: flex;
    flex-direction: column;
    isolation: isolate;

    &.vertical {
      flex-direction: row;
      overflow: initial;

      .contentWrapper {
        overflow: auto;
        scroll-padding-block: $scrollPaddingBlockPage;
        position: relative;
        scrollbar-gutter: stable both-edges;
      }
      &.noScrollbarGutters{
        .contentWrapper {
          scrollbar-gutter: auto;
        }
      }
      .navPanelWrapper {
        width: $width-navPanel-App;
        flex-shrink: 0;
      }

      .PagesWrapper {
        min-height: initial;
        flex: 1;
      }

      .footerWrapper {
        position: static;
      }
      &.sticky {
        .footerWrapper {
          position: sticky;
          bottom: 0;
        }
      }
    }

    &.horizontal {
      overflow: auto;
      scroll-padding-block: $scrollPaddingBlockPage;
      .PagesWrapper {
        min-height: initial;
      }
      .footerWrapper {
        position: static;
      }
      &.sticky {
        min-height: 100%;
        .footerWrapper {
          position: sticky;
          bottom: 0;
        }
      }
      .navPanelWrapper {
        border-bottom: $borderBottom-NavPanel;
        justify-content: end;
        background-color: $backgroundColor-navPanel-App;
      }
    }

    &.verticalFullHeader {
      min-height: 100%;
      height: 100%;
      overflow: auto;
      scroll-padding-block: $scrollPaddingBlockPage;
      .navPanelWrapper {
        width: $width-navPanel-App;
        position: sticky;
        height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
        top: var(--header-height);

        &::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          width: 50vw;
          z-index: -1;
          background-color: $backgroundColor-navPanel-App;
        }
      }
      .PagesWrapper {
        overflow: initial;
        min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
        height: 100%;
      }

      .PagesWrapperInner {
        height: 100%;
        & > :global(.xmlui-page-root) {
          height: 100%;
        }
      }

      .footerWrapper {
        position: sticky;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }

    &.scrollWholePage {
      scrollbar-gutter: stable both-edges;

      .headerWrapper {
        & > div {
          padding-inline: var(--scrollbar-width);
        }
        margin-inline: calc(-1 * var(--scrollbar-width));
      }

      .footerWrapper {
        margin-inline: calc(-1 * var(--scrollbar-width));
        & > div {
          padding-inline: var(--scrollbar-width);
        }
      }

      &.verticalFullHeader {
        .content {
          margin-inline: calc(-1 * var(--scrollbar-width));
          width: calc(100% + (2 * var(--scrollbar-width)));
        }
        .contentWrapper {
          padding-inline: var(--scrollbar-width);
        }
      }
    }

    &:not(.scrollWholePage) {
      overflow: hidden;
      .content {
        min-height: 0;
        height: 100%;
      }
      .contentWrapper {
        overflow: initial;
      }
      .PagesWrapper {
        overflow: auto;
        scroll-padding-block: $scrollPaddingBlockPage;
        min-height: 0;
        height: 100%;
        scrollbar-gutter: stable both-edges;
      }
      .PagesWrapperInner {
        min-height: 100%;
        height: 0;
      }
    }

    &.noScrollbarGutters {
      scrollbar-gutter: auto;
      .PagesWrapper{
        scrollbar-gutter: auto;
      }
    }
  }

  .headerWrapper {
    z-index: 1;
    //position: relative;
    min-height: 0;
    flex-shrink: 0;
    overflow-x: clip;
    top: 0;
    box-shadow: $boxShadow-header-App;
    background-color: $backgroundColor-AppHeader;
    &.sticky {
      position: sticky;
    }
  }

  .content {
    display: flex;
    flex-direction: row;
    isolation: isolate;
    align-self: center;
    width: 100%;
    max-width: $maxWidth-App;
  }

  .contentWrapper {
    position: relative;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: $boxShadow-navPanel-App;
    background-color: $backgroundColor-content-App;
    border-left: $borderLeft-content-App;
  }

  .navPanelWrapper {
    display: flex;
    position: sticky;
    top: 0;

    &:empty {
      display: none;
    }
  }

  .PagesWrapper {
    flex: 1;
    //display: flex;
    //flex-direction: column;
    //flex: 1;
    //min-height: 0;
    //width: 100%;
    isolation: isolate;
    //height: 100%;
    //overflow: auto;
  }

  .PagesWrapperInner {
    max-width: $maxWidth-content-App;
    width: 100%;
    margin: 0 auto;
    //flex: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    &.withDefaultContentPadding{
      padding-left: t.$space-4;
      padding-right: t.$space-4;
      padding-top: t.$space-5;
      padding-bottom: t.$space-5;
      gap: t.$space-5;
    }
  }

  .footerWrapper {
    flex-shrink: 0;
    //position: sticky;
    //bottom:  calc(-1 * var(--footer-height));
    //margin-bottom: calc(-1 * var(--footer-height));
  }
}


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

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

```markdown
# NavPanel [#navpanel]

`NavPanel` defines the navigation structure within an App, serving as a container for NavLink and NavGroup components that create your application's primary navigation menu. Its appearance and behavior automatically adapt based on the App's layout configuration.

**Key features:**

- **Layout adaptation**: Automatically positions navigation horizontally or vertically based on App layout
- **Navigation organization**: Contains NavLink and NavGroup components to build structured menus
- **Logo integration**: Supports custom logo templates in vertical layouts via logoTemplate property
- **Drawer mode**: Can optionally display navigation in a collapsible drawer interface
- **Theme integration**: Inherits styling from the app's theme system for consistent appearance

## Properties [#properties]

### `inDrawer` (default: false) [#indrawer-default-false]

This property determines if the navigation panel is displayed in a drawer.

### `logoTemplate` [#logotemplate]

This property defines the logo template to display in the navigation panel with the `vertical` and `vertical-sticky` layout.

```xmlui-pg copy {3-8} display name="Example: logoTemplate" height={250}
<App layout="vertical">
  <NavPanel>
    <property name="logoTemplate">
       <H3>
         <Icon name="drive" />
         DriveDiag (Nav)
       </H3>
    </property>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Page 1" to="/page1"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text value="Home" />
    </Page>
    <Page url="/page1">
      <Text value="Page 1" />
    </Page>
  </Pages>
</App>
```

## Events [#events]

This component does not have any events.

## 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)-NavPanel | $backgroundColor | $backgroundColor |
| [backgroundColor](../styles-and-themes/common-units/#color)-NavPanel-horizontal | $backgroundColor-AppHeader | $backgroundColor-AppHeader |
| [border](../styles-and-themes/common-units/#border)-NavPanel | 0px solid $borderColor | 0px solid $borderColor |
| [borderBottom](../styles-and-themes/common-units/#border)-NavPanel | *none* | *none* |
| [borderBottomColor](../styles-and-themes/common-units/#color)-NavPanel | *none* | *none* |
| [borderBottomStyle](../styles-and-themes/common-units/#border-style)-NavPanel | *none* | *none* |
| [borderBottomWidth](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-NavPanel | *none* | *none* |
| [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-NavPanel | *none* | *none* |
| [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-NavPanel | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-NavPanel | *none* | *none* |
| [borderHorizontalColor](../styles-and-themes/common-units/#color)-NavPanel | *none* | *none* |
| [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-NavPanel | *none* | *none* |
| [borderHorizontalWidth](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [borderLeft](../styles-and-themes/common-units/#border)-NavPanel | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-NavPanel | *none* | *none* |
| [borderLeftStyle](../styles-and-themes/common-units/#border-style)-NavPanel | *none* | *none* |
| [borderLeftWidth](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [borderRight](../styles-and-themes/common-units/#border)-NavPanel | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-NavPanel | *none* | *none* |
| [borderRightStyle](../styles-and-themes/common-units/#border-style)-NavPanel | *none* | *none* |
| [borderRightWidth](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-NavPanel | *none* | *none* |
| [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-NavPanel | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-NavPanel | *none* | *none* |
| [borderTop](../styles-and-themes/common-units/#border)-NavPanel | *none* | *none* |
| [borderTopColor](../styles-and-themes/common-units/#color)-NavPanel | *none* | *none* |
| [borderTopStyle](../styles-and-themes/common-units/#border-style)-NavPanel | *none* | *none* |
| [borderTopWidth](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-NavPanel | *none* | *none* |
| [borderVerticalColor](../styles-and-themes/common-units/#color)-NavPanel | *none* | *none* |
| [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-NavPanel | *none* | *none* |
| [borderVerticalWidth](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-NavPanel | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-NavPanel-vertical | 4px 0 4px 0 rgb(0 0 0 / 10%) | 4px 0 4px 0 rgb(0 0 0 / 10%) |
| [horizontalAlignment](../styles-and-themes/common-units/#alignment)-logo-NavPanel | center | center |
| [marginBottom](../styles-and-themes/common-units/#size)-logo-NavPanel | $space-4 | $space-4 |
| [padding](../styles-and-themes/common-units/#size)-logo-NavPanel | *none* | *none* |
| [padding](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [paddingBottom](../styles-and-themes/common-units/#size)-logo-NavPanel | *none* | *none* |
| [paddingBottom](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-logo-NavPanel | $space-4 | $space-4 |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-NavPanel | 0 | 0 |
| [paddingLeft](../styles-and-themes/common-units/#size)-logo-NavPanel | *none* | *none* |
| [paddingLeft](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [paddingRight](../styles-and-themes/common-units/#size)-logo-NavPanel | *none* | *none* |
| [paddingRight](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [paddingTop](../styles-and-themes/common-units/#size)-logo-NavPanel | *none* | *none* |
| [paddingTop](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |
| [paddingVertical](../styles-and-themes/common-units/#size)-logo-NavPanel | $space-4 | $space-4 |
| [paddingVertical](../styles-and-themes/common-units/#size)-NavPanel | *none* | *none* |

```

--------------------------------------------------------------------------------
/xmlui/scripts/extract-component-metadata.js:
--------------------------------------------------------------------------------

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

const componentsDir = path.join(__dirname, '..', 'src', 'components');

// Component directories to scan
const componentDirs = [
  'Accordion', 'APICall', 'App', 'AppHeader', 'AppState', 'AutoComplete', 'Avatar',
  'Backdrop', 'Badge', 'Bookmark', 'Breakout', 'Button', 'Card', 'Carousel', 
  'ChangeListener', 'Checkbox', 'CodeBlock', 'ColorPicker', 'Column', 'ContentSeparator',
  'DataSource', 'DateInput', 'DatePicker', 'DropdownMenu', 'EmojiSelector', 'ExpandableItem',
  'FileInput', 'FileUploadDropZone', 'FlowLayout', 'Footer', 'Form', 'FormItem', 'Fragment',
  'Heading', 'HoverCard', 'IFrame', 'Image', 'InspectButton', 'Items', 'Link', 'List',
  'Logo', 'Markdown', 'ModalDialog', 'NavGroup', 'NavLink', 'NavPanel', 'NestedApp',
  'NoResult', 'NumberBox', 'Option', 'PageMetaTitle', 'Pages', 'Pagination',
  'PositionedContainer', 'ProfileMenu', 'ProgressBar', 'Queue', 'RadioGroup',
  'RealTimeAdapter', 'Redirect', 'ResponsiveBar', 'Select', 'SelectionStore', 'Slider',
  'Slot', 'SpaceFiller', 'Spinner', 'Splitter', 'Stack', 'StickyBox', 'Switch', 'Table',
  'TableOfContents', 'Tabs', 'Text', 'TextArea', 'TextBox', 'Theme', 'TimeInput', 'Timer',
  'Toggle', 'ToneChangerButton', 'ToneSwitch', 'Tooltip', 'Tree', 'TreeDisplay',
  'ValidationSummary', 'Charts/AreaChart', 'Charts/BarChart', 'Charts/DonutChart',
  'Charts/LabelList', 'Charts/Legend', 'Charts/LineChart', 'Charts/PieChart', 'Charts/RadarChart'
];

const results = [];

// Function to check if SCSS file has unexposed theme variables
function hasUnexposedThemeVars(componentDir) {
  try {
    const files = fs.readdirSync(componentDir);
    const scssFiles = files.filter(f => f.endsWith('.scss') || f.endsWith('.module.scss'));
    
    for (const scssFile of scssFiles) {
      const scssPath = path.join(componentDir, scssFile);
      const content = fs.readFileSync(scssPath, 'utf8');
      
      // Find all @layer blocks and check if createThemeVar is called inside them
      if (hasCreateThemeVarInBlock(content, '@layer')) {
        return true;
      }
      
      // Find all @mixin blocks and check if createThemeVar is called inside them
      if (hasCreateThemeVarInBlock(content, '@mixin')) {
        return true;
      }
    }
  } catch (error) {
    // Ignore errors for directories that don't exist or can't be read
  }
  return false;
}

// Helper function to check if createThemeVar is called inside a specific block type
function hasCreateThemeVarInBlock(content, blockType) {
  const lines = content.split('\n');
  let insideBlock = false;
  let braceCount = 0;
  
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];
    
    // Check if we're entering a block
    if (new RegExp(`${blockType}\\s`).test(line)) {
      insideBlock = true;
    }
    
    if (insideBlock) {
      // Count braces
      const openBraces = (line.match(/\{/g) || []).length;
      const closeBraces = (line.match(/\}/g) || []).length;
      braceCount += openBraces - closeBraces;
      
      // Check if createThemeVar is called in this line
      if (/createThemeVar\s*\(/i.test(line)) {
        return true;
      }
      
      // If we've closed all braces, we're out of the block
      if (braceCount === 0 && openBraces > 0) {
        insideBlock = false;
      }
    }
  }
  
  return false;
}

// Function to extract metadata from a file
function extractMetadata(filePath, componentName) {
  try {
    const content = fs.readFileSync(filePath, 'utf8');
    
    // Find all createMetadata calls
    const metadataRegex = /export const (\w+Md) = createMetadata\(\{([\s\S]*?)\n\}\);/g;
    let match;
    
    while ((match = metadataRegex.exec(content)) !== null) {
      const mdName = match[1];
      const mdContent = match[2];
      
      // Extract component name from metadata name (e.g., ButtonMd -> Button)
      const name = mdName.replace(/Md$/, '');
      
      // Check if it has validationStatus in props
      const hasValidationStatus = mdContent.includes('validationStatus:');
      
      // Extract parts - improved to handle nested braces
      let parts = [];
      let defaultPart = null;
      
      const partsStartIdx = mdContent.indexOf('parts: {');
      if (partsStartIdx !== -1) {
        let braceCount = 0;
        let partsEndIdx = -1;
        let startIdx = partsStartIdx + 'parts: {'.length - 1; // start at the opening brace
        
        for (let i = startIdx; i < mdContent.length; i++) {
          if (mdContent[i] === '{') braceCount++;
          else if (mdContent[i] === '}') {
            braceCount--;
            if (braceCount === 0) {
              partsEndIdx = i;
              break;
            }
          }
        }
        
        if (partsEndIdx !== -1) {
          const partsContent = mdContent.substring(startIdx + 1, partsEndIdx);
          // Match part names - look for word followed by : and then { (part definition)
          // This ensures we only get part names, not properties within parts like "description"
          const partMatches = partsContent.match(/^\s*(\w+)\s*:\s*\{/gm);
          if (partMatches) {
            parts = partMatches.map(p => p.trim().replace(/:\s*\{$/, '').trim());
          }
        }
      }
      
      // Extract defaultPart
      const defaultPartMatch = mdContent.match(/defaultPart:\s*["'](\w+)["']/);
      if (defaultPartMatch) {
        defaultPart = defaultPartMatch[1];
      }
      
      // Get the directory of the component file to check for SCSS
      const componentDir = path.dirname(filePath);
      const hasUnexposedVars = hasUnexposedThemeVars(componentDir);
      
      results.push({
        name,
        hasValidationStatus,
        parts: parts.length > 0 ? parts : null,
        hasUnexposedThemeVars: hasUnexposedVars
      });
    }
  } catch (error) {
    // Ignore errors for files that don't exist
  }
}

// Scan all component directories
componentDirs.forEach(dir => {
  const fullPath = path.join(componentsDir, dir);
  
  // Try to find the main component file
  const baseName = dir.split('/').pop();
  const possibleFiles = [
    path.join(fullPath, `${baseName}.tsx`),
    path.join(fullPath, `${baseName}Component.tsx`),
  ];
  
  possibleFiles.forEach(filePath => {
    if (fs.existsSync(filePath)) {
      extractMetadata(filePath, baseName);
    }
  });
});

// Also check for special files
const specialFiles = [
  'DropdownMenu/DropdownMenu.tsx', // has multiple components
  'Carousel/CarouselItem.tsx',
  'RadioGroup/RadioItem.tsx',
  'Tabs/TabItem.tsx',
  'FormSection/FormSection.tsx',
];

specialFiles.forEach(file => {
  const filePath = path.join(componentsDir, file);
  const baseName = path.basename(file, '.tsx');
  extractMetadata(filePath, baseName);
});

// Sort by component name
results.sort((a, b) => a.name.localeCompare(b.name));

// Output as JSON
console.log(JSON.stringify(results, null, 2));

```

--------------------------------------------------------------------------------
/xmlui/src/components/FileInput/FileInputNative.tsx:
--------------------------------------------------------------------------------

```typescript
import type React from "react";
import { type CSSProperties, useCallback, useEffect, useId, useRef, useState } from "react";
import type { DropzoneRootProps } from "react-dropzone";
import * as dropzone from "react-dropzone";
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
import classnames from "classnames";

import styles from "./FileInput.module.scss";

import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
import { noop } from "../../components-core/constants";
import { useEvent } from "../../components-core/utils/misc";
import type { ValidationStatus } from "../abstractions";
import type { ButtonThemeColor, ButtonVariant, SizeType, IconPosition } from "../abstractions";
import { Button } from "../Button/ButtonNative";
import { TextBox } from "../TextBox/TextBoxNative";

// https://github.com/react-dropzone/react-dropzone/issues/1259
const { useDropzone } = dropzone;

// ============================================================================
// React FileInput component implementation

type Props = {
  // General
  id?: string;
  enabled?: boolean;
  style?: CSSProperties;
  className?: string;
  // Button styles
  buttonLabel?: string;
  variant?: ButtonVariant;
  buttonThemeColor?: ButtonThemeColor;
  buttonSize?: SizeType;
  buttonIcon?: React.ReactNode;
  buttonIconPosition?: IconPosition;
  // Input props
  updateState?: UpdateStateFn;
  onDidChange?: (newValue: File[]) => void;
  onFocus?: () => void;
  onBlur?: () => void;
  registerComponentApi?: RegisterComponentApiFn;
  validationStatus?: ValidationStatus;
  autoFocus?: boolean;
  // Component-specific props
  value?: any;
  initialValue?: any;
  acceptsFileType?: string | string[];
  multiple?: boolean;
  directory?: boolean;
  required?: boolean;
  placeholder?: string;
  buttonPosition?: "start" | "end";
};

export const defaultProps: Pick<
  Props,
  | "enabled"
  | "buttonPosition"
  | "buttonLabel"
  | "multiple"
  | "directory"
  | "updateState"
  | "onDidChange"
  | "onFocus"
  | "onBlur"
  | "buttonThemeColor"
> = {
  enabled: true,
  buttonPosition: "end",
  buttonLabel: "Browse",
  multiple: false,
  directory: false,
  buttonThemeColor: "primary",
  updateState: noop,
  onDidChange: noop,
  onFocus: noop,
  onBlur: noop,
};

export const FileInput = ({
  id,
  enabled = defaultProps.enabled,
  style,
  className,
  placeholder,
  buttonPosition = defaultProps.buttonPosition,
  buttonLabel = defaultProps.buttonLabel,
  buttonIcon,
  buttonIconPosition,
  variant,
  buttonThemeColor,
  buttonSize,

  autoFocus,
  validationStatus,
  updateState = defaultProps.updateState,
  onDidChange = defaultProps.onDidChange,
  onFocus = defaultProps.onFocus,
  onBlur = defaultProps.onBlur,
  registerComponentApi,
  value,
  initialValue,
  acceptsFileType,
  multiple = defaultProps.multiple,
  directory = defaultProps.directory,
  required,
  ...rest
}: Props) => {
  const _id = useId();
  id = id || _id;
  // Don't accept any (initial) value if it is not a File array explicitly
  const _initialValue: File[] | undefined = isFileArray(initialValue) ? initialValue : undefined;
  const _value: File[] | undefined = isFileArray(value) ? value : undefined;

  const buttonRef = useRef<HTMLButtonElement>(null);
  const _acceptsFileType =
    typeof acceptsFileType === "string" ? acceptsFileType : acceptsFileType?.join(",");

  useEffect(() => {
    if (autoFocus) {
      setTimeout(() => {
        buttonRef.current?.focus();
      }, 0);
    }
  }, [autoFocus]);

  // --- Initialize the related field with the input's initial value
  useEffect(() => {
    updateState({ value: _initialValue }, { initial: true });
  }, [_initialValue, updateState]);

  // --- Manage obtaining and losing the focus
  const handleOnFocus = useCallback((e: React.FocusEvent) => {
    // Only fire onFocus if focus is coming from outside the component
    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
      onFocus?.();
    }
  }, [onFocus]);

  const handleOnBlur = useCallback((e: React.FocusEvent) => {
    // Only fire onBlur if focus is leaving the component entirely
    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
      onBlur?.();
    }
  }, [onBlur]);

  const focus = useCallback(() => {
    buttonRef.current?.focus();
  }, []);

  // --- Handle the value change events for this input
  const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      if (!acceptedFiles.length) return;
      updateState({ value: acceptedFiles });
      onDidChange(acceptedFiles);
    },
    [updateState, onDidChange],
  );

  const { getRootProps, getInputProps, open } = useDropzone({
    disabled: !enabled,
    multiple: multiple || directory,
    onDrop,
    noClick: true,
    noKeyboard: true,
    noDragEventsBubbling: true,
    useFsAccessApi: directory === false,
  });

  const doOpen = useEvent(() => {
    open();
  });

  useEffect(() => {
    registerComponentApi?.({
      focus,
      open: doOpen,
    });
  }, [focus, doOpen, registerComponentApi]);

  // Solution source: https://stackoverflow.com/questions/1084925/input-type-file-show-only-button
  return (
      <div
        className={classnames(styles.container, className, {
          [styles.buttonStart]: buttonPosition === "start",
          [styles.buttonEnd]: buttonPosition === "end",
        })}
        style={style}
        onFocus={handleOnFocus}
        onBlur={handleOnBlur}
        tabIndex={-1}
        {...rest}
      >
        <button
          id={id}
          {...getRootProps({
            tabIndex: 0,
            disabled: !enabled,
            className: styles.textBoxWrapper,
            onClick: open,
            ref: buttonRef,
            type: "button",
          })}
        >
          <VisuallyHidden.Root>
            <input
              {...getInputProps({
                webkitdirectory: directory ? "true" : undefined,
              } as DropzoneRootProps)}
              accept={_acceptsFileType}
            />
          </VisuallyHidden.Root>

          <TextBox
            placeholder={placeholder}
            enabled={enabled}
            value={_value?.map((v) => v.name).join(", ") || ""}
            validationStatus={validationStatus}
            readOnly
            tabIndex={-1}
          />
        </button>
        <Button
          disabled={!enabled}
          type="button"
          onClick={open}
          icon={buttonIcon}
          iconPosition={buttonIconPosition}
          variant={variant}
          themeColor={buttonThemeColor}
          size={buttonSize}
          className={styles.button}
          autoFocus={autoFocus}
        >
          {buttonLabel}
        </Button>
      </div>
  );
};

export function isFile(value: any): value is File {
  return value instanceof File;
}

export function isFileArray(value: any): value is File[] {
  return Array.isArray(value) && value.every(isFile);
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/DatePicker/DatePicker.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./DatePicker.module.scss";

import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import {
  createMetadata,
  dAutoFocus,
  dDidChange,
  dEnabled,
  dEndIcon,
  dEndText,
  dGotFocus,
  dInitialValue,
  dLostFocus,
  dPlaceholder,
  dReadonly,
  dStartIcon,
  dStartText,
  dValidationStatus,
} from "../metadata-helpers";
import {
  dateFormats,
  DatePicker,
  DatePickerModeValues,
  defaultProps,
  WeekDays,
} from "./DatePickerNative";

const COMP = "DatePicker";

export const DatePickerMd = createMetadata({
  status: "experimental",
  description:
    "`DatePicker` provides an interactive calendar interface for selecting single dates " +
    "or date ranges, with customizable formatting and validation options. It displays " +
    "a text input that opens a calendar popup when clicked, offering both keyboard and " +
    "mouse interaction.",
  props: {
    placeholder: dPlaceholder(),
    initialValue: dInitialValue(),
    autoFocus: dAutoFocus(),
    readOnly: dReadonly(),
    enabled: dEnabled(defaultProps.enabled),
    validationStatus: dValidationStatus(defaultProps.validationStatus),
    mode: {
      description: "The mode of the datepicker (single or range)",
      valueType: "string",
      availableValues: DatePickerModeValues,
      defaultValue: defaultProps.mode,
    },
    dateFormat: {
      description: "The format of the date displayed in the input field",
      valueType: "string",
      defaultValue: defaultProps.dateFormat,
      availableValues: dateFormats,
    },
    showWeekNumber: {
      description: "Whether to show the week number in the calendar",
      valueType: "boolean",
      defaultValue: defaultProps.showWeekNumber,
    },
    weekStartsOn: {
      description: "The first day of the week. 0 is Sunday, 1 is Monday, etc.",
      valueType: "number",
      defaultValue: defaultProps.weekStartsOn,
      availableValues: [
        {
          value: WeekDays.Sunday,
          description: "Sunday",
        },
        {
          value: WeekDays.Monday,
          description: "Monday",
        },
        {
          value: WeekDays.Tuesday,
          description: "Tuesday",
        },
        {
          value: WeekDays.Wednesday,
          description: "Wednesday",
        },
        {
          value: WeekDays.Thursday,
          description: "Thursday",
        },
        {
          value: WeekDays.Friday,
          description: "Friday",
        },
        {
          value: WeekDays.Saturday,
          description: "Saturday",
        },
      ],
    },
    startDate: {
      description:
        "The earliest month to start the month navigation from (inclusive). " +
        "If not defined, the component allows any dates in the past. " +
        "Accepts the same date format as the `initialValue`." +
        "Example: '2023-01-01' ensures the first month to select a date from is January 2023.",
      valueType: "string",
    },
    endDate: {
      description:
        "The latest month to start the month navigation from (inclusive). " +
        "If not defined, the component allows any future dates. " +
        "Accepts the same date format as the `initialValue`." +
        "Example: '2023-12-31' ensures the last month to select a date from is December 2023.",
      valueType: "string",
    },
    disabledDates: {
      description: "An optional array of dates that are to be disabled.",
      valueType: "any",
    },
    inline: {
      description:
        "If set to true, the calendar is always visible and its panel is rendered as part of the layout." +
        " If false, the calendar is shown in a popup when the input is focused or clicked.",
      valueType: "boolean",
      defaultValue: defaultProps.inline,
    },
    startText: dStartText(),
    startIcon: dStartIcon(),
    endText: dEndText(),
    endIcon: dEndIcon(),
  },
  events: {
    didChange: dDidChange(COMP),
    gotFocus: dGotFocus(COMP),
    lostFocus: dLostFocus(COMP),
  },
  apis: {
    focus: {
      description: `Focus the ${COMP} component.`,
      signature: "focus(): void",
    },
    value: {
      description: `You can query the component's value. If no value is set, it will retrieve \`undefined\`.`,
      signature: "get value(): any",
    },
    setValue: {
      description: `This method sets the current value of the ${COMP}.`,
      signature: "set value(value: any): void",
      parameters: {
        value: "The new value to set for the date picker.",
      },
    },
  },
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
    [`borderRadius-menu-${COMP}`]: "$borderRadius",
    [`textColor-value-${COMP}`]: "$textColor-primary",
    [`borderColor-selectedItem-${COMP}`]: "$color-primary-200",
    [`backgroundColor-menu-${COMP}`]: "$color-surface-50",
    [`backgroundColor-item-${COMP}--hover`]: "$color-surface-100",
    [`backgroundColor-item-${COMP}--active`]: "$color-surface-200",
    [`paddingVertical-${COMP}`]: "$space-2",
    [`paddingHorizontal-${COMP}`]: "$space-2",
  },
});

export const datePickerComponentRenderer = createComponentRenderer(
  COMP,
  DatePickerMd,
  ({
    node,
    state,
    updateState,
    extractValue,
    className,
    lookupEventHandler,
    registerComponentApi,
  }) => {
    return (
      <DatePicker
        className={className}
        mode={extractValue(node.props?.mode)}
        value={state?.value}
        initialValue={extractValue(node.props.initialValue)}
        enabled={extractValue.asOptionalBoolean(node.props.enabled)}
        placeholder={extractValue.asOptionalString(node.props.placeholder)}
        validationStatus={extractValue(node.props.validationStatus)}
        updateState={updateState}
        onDidChange={lookupEventHandler("didChange")}
        onFocus={lookupEventHandler("gotFocus")}
        onBlur={lookupEventHandler("lostFocus")}
        registerComponentApi={registerComponentApi}
        dateFormat={extractValue(node.props.dateFormat)}
        showWeekNumber={extractValue.asOptionalBoolean(node.props.showWeekNumber)}
        weekStartsOn={extractValue(node.props.weekStartsOn)}
        startDate={extractValue(node.props.startDate)}
        endDate={extractValue(node.props.endDate)}
        disabledDates={extractValue(node.props.disabledDates)}
        inline={extractValue.asOptionalBoolean(node.props.inline)}
        startText={extractValue.asOptionalString(node.props.startText)}
        startIcon={extractValue.asOptionalString(node.props.startIcon)}
        endText={extractValue.asOptionalString(node.props.endText)}
        endIcon={extractValue.asOptionalString(node.props.endIcon)}
        readOnly={extractValue.asOptionalBoolean(node.props.readOnly)}
        autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
      />
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/src/components/Card/Card.spec.ts:
--------------------------------------------------------------------------------

```typescript
import { getBounds, SKIP_REASON } from "../../testing/component-test-helpers";
import { expect, test } from "../../testing/fixtures";

// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================

test.describe("Basic Functionality", () => {
  test("Card renders", async ({ initTestBed, createCardDriver }) => {
    await initTestBed(`<Card />`);
    const driver = await createCardDriver();
    await expect(driver.component).toBeVisible();
  });

  test("Card renders with title", async ({ initTestBed, createCardDriver }) => {
    await initTestBed(`<Card title="Test Title" />`);
    const title = (await createCardDriver()).component.getByRole("heading");
    await expect(title).toBeVisible();
    await expect(title).toHaveText("Test Title");
  });

  test("Card renders with subtitle", async ({ initTestBed, createCardDriver }) => {
    await initTestBed(`<Card subtitle="Test Subtitle" />`);
    const subtitle = (await createCardDriver()).component.locator("div").first();
    await expect(subtitle).toBeVisible();
    await expect(subtitle).toHaveText("Test Subtitle");
  });

  test("Card renders with both title and subtitle", async ({ initTestBed, createCardDriver }) => {
    await initTestBed(`
      <Card title="Test Title" subtitle="Test Subtitle">
        <Text value="Card content" />
      </Card>
    `);
    const driver = await createCardDriver();
    const title = driver.component.getByRole("heading");
    const subtitle = driver.component.getByText("Test Subtitle");

    await expect(title).toHaveText("Test Title");
    await expect(subtitle).toBeVisible();
  });

  test("displays avatar when avatarUrl is provided", async ({ initTestBed, createCardDriver }) => {
    await initTestBed(`<Card avatarUrl="/resources/flower-640x480.jpg" />`);
    const avatar = (await createCardDriver()).avatar;
    await expect(avatar).toBeVisible();
    await expect(avatar).toHaveAttribute("src", "/resources/flower-640x480.jpg");
  });

  test("clicking linkTo title navigates", async ({ page, initTestBed, createCardDriver }) => {
    await initTestBed(`<Card title="Clickable Title" linkTo="/test-link" />`);
    const titleLink = (await createCardDriver()).component.getByRole("link", {
      name: "Clickable Title",
    });
    await titleLink.click();
    await expect(page).toHaveURL(/\/test-link$/);
  });

  test("showAvatar=false hides avatar even when avatarUrl is provided", async ({
    initTestBed,
    createCardDriver,
  }) => {
    await initTestBed(`
      <Card avatarUrl="https://i.pravatar.cc/100" showAvatar="false" title="Test Title" />
    `);
    const driver = await createCardDriver();
    await expect(driver.avatar).not.toBeVisible();
    await expect(driver.component.getByText("Test Title")).toBeVisible();
  });

  test("showAvatar displays initials with single word title", async ({
    initTestBed,
    createCardDriver,
  }) => {
    await initTestBed(`<Card showAvatar="true" title="John" />`);
    await expect(
      (await createCardDriver()).component.getByText("J", { exact: true }),
    ).toBeVisible();
  });

  test("showAvatar=true with empty title displays no initials", async ({
    initTestBed,
    createCardDriver,
  }) => {
    await initTestBed(`<Card showAvatar="true" />`);
    const avatar = (await createCardDriver()).avatar;
    await expect(avatar).toHaveText(/^$/);
  });

  test("linkTo without title does not create link", async ({ initTestBed, createCardDriver }) => {
    await initTestBed(`
      <Card linkTo="/test-link">
        <Text value="Content" />
      </Card>
    `);
    const driver = await createCardDriver();
    await expect(driver.component.getByRole("link")).not.toBeVisible();
    await expect(driver.component.getByText("Content")).toBeVisible();
  });

  test("orientation horizontal displays children in row", async ({
    initTestBed,
    createTextDriver,
  }) => {
    await initTestBed(`
      <Card orientation="horizontal">
        <Text testId="text-1" value="Child 1" />
        <Text testId="text-2" value="Child 2" />
      </Card>
    `);
    const text1Driver = await createTextDriver("text-1");
    const text2Driver = await createTextDriver("text-2");

    const { right: text1Right } = await getBounds(text1Driver);
    const { right: text2Left } = await getBounds(text2Driver);
    expect(text1Right).toBeLessThan(text2Left);
  });

  test("orientation vertical displays children in column", async ({
    initTestBed,
    createTextDriver,
  }) => {
    await initTestBed(`
      <Card orientation="vertical">
        <Text testId="text-1" value="Child 1" />
        <Text testId="text-2" value="Child 2" />
      </Card>
    `);
    const text1Driver = await createTextDriver("text-1");
    const text2Driver = await createTextDriver("text-2");

    const { bottom: text1Bottom } = await getBounds(text1Driver);
    const { top: text2Top } = await getBounds(text2Driver);
    expect(text1Bottom).toBeLessThan(text2Top);
  });
});

// =============================================================================
// EVENT HANDLING TESTS
// =============================================================================

test.describe("Event Handling", () => {
  test("click event is triggered when Card is clicked", async ({
    initTestBed,
    createCardDriver,
  }) => {
    const { testStateDriver } = await initTestBed(`<Card onClick="testState = true" />`);
    await (await createCardDriver()).click();
    await expect.poll(testStateDriver.testState).toEqual(true);
  });

  test("Card click does not interfere with link click", async ({
    page,
    initTestBed,
    createCardDriver,
    createTextDriver,
  }) => {
    await initTestBed(`
      <Card title="Title" linkTo="/test-link" onClick="testState = true">
        <Text testId="text-1" when="{testState}" value="visible" />
      </Card>
    `);
    const cardDriver = await createCardDriver();
    const textDriver = await createTextDriver("text-1");

    await cardDriver.click();
    await expect(textDriver.component).toHaveText("visible");
    await expect(page).not.toHaveURL(/\/test-link$/);
  });

  test("Link click does not interfere with Card click", async ({
    page,
    initTestBed,
    createCardDriver,
    createTextDriver,
  }) => {
    const { testStateDriver } = await initTestBed(`
      <Card title="Title" linkTo="/test-link" onClick="testState = true">
        <Text testId="text-1" when="{testState}" value="visible" />
      </Card>
    `);

    const textDriver = await createTextDriver("text-1");
    const title = (await createCardDriver()).component.getByRole("heading");

    await expect(textDriver.component).not.toBeVisible();
    await title.click();
    await page.waitForTimeout(200);
    await expect(page).toHaveURL(/\/test-link$/);
    await expect(textDriver.component).toBeVisible();
  });
});

```

--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/HeroSection/HeroSection.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./HeroSection.module.scss";

import { createComponentRenderer, createMetadata, dComponent, d, parseScssVar } from "xmlui";
import { HeroSection, defaultProps } from "./HeroSectionNative";

const COMP = "HeroSection";

export const HeroSectionMd = createMetadata({
  status: "experimental",
  description: "HeroSection",
  parts: {
    header: {
      description: "The header section containing all text content and CTA button",
    },
    content: {
      description: "The content section containing image and children",
    },
    headingSection: {
      description: "The heading section containing preamble, headline, and subheadline",
    },
    preamble: {
      description: "The preamble text for the hero section",
    },
    headline: {
      description: "The headline text for the hero section",
    },
    subheadline: {
      description: "The subheadline text for the hero section",
    },
    mainText: {
      description: "The main text content for the hero section",
    },
    ctaButton: {
      description: "The call-to-action button for the hero section",
    },
    image: {
      description: "The image for the hero section",
    },
    background: {
      description: "The background template area of the hero section",
    },
  },
  props: {
    headerAlignment: {
      description: "Alignment of the header content",
      type: "string",
      defaultValue: "center",
      options: ["start", "center", "end"],
    },
    contentPlacement: {
      description: "Position of the content area relative to the header",
      type: "string", 
      defaultValue: defaultProps.contentPlacement,
      options: ["left", "right", "bottom"],
    },
    contentAlignment: {
      description: "Horizontal alignment of the content within its area",
      type: "string",
      defaultValue: defaultProps.contentAlignment,
      options: ["start", "center", "end"],
    },
    headerWidth: {
      description: "Width of the header section in horizontal layouts",
      type: "string",
      defaultValue: defaultProps.headerWidth,
    },
    contentWidth: {
      description: "Width of the hero content (header + content sections)",
      type: "string",
      defaultValue: defaultProps.contentWidth,
    },
    gap: {
      description: "Gap between header and content sections",
      type: "string",
    },
    preamble: {
      description: "The preamble text for the hero section",
      type: "string",
    },
    headline: {
      description: "The headline text for the hero section",
      type: "string",
    },
    subheadline: {
      description: "The subheadline text for the hero section",
      type: "string",
    },
    mainText: {
      description: "The main text content for the hero section",
      type: "string",
    },
    mainTextTemplate: dComponent("The template for the text content in the hero section"),
    ctaButtonIcon: {
      description: "The icon for the call-to-action button",
      type: "string",
    },
    ctaButtonText: {
      description: "The text for the call-to-action button",
      type: "string",
    },
    ctaButtonTemplate: dComponent("The template for the call-to-action button"),
    fullWidthBackground: {
      description: "Whether the background should span the full width of the viewport",
      type: "boolean",
      defaultValue: defaultProps.fullWidthBackground,
    },
    image: {
      description: "The image for the hero section",
      type: "string",
    },
    imageWidth: {
      description: "The width of the image",
      type: "string",
    },
    imageHeight: {
      description: "The height of the image",
      type: "string",
    },
    backgroundTemplate: dComponent("The template for the background of the hero section"),
    headerTone: {
      description: "The tone for the header section, affecting text colors",
      type: "string",
      options: ["light", "dark", "reverse"],
      defaultValue: "dark",
    },
    contentTone: {
      description: "The tone for the content section, affecting text colors",
      type: "string",
      options: ["light", "dark", "reverse"],
      defaultValue: "dark",
    },
    className: d("Additional CSS class names to apply to the hero section", undefined, "string"),
  },
  events: {
    ctaClick: d("Triggered when the call-to-action button is clicked"),
  },
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    [`paddingTop-${COMP}`]: "$space-12",
    [`paddingBottom-${COMP}`]: "$space-12",
    [`paddingHorizontal-${COMP}`]: "$space-12",
    [`fontSize-headline-${COMP}`]: "3em",
    [`fontWeight-headline-${COMP}`]: "$fontWeight-bold",
    [`lineHeight-headline-${COMP}`]: "1.4em",
    [`gap-headline-${COMP}`]: "$space-8",
    [`fontSize-subheadline-${COMP}`]: "2em",
    [`lineHeight-subheadline-${COMP}`]: "1.1em",
    [`fontWeight-subheadline-${COMP}`]: "$fontWeight-bold",
    [`gap-subheadline-${COMP}`]: "$space-4",
    [`fontSize-mainText-${COMP}`]: "1.4em",
    [`lineHeight-mainText-${COMP}`]: "1.1em",
    [`gap-mainText-${COMP}`]: "$space-4",
    [`textColor-preamble-${COMP}`]: "$textColor-primary",
    [`textColor-headline-${COMP}`]: "$textColor-primary",
    [`textColor-subheadline-${COMP}`]: "$textColor-primary",
    [`textColor-mainText-${COMP}`]: "$textColor-primary",
  },
});

export const heroSectionComponentRenderer = createComponentRenderer(
  COMP,
  HeroSectionMd,
  ({ node, extractValue, renderChild, lookupEventHandler, className }) => {
    const props = (node.props as typeof HeroSectionMd.props)!;
    return (
      <HeroSection
        headerAlignment={extractValue(props.headerAlignment)}
        contentPlacement={extractValue(props.contentPlacement)}
        contentAlignment={extractValue(props.contentAlignment)}
        headerWidth={extractValue(props.headerWidth)}
        contentWidth={extractValue(props.contentWidth)}
        headerTone={extractValue(props.headerTone)}
        contentTone={extractValue(props.contentTone)}
        gap={extractValue(props.gap)}
        preamble={extractValue(props.preamble)}
        headline={extractValue(props.headline)}
        subheadline={extractValue(props.subheadline)}
        mainText={extractValue(props.mainText)}
        mainTextTemplate={renderChild(props.mainTextTemplate as any)}
        ctaButtonIcon={extractValue(props.ctaButtonIcon)}
        ctaButtonText={extractValue(props.ctaButtonText)}
        ctaButtonTemplate={renderChild(props.ctaButtonTemplate as any)}
        image={extractValue(props.image)}
        imageWidth={extractValue(props.imageWidth)}
        imageHeight={extractValue(props.imageHeight)}
        fullWidthBackground={extractValue.asOptionalBoolean(props.fullWidthBackground)}
        className={extractValue(className)}
        onCtaClick={lookupEventHandler("ctaClick")}
        backgroundTemplate={renderChild(props.backgroundTemplate as any)}
      >
        {renderChild(node.children)}
      </HeroSection>
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/AppWithCodeViewNative.tsx:
--------------------------------------------------------------------------------

```typescript
import { type ReactNode, useCallback, useRef, useState } from "react";
import { IndexAwareNestedApp } from "./NestedAppNative";
import { Markdown } from "../Markdown/Markdown";
import type { ThemeTone } from "../../abstractions/ThemingDefs";
import { Button } from "../Button/ButtonNative";
import styles from "./NestedApp.module.scss";
import { Tooltip } from "./Tooltip";
import { RxOpenInNewWindow } from "react-icons/rx";
import { LiaUndoAltSolid } from "react-icons/lia";
import { createQueryString, withoutTrailingSlash } from "./utils";
import { useAppContext } from "../../components-core/AppContext";
import classnames from "classnames";
import Logo from "./logo.svg?react";
import { useTheme } from "../../components-core/theming/ThemeContext";

type AppWithCodeViewNativeProps = {
  // Markdown content to display in the left column
  markdown: string;
  // Display layout in side-by-side mode (horizontal) when true,
  // or stacked (vertical) when false or undefined
  splitView?: boolean;
  // Indicates that the split view should initially show the code
  initiallyShowCode?: boolean;
  // Optional URL for the playground pop-out
  popOutUrl?: string;
  api?: any;
  app: string;
  components?: any[];
  config?: any;
  activeTone?: ThemeTone;
  activeTheme?: string;
  title?: string;
  height?: string | number;
  allowPlaygroundPopup?: boolean;
  withFrame?: boolean;
  noHeader?: boolean;
  immediate?: boolean;
  withSplashScreen?: boolean;
  closeButton?: ReactNode;
  controlsWidth?: string | number;
};

/**
 * A component that displays markdown content on the left and a NestedApp on the right
 */
export function AppWithCodeViewNative({
  markdown,
  splitView,
  withFrame = true,
  noHeader = false,
  initiallyShowCode = false,
  popOutUrl,
  app,
  api,
  components = [],
  config,
  activeTone,
  activeTheme,
  title,
  height,
  allowPlaygroundPopup,
  withSplashScreen,
  immediate,
  closeButton = null,
  controlsWidth,
}: AppWithCodeViewNativeProps): ReactNode {
  const [showCode, setShowCode] = useState(initiallyShowCode);
  const appContext = useAppContext();
  const [refreshVersion, setRefreshVersion] = useState(0);
  const { activeTheme: currentTheme, activeThemeTone, activeThemeId } = useTheme();

  const safePopOutUrl = withoutTrailingSlash(
    popOutUrl || appContext?.appGlobals?.popOutUrl || "https://playground.xmlui.org/#/playground",
  );
  const openPlayground = useCallback(async () => {
    const data = {
      standalone: {
        app,
        components,
        config: {
          name: title,
          themes: [currentTheme],
          defaultTheme: activeTheme,
        },
        api: api,
      },
      options: {
        fixedTheme: false,
        swapped: false,
        previewMode: false,
        orientation: "horizontal",
        activeTheme: activeThemeId || activeTheme,
        activeTone: activeTone || activeThemeTone,
        content: "app",
      },
    };
    const appQueryString = await createQueryString(JSON.stringify(data));
    window.open(`${safePopOutUrl}/#${appQueryString}`, "_blank");
  }, [app, components, title, activeTheme, api, activeTone, safePopOutUrl]);

  if (withFrame) {
    return (
      <>
        {!!markdown && !splitView && <Markdown>{markdown}</Markdown>}
        <div className={styles.nestedAppContainer} style={{ height }}>
          {!noHeader && (
            <div className={styles.header}>
              {!splitView && <span className={styles.headerText}>{title}</span>}
              {splitView && (
                <>
                  <div className={styles.wrapper} style={{ width: controlsWidth }}>
                    <Logo className={styles.logo} />
                  </div>
                  <div className={styles.viewControls}>
                    <Button
                      onClick={() => setShowCode(true)}
                      className={classnames(styles.splitViewButton, {
                        [styles.show]: showCode,
                        [styles.hide]: !showCode,
                      })}
                    >
                      XML
                    </Button>
                    <Button
                      onClick={() => setShowCode(false)}
                      className={classnames(styles.splitViewButton, {
                        [styles.show]: !showCode,
                        [styles.hide]: showCode,
                      })}
                    >
                      UI
                    </Button>
                  </div>
                </>
              )}
              <div className={styles.wrapper} style={{ width: controlsWidth }}>
                {allowPlaygroundPopup && (
                  <Tooltip
                    trigger={
                      <button
                        className={styles.headerButton}
                        onClick={() => {
                          void openPlayground();
                        }}
                      >
                        <RxOpenInNewWindow />
                      </button>
                    }
                    label="View and edit in new full-width window"
                  />
                )}
                <Tooltip
                  trigger={
                    <button
                      className={styles.headerButton}
                      onClick={() => {
                        setShowCode(false);
                        setRefreshVersion(refreshVersion + 1);
                      }}
                    >
                      <LiaUndoAltSolid />
                    </button>
                  }
                  label="Reset the app"
                />
                {closeButton}
              </div>
            </div>
          )}
          <div className={styles.contentContainer}>
            <Markdown
              className={classnames(styles.splitViewMarkdown, { [styles.hidden]: !showCode })}
            >
              {markdown}
            </Markdown>
            <IndexAwareNestedApp
              className={classnames({ [styles.hidden]: showCode })}
              height="100%"
              app={app}
              api={api}
              components={components}
              config={config}
              activeTone={activeTone}
              activeTheme={activeTheme}
              refreshVersion={refreshVersion}
              withSplashScreen={withSplashScreen}
              immediate={immediate}
            />
          </div>
        </div>
      </>
    );
  }
  return (
    <>
      {!!markdown && <Markdown>{markdown}</Markdown>}
      <IndexAwareNestedApp
        height={height}
        app={app}
        api={api}
        components={components}
        config={config}
        activeTone={activeTone}
        activeTheme={activeTheme}
        refreshVersion={refreshVersion}
        withSplashScreen={withSplashScreen}
        immediate={immediate}
      />
    </>
  );
}

/**
 * Export a named default for easier imports
 */
export default AppWithCodeViewNative;

```

--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/FancyButton/FancyButton.module.scss:
--------------------------------------------------------------------------------

```scss
// FancyButton.module.scss
@use "../../../../xmlui/src/components-core/theming/themes" as t;

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

// Define theme variables
$component: "FancyButton";
$fontSize-FancyButton: createThemeVar("fontSize-#{$component}");
$fontWeight-FancyButton: createThemeVar("fontWeight-#{$component}");
$textColor-FancyButton: createThemeVar("textColor-#{$component}");
$gap-FancyButton: createThemeVar("gap-#{$component}");
$borderStyle-FancyButton: createThemeVar("borderStyle-#{$component}");
$borderWidth-FancyButton: createThemeVar("borderWidth-#{$component}");
$outlineColor-FancyButton--focus: createThemeVar("outlineColor-#{$component}--focus");
$outlineWidth-FancyButton--focus: createThemeVar("outlineWidth-#{$component}--focus");
$outlineStyle-FancyButton--focus: createThemeVar("outlineStyle-#{$component}--focus");
$outlineOffset-FancyButton--focus: createThemeVar("outlineOffset-#{$component}--focus");

// Disabled state variables
$backgroundColor-FancyButton--disabled: createThemeVar("backgroundColor-#{$component}--disabled");
$borderColor-FancyButton--disabled: createThemeVar("borderColor-#{$component}--disabled");
$textColor-FancyButton--disabled: createThemeVar("textColor-#{$component}--disabled");

@mixin sizeVariant($size) {
  padding: createThemeVar("paddingVertical-#{$component}-#{$size}")
    createThemeVar("paddingHorizontal-#{$component}-#{$size}");
  font-size: createThemeVar("fontSize-#{$component}-#{$size}");
  gap: createThemeVar("gap-#{$component}-#{$size}");
}

@mixin themeVariant($variant) {
  border-radius: createThemeVar("borderRadius-#{$component}-#{$variant}");
  background-color: createThemeVar("backgroundColor-#{$component}-#{$variant}");
  color: createThemeVar("textColor-#{$component}-#{$variant}");
  border: createThemeVar("border-#{$component}-#{$variant}");
  border-color: createThemeVar("borderColor-#{$component}-#{$variant}");
  border-style: createThemeVar("borderStyle-#{$component}-#{$variant}");
  border-width: createThemeVar("borderWidth-#{$component}-#{$variant}");

  &.xs {
    border-radius: createThemeVar("borderRadius-#{$component}-#{$variant}-xs");
    border: createThemeVar("border-#{$component}-#{$variant}-xs");
    border-color: createThemeVar("borderColor-#{$component}-#{$variant}-xs");
    border-style: createThemeVar("borderStyle-#{$component}-#{$variant}-xs");
    border-width: createThemeVar("borderWidth-#{$component}-#{$variant}-xs");
  }

  &.sm {
    border-radius: createThemeVar("borderRadius-#{$component}-#{$variant}-sm");
    border: createThemeVar("border-#{$component}-#{$variant}-sm");
    border-color: createThemeVar("borderColor-#{$component}-#{$variant}-sm");
    border-style: createThemeVar("borderStyle-#{$component}-#{$variant}-sm");
    border-width: createThemeVar("borderWidth-#{$component}-#{$variant}-sm");
  }

  &.md {
    border-radius: createThemeVar("borderRadius-#{$component}-#{$variant}-md");
    border: createThemeVar("border-#{$component}-#{$variant}-md");
    border-color: createThemeVar("borderColor-#{$component}-#{$variant}-md");
    border-style: createThemeVar("borderStyle-#{$component}-#{$variant}-md");
    border-width: createThemeVar("borderWidth-#{$component}-#{$variant}-md");
  }

  &.lg {
    border-radius: createThemeVar("borderRadius-#{$component}-#{$variant}-lg");
    border: createThemeVar("border-#{$component}-#{$variant}-lg");
    border-color: createThemeVar("borderColor-#{$component}-#{$variant}-lg");
    border-style: createThemeVar("borderStyle-#{$component}-#{$variant}-lg");
    border-width: createThemeVar("borderWidth-#{$component}-#{$variant}-lg");
  }

  &.xl {
    border-radius: createThemeVar("borderRadius-#{$component}-#{$variant}-xl");
    border: createThemeVar("border-#{$component}-#{$variant}-xl");
    border-color: createThemeVar("borderColor-#{$component}-#{$variant}-xl");
    border-style: createThemeVar("borderStyle-#{$component}-#{$variant}-xl");
    border-width: createThemeVar("borderWidth-#{$component}-#{$variant}-xl");
  }

  &:hover:not(.fancyButton--disabled) {
    background-color: createThemeVar("backgroundColor-#{$component}-#{$variant}--hover");
    border-color: createThemeVar("borderColor-#{$component}-#{$variant}--hover");
  }

  &:active:not(.fancyButton--disabled) {
    background-color: createThemeVar("backgroundColor-#{$component}-#{$variant}--active");
  }
}

// --- This part defines the CSS styles

@layer components {
  .fancyButton {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: $gap-FancyButton;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: none;
    outline: none;
    font-family: inherit;
    text-decoration: none;
    user-select: none;
    position: relative;

    width: fit-content;
    height: fit-content;
    font-size: $fontSize-FancyButton;
    font-weight: $fontWeight-FancyButton;
    color: $textColor-FancyButton;
    border-style: $borderStyle-FancyButton;
    border-width: $borderWidth-FancyButton;

    &:focus-visible {
      outline: $outlineStyle-FancyButton--focus $outlineWidth-FancyButton--focus
        $outlineColor-FancyButton--focus;
      outline-offset: $outlineOffset-FancyButton--focus;
    }

    // Size variations
    &.xs {
      @include sizeVariant("xs");
    }

    &.sm {
      @include sizeVariant("sm");
    }

    &.md {
      @include sizeVariant("md");
    }

    &.lg {
      @include sizeVariant("lg");
    }

    &.xl {
      @include sizeVariant("xl");
    }

    // Rounded variant
    &.rounded {
      @include themeVariant("rounded");
    }

    // Square variant
    &.square {
      @include themeVariant("square");
    }

    // Pill variant
    &.pill {
      @include themeVariant("pill");
    }

    // Outlines pill variant
    &.outlinedPill {
      @include themeVariant("outlinedPill");
    }

    // Disabled state
    &.disabled {
      cursor: not-allowed;
      background-color: $backgroundColor-FancyButton--disabled !important;
      border-color: $borderColor-FancyButton--disabled !important;
      color: $textColor-FancyButton--disabled !important;
    }

    // Icon only styling
    &.iconOnly {
      aspect-ratio: 1;
      padding: 0.5rem;
    }

    // Content position
    &.contentPositionStart {
      justify-content: flex-start;
    }

    &.contentPositionCenter {
      justify-content: center;
    }

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

    // Icon position (when both icon and content exist)
    &.iconPositionEnd {
      flex-direction: row-reverse;
    }
  }
}

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

```

--------------------------------------------------------------------------------
/xmlui/src/components/Markdown/Markdown.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./Markdown.module.scss";

import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { Markdown, defaultProps } from "./MarkdownNative";
import type React from "react";
import { forwardRef, useMemo } from "react";
import type { ValueExtractor } from "../../abstractions/RendererDefs";
import { parseBindingExpression } from "./parse-binding-expr";
import type { CodeHighlighter } from "../CodeBlock/highlight-code";
import {
  convertPlaygroundPatternToMarkdown,
  convertTreeDisplayToMarkdown,
  observePlaygroundPattern,
  observeTreeDisplay,
} from "./utils";
import { createMetadata, d } from "../metadata-helpers";

const COMP = "Markdown";

export const MarkdownMd = createMetadata({
  status: "stable",
  description:
    "`Markdown` renders formatted text using markdown syntax. Use " +
    "[Text](/working-with-text) for simple, styled text content, and `Markdown` " +
    "when you need [rich formatting](/working-with-markdown).",
  themeVars: parseScssVar(styles.themeVars),
  props: {
    content: d(
      "This property sets the markdown content to display. Alternatively, you can nest " +
        "the markdown content as a child in a CDATA section. In neither this property " +
        "value nor any child is defined, empty content is displayed.",
    ),
    codeHighlighter: {
      description: "This property sets the code highlighter to use.",
      isInternal: true,
    },
    removeIndents: {
      description:
        "This boolean property specifies whether leading indents should be " +
        "removed from the markdown content. If set to `true`, the shortest " +
        "indent found at the start of the content lines is removed from the " +
        "beginning of every line.",
      valueType: "boolean",
      defaultValue: defaultProps.removeIndents,
    },
    showHeadingAnchors: {
      description:
        "This boolean property specifies whether heading anchors should be " +
        "displayed. If set to `true`, heading anchors will be displayed on hover " +
        "next to headings.",
      valueType: "boolean",
    },
  },

  defaultThemeVars: {
    "backgroundColor-Admonition": "$color-primary-100",
    "border-Admonition": "1px solid $color-primary-300",
    "backgroundColor-Admonition-warning": "$color-warn-100",
    "borderColor-Admonition-warning": "$color-warn-300",
    "backgroundColor-Admonition-danger": "$color-danger-100",
    "borderColor-Admonition-danger": "$color-danger-300",
    "borderRadius-Admonition": "$space-2",
    "size-icon-Admonition": "$space-5",
    "paddingLeft-Admonition": "$space-2",
    "paddingRight-Admonition": "$space-6",
    "paddingTop-Admonition": "$space-3",
    "paddingBottom-Admonition": "$space-2",
    "marginLeft-Admonition-content": "$space-1_5",
    "marginTop-Admonition": "$space-7",
    "marginBottom-Admonition": "$space-7",

    "marginTop-Blockquote": "$space-7",
    "marginBottom-Blockquote": "$space-7",
    "paddingHorizontal-Blockquote": "$space-6",
    "paddingTop-Blockquote": "$space-3",
    "paddingBottom-Blockquote": "$space-2_5",
    "backgroundColor-Blockquote": "$color-surface-100",
    "width-accent-Blockquote": "3px",
    "color-accent-Blockquote": "$color-surface-500",

    "marginTop-HtmlLi": "$space-2_5",
    "marginBottom-HtmlLi": "$space-2_5",

    "marginTop-Image-markdown": "$space-4",
    "marginBottom-Image-markdown": "$space-4",
    "marginLeft-Image-markdown": "$space-0",
    "marginRight-Image-markdown": "$space-0",

    "marginTop-Text-markdown": "$space-3",
    "marginBottom-Text-markdown": "$space-6",
    "fontSize-Text-markdown": "fontSize-${COMP}",
    "fontWeight-Text-markdown": "fontWeight-Text",

    light: {
      // --- No light-specific theme vars
    },
    dark: {
      "backgroundColor-Blockquote": "$color-surface-50",
      "backgroundColor-Admonition": "$color-primary-200",
    },
  },
});

export const markdownComponentRenderer = createComponentRenderer(
  COMP,
  MarkdownMd,
  ({ node, extractValue, renderChild, className }) => {
    let renderedChildren = "";

    // 1. Static content prop fallback
    if (!renderedChildren) {
      renderedChildren = extractValue.asString(node.props.content);
    }

    // 2. "data" property fallback
    if (!renderedChildren && typeof (node.props as any).data === "string") {
      renderedChildren = extractValue.asString((node.props as any).data);
    }

    // 3. Children fallback
    if (!renderedChildren) {
      (node.children ?? []).forEach((child) => {
        const renderedChild = renderChild(child);
        if (typeof renderedChild === "string") {
          renderedChildren += renderedChild;
        }
      });
    }

    return (
      <TransformedMarkdown
        className={className}
        removeIndents={extractValue.asOptionalBoolean(node.props.removeIndents, true)}
        codeHighlighter={extractValue(node.props.codeHighlighter)}
        extractValue={extractValue}
        showHeadingAnchors={extractValue.asOptionalBoolean(node.props.showHeadingAnchors)}
      >
        {renderedChildren}
      </TransformedMarkdown>
    );
  },
);

type TransformedMarkdownProps = {
  children: React.ReactNode;
  removeIndents?: boolean;
  className?: string;
  extractValue: ValueExtractor;
  codeHighlighter?: CodeHighlighter;
  showHeadingAnchors?: boolean;
};

const TransformedMarkdown = forwardRef<HTMLDivElement, TransformedMarkdownProps>(
  (
    {
      children,
      removeIndents,
      className,
      extractValue,
      codeHighlighter,
      showHeadingAnchors,
    }: TransformedMarkdownProps,
    ref,
  ) => {
    const markdownContent = useMemo(() => {
      if (typeof children !== "string") {
        return null;
      }

      // --- Resolve binding expression values
      // --- Resolve xmlui playground definitions

      let resolvedMd = children;
      while (true) {
        const nextPlayground = observePlaygroundPattern(resolvedMd);
        if (!nextPlayground) break;

        resolvedMd =
          resolvedMd.slice(0, nextPlayground[0]) +
          convertPlaygroundPatternToMarkdown(nextPlayground[2]) +
          resolvedMd.slice(nextPlayground[1]);
      }

      while (true) {
        const nextTreeDisplay = observeTreeDisplay(resolvedMd);
        if (!nextTreeDisplay) break;
        resolvedMd =
          resolvedMd.slice(0, nextTreeDisplay[0]) +
          convertTreeDisplayToMarkdown(nextTreeDisplay[2]) +
          resolvedMd.slice(nextTreeDisplay[1]);
      }

      resolvedMd = parseBindingExpression(resolvedMd, extractValue);
      return resolvedMd;
    }, [children, extractValue]);

    return (
      <Markdown
        ref={ref}
        removeIndents={removeIndents}
        codeHighlighter={codeHighlighter}
        className={className}
        showHeadingAnchors={showHeadingAnchors}
      >
        {markdownContent}
      </Markdown>
    );
  },
);

export { Markdown } from "./MarkdownNative";

```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/transform.errors.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it, assert } from "vitest";
import { transformSource } from "./xmlui";

describe("Xmlui transform - errors", () => {
  it("Missing name in compound component", () => {
    try {
      transformSource("<Component />");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T003");
    }
  });

  it("Invalid name in compound component #1", () => {
    try {
      transformSource("<Component name=''/>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T004");
    }
  });

  it("Invalid name in compound component #2", () => {
    try {
      transformSource("<Component name='alma'/>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T004");
    }
  });

  it("Compound child in compound component", () => {
    try {
      transformSource("<Component name='MyComp'><Component /></Component>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T006");
    }
  });

  it("Invalid attribute in compound component", () => {
    try {
      transformSource("<Component name='MyComp' blabla='123'><Stack/></Component>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T021");
    }
  });

  it("Event attribute starts with 'on'", () => {
    try {
      transformSource("<Stack><event name='onClick' /></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T008");
    }
  });

  it("'uses' is invalid in a compound component", () => {
    try {
      transformSource("<Component name='MyComp'><Stack/><uses /></Component>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T009");
    }
  });

  it("'loaders' is invalid in a compound component", () => {
    try {
      transformSource("<Component name='MyComp'><Stack/><loaders /></Component>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T009");
    }
  });

  it("Invalid attribute in prop", () => {
    try {
      transformSource("<Stack><property name='my' blabal='123'/></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T011");
    }
  });

  it("Invalid attribute in event", () => {
    try {
      transformSource("<Stack><event name='my' blabal='123'/></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T011");
    }
  });

  it("Invalid attribute in var", () => {
    try {
      transformSource("<Stack><variable name='my' blabal='123'/></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T011");
    }
  });

  it("Invalid attribute in api", () => {
    try {
      transformSource("<Stack><property name='my' blabal='123'/></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T011");
    }
  });

  it("Name required in prop #1", () => {
    try {
      transformSource("<Stack><property /></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T012");
    }
  });

  it("Name required in prop #2", () => {
    try {
      transformSource("<Stack><property name='' /></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T012");
    }
  });

  it("Name required in event #1", () => {
    try {
      transformSource("<Stack><event /></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T012");
    }
  });

  it("Name required in event #2", () => {
    try {
      transformSource("<Stack><event name='' /></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T012");
    }
  });

  it("Name required in var #1", () => {
    try {
      transformSource("<Stack><variable/></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T012");
    }
  });

  it("Name required in var #2", () => {
    try {
      transformSource("<Stack><variable name='' /></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T012");
    }
  });

  it("Name required in method #1", () => {
    try {
      transformSource("<Stack><method /></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T012");
    }
  });

  it("Name required in api #2", () => {
    try {
      transformSource("<Stack><method name='' /></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T012");
    }
  });

  it("A 'uses' must have value #1", () => {
    try {
      transformSource("<Stack><uses value=''/></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T015");
    }
  });

  it("A 'uses' must have value #2", () => {
    try {
      transformSource("<Stack><uses/></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T015");
    }
  });

  it("A 'value' can have 'field' and 'item' child", () => {
    try {
      transformSource("<Stack><property name='my'><dummy /></property></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T016");
    }
  });

  it("Cannot mix field and item children #1", () => {
    try {
      transformSource(
        "<Stack><property name='my'><field name='my' /><item value='3'/></property></Stack>",
      );
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T017");
    }
  });

  it("Cannot mix field and item children #2", () => {
    try {
      transformSource(
        `<Stack>
          <property name='my'>
            <item value='3'/>
            <field name='my' />
          </property>
        </Stack>`,
      );
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T017");
    }
  });

  it("Item cannot have a 'name' attribute", () => {
    try {
      transformSource("<Stack><property name='my'><item name='my' value='3'/></property></Stack>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).includes("T018");
    }
  });

  it("throws script errors in script tag", () => {
    try {
      transformSource(`
        <App>
          <script>
            var a =;
          </script>
          <Text>Hello World!</Text>
        </App>
      `);
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString()).include("W001");
    }
  });
});

```

--------------------------------------------------------------------------------
/xmlui/src/abstractions/RendererDefs.ts:
--------------------------------------------------------------------------------

```typescript
import type { CSSProperties, ForwardedRef, ReactNode, RefObject } from "react";

import type { AppContextObject } from "./AppContextDefs";
import type {
  ComponentDef,
  ComponentMetadata,
  CompoundComponentDef,
  DynamicChildComponentDef, ParentRenderContext,
} from "./ComponentDefs";
import type { ContainerState } from "./ContainerDefs";
import type { LookupActionOptions, LookupAsyncFn, LookupSyncFn } from "./ActionDefs";
import type { AsyncFunction } from "./FunctionDefs";
import type {ComponentApi} from "../components-core/rendering/ContainerWrapper";

// This interface defines the renderer context for the exposed components of the 
// XMLUI framework.
export interface RendererContext<TMd extends ComponentMetadata = ComponentMetadata>
  extends ComponentRendererContextBase<TMd> {
  uid: symbol; // The unique identifier of the component instance

  updateState: UpdateStateFn; // A component invokes this function to change its internal state

  // Context variables (all keys starting with "$") available in the current container
  contextVars: Record<string, any>;

  // When a component wants to access a property value (which may contain a binding
  // expression to evaluate), it must use this property to get the current value.
  extractValue: ValueExtractor;

  // This function gets a physical resource URL according to the provided logical URL.
  extractResourceUrl: (url?: string) => string | undefined;

  // This function gets an async executable function that handles an event.
  lookupEventHandler: LookupEventHandlerFn<TMd>;

  registerComponentApi: RegisterComponentApiFn; // A component can register its APIs with this function

  lookupAction: LookupAsyncFn; // This function obtains an action by its name with the specified options

  // This function retrieves a sync function the component can use as a callback
  lookupSyncCallback: LookupSyncFn;

  className?: string;
}

export type UpdateStateFn = (componentState: any, options?: any) => void; // This function updates the state of a component.

// This type represent the function that extracts the value from a component property
export type ValueExtractor = {
  (expression?: any, strict?: boolean): any; // Get a value (any) from a component property

  asString(expression?: any): string; // Get a string value from an expression

  // Get an optional string value from an expression
  asOptionalString<T extends string>(expression?: any, defValue?: string): T | undefined;

  // Get an optional string value from an expression
  asOptionalStringArray(expression?: any): (string | undefined)[];

  asDisplayText(expression?: any): string; // Get a display string value from an expression

  asNumber(expression?: any): number; // Get a number value from an expression

  // Get an optional number value from an expression
  asOptionalNumber(expression?: any, defValue?: number): number | undefined;

  // Get a boolean value (JavaScript semantics) from an expression
  asBoolean(expression?: any): boolean;

  // Get an optional Boolean value from an expression
  asOptionalBoolean(expression?: any, defValue?: boolean): boolean | undefined;

  // Get a CSS size value from an expression
  asSize(expression?: any): string; 
};

// This function retrieves an async function for a particular component's specified
// event to be invoked as an event handler (`undefined` if the particular event
// handler is not defined).
export type LookupEventHandlerFn<TMd extends ComponentMetadata = ComponentMetadata> = (
  eventName: keyof NonNullable<TMd["events"]>,
  actionOptions?: LookupActionOptions,
) => AsyncFunction | undefined;

// This type represents a function that registers all API endpoints of a particular component.
export type RegisterComponentApiFn = (componentApi: ComponentApi) => void;

// Function signature to render a particular child component (or set of child components)
export type RenderChildFn<L extends ComponentDef = ComponentDef> = (
  children?:
    | ComponentDef
    | ComponentDef[]
    | DynamicChildComponentDef
    | DynamicChildComponentDef[]
    | string,
  layoutContext?: LayoutContext<L>,
  parentRenderContext?: ParentRenderContext,
  uidInfoRef?: RefObject<Record<string, any>>,
  ref?: ForwardedRef<any>,
  rest?: Record<string, any>
) => ReactNode | ReactNode[];

// Each component is rendered in a particular layout context (for example, within a
// stack). This type provides information about that context and the operations that
// render children in it.
export type LayoutContext<T extends ComponentDef = ComponentDef> = {
  type?: string; // The type of the layout context

  // This function allows the React representation of a particular child node to be
  // wrapped in whatever React components to accommodate the current layout context.
  // When the engine is about to render children in a particular layout context, it
  // checks the existence of this function. If declared, the engine invokes it.
  wrapChild?: (
    context: RendererContext<T>,
    renderedChild: ReactNode,
    metadata?: ComponentMetadata,
  ) => ReactNode;

  // Arbitrary props extending the layout context
  [key: string]: any;
};

export type NonCssLayoutProps = {
  horizontalAlignment?: string;
  verticalAlignment?: string;
  orientation?: string;
};

// This function renders a component definition into a React component
export type ComponentRendererFn<T extends ComponentDef> = (
  context: RendererContext<T>,
) => ReactNode;

// This function renders a component definition into a React component
export type CompoundComponentRendererInfo = {
  compoundComponentDef: CompoundComponentDef;
  metadata?: ComponentMetadata;
};

// Components must be registered with a component registry so the engine can use them.
// This type collects the information held by the registry.
export type ComponentRendererDef<T extends ComponentDef = any> = {
  // The component's type identifier. In the markup, the component must use this name
  // to be recognized.
  type: string;

  // This function renders the component from its definition to its React representation.
  renderer: ComponentRendererFn<T>;

  // The metadata to use when rendering the component
  metadata?: ComponentMetadata;
};

// Rendering components (turning component definitions into their React node 
// representation) is a complicated process that requires information describing the 
// actual context. This interface defines the common properties of that context.
export interface ComponentRendererContextBase<TMd extends ComponentMetadata = ComponentMetadata> {
  // The definition of the component to render
  node: ComponentDef<TMd>;

  // The state of the container in which the component is rendered
  state: ContainerState;

  // The application context the component (and its binding expressions) can use
  appContext?: AppContextObject;

  // The component can use this function to render its child components
  renderChild: RenderChildFn;

  // Information about the layout context in which the component is rendered
  layoutContext?: LayoutContext;
}

```

