This is page 40 of 186. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/%7BimageSrc%7D?format=md&lines=true&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   ├── config.json
│   └── cyan-tools-design.md
├── .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/tests/parsers/scripting/parser-expressions.test.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { describe, expect, it } from "vitest";
  2 | 
  3 | import { Parser } from "../../../src/parsers/scripting/Parser";
  4 | import {
  5 |   FunctionInvocationExpression,
  6 |   MemberAccessExpression,
  7 |   PostfixOpExpression,
  8 |   PrefixOpExpression,
  9 |   SequenceExpression,
 10 |   SpreadExpression,
 11 |   T_ARRAY_LITERAL,
 12 |   T_BINARY_EXPRESSION,
 13 |   T_CALCULATED_MEMBER_ACCESS_EXPRESSION,
 14 |   T_CONDITIONAL_EXPRESSION,
 15 |   T_FUNCTION_INVOCATION_EXPRESSION,
 16 |   T_IDENTIFIER,
 17 |   T_LITERAL,
 18 |   T_MEMBER_ACCESS_EXPRESSION,
 19 |   T_POSTFIX_OP_EXPRESSION,
 20 |   T_PREFIX_OP_EXPRESSION,
 21 |   T_SEQUENCE_EXPRESSION,
 22 |   T_SPREAD_EXPRESSION,
 23 |   T_UNARY_EXPRESSION,
 24 | } from "../../../src/components-core/script-runner/ScriptingSourceTree";
 25 | 
 26 | describe("Parser - miscellaneous expressions", () => {
 27 |   const sequenceCases = [
 28 |     { src: "a, b, a+b", len: 3, idx: 0, exp: T_IDENTIFIER },
 29 |     { src: "a, b, a+b", len: 3, idx: 1, exp: T_IDENTIFIER },
 30 |     { src: "a, b, a+b", len: 3, idx: 2, exp: T_BINARY_EXPRESSION },
 31 |     { src: "a(b), b.a, a[b], !a", len: 4, idx: 0, exp: T_FUNCTION_INVOCATION_EXPRESSION },
 32 |     { src: "a(b), b.a, a[b], !a", len: 4, idx: 1, exp: T_MEMBER_ACCESS_EXPRESSION },
 33 |     { src: "a(b), b.a, a[b], !a", len: 4, idx: 2, exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
 34 |     { src: "a(b), b.a, a[b], !a", len: 4, idx: 3, exp: T_UNARY_EXPRESSION },
 35 |     { src: 'a, 12.3, "Hello"', len: 3, idx: 1, exp: T_LITERAL },
 36 |     { src: 'a, 12.3, "Hello"', len: 3, idx: 2, exp: T_LITERAL },
 37 |   ];
 38 |   sequenceCases.forEach((c) => {
 39 |     it(`Sequence expression: ${c.src}`, () => {
 40 |       // --- Arrange
 41 |       const wParser = new Parser(c.src);
 42 | 
 43 |       // --- Act
 44 |       const expr = wParser.parseExpr();
 45 | 
 46 |       // --- Assert
 47 |       expect(expr).not.equal(null);
 48 |       if (!expr) return;
 49 | 
 50 |       expect(expr.type).equal(T_SEQUENCE_EXPRESSION);
 51 |       const sequence = expr as SequenceExpression;
 52 |       expect(sequence.exprs.length).equal(c.len);
 53 |       expect(sequence.exprs[c.idx].type).equal(c.exp);
 54 |     });
 55 |   });
 56 | 
 57 |   const invocationCases = [
 58 |     { src: "func()", len: 0, idx: -1, exp: null },
 59 |     { src: "func(a, b)", len: 2, idx: 0, exp: T_IDENTIFIER },
 60 |     { src: "func(a, b)", len: 2, idx: 1, exp: T_IDENTIFIER },
 61 |     { src: "func(123, a+b, a[b])", len: 3, idx: 0, exp: T_LITERAL },
 62 |     { src: "func(123, a+b, a[b])", len: 3, idx: 1, exp: T_BINARY_EXPRESSION },
 63 |     { src: "func(123, a+b, a[b])", len: 3, idx: 2, exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
 64 |   ];
 65 |   invocationCases.forEach((c) => {
 66 |     it(`FunctionInvocation: ${c.src}`, () => {
 67 |       // --- Arrange
 68 |       const wParser = new Parser(c.src);
 69 | 
 70 |       // --- Act
 71 |       const expr = wParser.parseExpr();
 72 | 
 73 |       // --- Assert
 74 |       expect(expr).not.equal(null);
 75 |       if (!expr) return;
 76 |       expect(expr.type).equal(T_FUNCTION_INVOCATION_EXPRESSION);
 77 |       const invocation = expr as FunctionInvocationExpression;
 78 |       expect(invocation.obj.type).equal(T_IDENTIFIER);
 79 |       expect(invocation.arguments.length).equal(c.len);
 80 |       if (c.len > 0) {
 81 |         // eslint-disable-next-line jest/no-conditional-expect
 82 |         expect(invocation.arguments[c.idx].type).equal(c.exp);
 83 |       }
 84 |     });
 85 |   });
 86 | 
 87 |   const objectCases = [
 88 |     { src: "func()", exp: T_IDENTIFIER },
 89 |     { src: "(+a)()", exp: T_UNARY_EXPRESSION },
 90 |     { src: "(a+b)()", exp: T_BINARY_EXPRESSION },
 91 |     { src: "(a ? b : c)()", exp: T_CONDITIONAL_EXPRESSION },
 92 |     { src: "(123)()", exp: T_LITERAL },
 93 |     { src: '("Hello")()', exp: T_LITERAL },
 94 |     { src: "(func(a, b))()", exp: T_FUNCTION_INVOCATION_EXPRESSION },
 95 |     { src: "(a.b)()", exp: T_MEMBER_ACCESS_EXPRESSION },
 96 |     { src: "(a[b])()", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
 97 |   ];
 98 |   objectCases.forEach((c) => {
 99 |     it(`FunctionInvocation object: ${c.src}`, () => {
100 |       // --- Arrange
101 |       const wParser = new Parser(c.src);
102 | 
103 |       // --- Act
104 |       const expr = wParser.parseExpr();
105 | 
106 |       // --- Assert
107 |       expect(expr).not.equal(null);
108 |       if (!expr) return;
109 |       expect(expr.type).equal(T_FUNCTION_INVOCATION_EXPRESSION);
110 |       const invocation = expr as FunctionInvocationExpression;
111 |       expect(invocation.obj.type).equal(c.exp);
112 |     });
113 |   });
114 | 
115 |   const memberAccessCases = [
116 |     { src: "a.b", exp: T_IDENTIFIER },
117 |     { src: "(+a).b", exp: T_UNARY_EXPRESSION },
118 |     { src: "(a+b).b", exp: T_BINARY_EXPRESSION },
119 |     { src: "(a ? b : c).b", exp: T_CONDITIONAL_EXPRESSION },
120 |     { src: "(123).b", exp: T_LITERAL },
121 |     { src: '("Hello").b', exp: T_LITERAL },
122 |     { src: "(func(a, b)).b", exp: T_FUNCTION_INVOCATION_EXPRESSION },
123 |     { src: "(a.b).b", exp: T_MEMBER_ACCESS_EXPRESSION },
124 |     { src: "(a[b]).b", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
125 |   ];
126 |   memberAccessCases.forEach((c) => {
127 |     it(`MemberAccess: ${c.src}`, () => {
128 |       // --- Arrange
129 |       const wParser = new Parser(c.src);
130 | 
131 |       // --- Act
132 |       const expr = wParser.parseExpr();
133 | 
134 |       // --- Assert
135 |       expect(expr).not.equal(null);
136 |       if (!expr) return;
137 |       expect(expr.type).equal(T_MEMBER_ACCESS_EXPRESSION);
138 |       const memberAcc = expr as MemberAccessExpression;
139 |       expect(memberAcc.member).eq("b");
140 |       expect(memberAcc.obj.type).equal(c.exp);
141 |     });
142 |   });
143 | 
144 |   const spreadCases = [
145 |     { src: "...[1, 2, 3]", exp: T_ARRAY_LITERAL },
146 |     { src: "...apple", exp: T_IDENTIFIER },
147 |   ];
148 |   spreadCases.forEach((c) => {
149 |     it(`Spread: ${c.src}`, () => {
150 |       // --- Arrange
151 |       const wParser = new Parser(c.src);
152 | 
153 |       // --- Act
154 |       const expr = wParser.parseExpr();
155 | 
156 |       // --- Assert
157 |       expect(expr).not.equal(null);
158 |       if (!expr) return;
159 |       expect(expr.type).equal(T_SPREAD_EXPRESSION);
160 |       const spread = expr as SpreadExpression;
161 |       expect(spread.expr.type).equal(c.exp);
162 |     });
163 |   });
164 | 
165 |   const prefixCases = [
166 |     { src: "++i", op: "++", exp: T_IDENTIFIER },
167 |     { src: "++j[2]", op: "++", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
168 |     { src: "--i", op: "--", exp: T_IDENTIFIER },
169 |     { src: "--j[2]", op: "--", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
170 |   ];
171 |   prefixCases.forEach((c) => {
172 |     it(`Prefix: ${c.src}`, () => {
173 |       // --- Arrange
174 |       const wParser = new Parser(c.src);
175 | 
176 |       // --- Act
177 |       const expr = wParser.parseExpr();
178 | 
179 |       // --- Assert
180 |       expect(expr).not.equal(null);
181 |       if (!expr) return;
182 |       expect(expr.type).equal(T_PREFIX_OP_EXPRESSION);
183 |       const prefixExpr = expr as PrefixOpExpression;
184 |       expect(prefixExpr.expr.type).equal(c.exp);
185 |       expect(prefixExpr.op).equal(c.op);
186 |     });
187 |   });
188 | 
189 |   const postfixCases = [
190 |     { src: "i++", op: "++", exp: T_IDENTIFIER },
191 |     { src: "j[2]++", op: "++", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
192 |     { src: "i--", op: "--", exp: T_IDENTIFIER },
193 |     { src: "j[2]--", op: "--", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
194 |   ];
195 |   postfixCases.forEach((c) => {
196 |     it(`Postfix: ${c.src}`, () => {
197 |       // --- Arrange
198 |       const wParser = new Parser(c.src);
199 | 
200 |       // --- Act
201 |       const expr = wParser.parseExpr();
202 | 
203 |       // --- Assert
204 |       expect(expr).not.equal(null);
205 |       if (!expr) return;
206 |       expect(expr.type).equal(T_POSTFIX_OP_EXPRESSION);
207 |       const postfixExpr = expr as PostfixOpExpression;
208 |       expect(postfixExpr.expr.type).equal(c.exp);
209 |       expect(postfixExpr.op).equal(c.op);
210 |     });
211 |   });
212 | });
213 | 
214 | 
```

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

```typescript
  1 | import styles from "./AutoComplete.module.scss";
  2 | 
  3 | import { createComponentRenderer } from "../../components-core/renderers";
  4 | import { parseScssVar } from "../../components-core/theming/themeVars";
  5 | import { MemoizedItem } from "../container-helpers";
  6 | import {
  7 |   dPlaceholder,
  8 |   dInitialValue,
  9 |   dMaxLength,
 10 |   dAutoFocus,
 11 |   dRequired,
 12 |   dReadonly,
 13 |   dEnabled,
 14 |   dValidationStatus,
 15 |   dComponent,
 16 |   dDidChange,
 17 |   dGotFocus,
 18 |   dLostFocus,
 19 |   dMulti,
 20 |   createMetadata,
 21 |   d,
 22 | } from "../metadata-helpers";
 23 | import { AutoComplete, defaultProps } from "./AutoCompleteNative";
 24 | 
 25 | const COMP = "AutoComplete";
 26 | 
 27 | export const AutoCompleteMd = createMetadata({
 28 |   status: "experimental",
 29 |   description:
 30 |     "`AutoComplete` is a searchable dropdown input that allows users to type and " +
 31 |     "filter through options, with support for single or multiple selections. Unlike " +
 32 |     "a basic [`Select`](/components/Select), it provides type-ahead functionality " +
 33 |     "and can allow users to create new options.",
 34 |   props: {
 35 |     placeholder: dPlaceholder(),
 36 |     initialValue: dInitialValue(),
 37 |     maxLength: dMaxLength(),
 38 |     autoFocus: {
 39 |       ...dAutoFocus(),
 40 |       defaultValue: defaultProps.autoFocus,
 41 |     },
 42 |     required: {
 43 |       ...dRequired(),
 44 |       defaultValue: defaultProps.required,
 45 |     },
 46 |     readOnly: {
 47 |       ...dReadonly(),
 48 |       defaultValue: defaultProps.readOnly,
 49 |     },
 50 |     enabled: {
 51 |       ...dEnabled(),
 52 |       defaultValue: defaultProps.enabled,
 53 |     },
 54 |     initiallyOpen: d(
 55 |       `This property determines whether the dropdown list is open when the component is first rendered.`,
 56 |       null,
 57 |       "boolean",
 58 |       defaultProps.initiallyOpen,
 59 |     ),
 60 |     creatable: d(
 61 |       `This property allows the user to create new items that are not present in the list of options.`,
 62 |       null,
 63 |       "boolean",
 64 |       defaultProps.creatable,
 65 |     ),
 66 |     validationStatus: {
 67 |       ...dValidationStatus(),
 68 |       defaultValue: defaultProps.validationStatus,
 69 |     },
 70 |     dropdownHeight: d("This property sets the height of the dropdown list."),
 71 |     multi: {
 72 |       ...dMulti(),
 73 |       defaultValue: defaultProps.multi,
 74 |     },
 75 |     optionTemplate: dComponent(
 76 |       `This property enables the customization of list items. To access the attributes of ` +
 77 |         `a list item use the \`$item\` context variable.`,
 78 |     ),
 79 |     emptyListTemplate: dComponent(
 80 |       "This property defines the template to display when the list of options is empty.",
 81 |     ),
 82 |   },
 83 |   events: {
 84 |     gotFocus: dGotFocus(COMP),
 85 |     lostFocus: dLostFocus(COMP),
 86 |     didChange: dDidChange(COMP),
 87 |     itemCreated: {
 88 |       description:
 89 |         "This event is triggered when a new item is created by the user " +
 90 |         "(if `creatable` is enabled).",
 91 |     },
 92 |   },
 93 |   apis: {
 94 |     focus: {
 95 |       description: `This method focuses the ${COMP} component.`,
 96 |       signature: "focus()",
 97 |     },
 98 |     value: {
 99 |       description:
100 |         "This API allows you to get or set the value of the component. If no value is set, " +
101 |         "it will retrieve `undefined`.",
102 |       signature: "get value(): any",
103 |     },
104 |     setValue: {
105 |       description:
106 |         "This API allows you to set the value of the component. If the value is not valid, " +
107 |         "the component will not update its internal state.",
108 |       signature: "setValue(value: any)",
109 |       parameters: {
110 |         value: "The value to set.",
111 |       },
112 |     },
113 |   },
114 |   contextVars: {
115 |     $item: d(
116 |       "This context value represents an item when you define an option item template. " +
117 |         "Use `$item.value` and `$item.label` to refer to the value and label of the " +
118 |         "particular option.",
119 |     ),
120 |   },
121 |   themeVars: parseScssVar(styles.themeVars),
122 |   defaultThemeVars: {
123 |     [`backgroundColor-menu-${COMP}`]: "$color-surface-raised",
124 |     [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
125 |     [`borderRadius-menu-${COMP}`]: "$borderRadius",
126 |     [`borderWidth-menu-${COMP}`]: "1px",
127 |     [`borderColor-menu-${COMP}`]: "$borderColor",
128 |     [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
129 |     [`fontSize-${COMP}-badge`]: "$fontSize-sm",
130 |     [`paddingHorizontal-${COMP}-badge`]: "$space-2_5",
131 |     [`paddingVertical-${COMP}-badge`]: "$space-0_5",
132 |     [`borderRadius-${COMP}-badge`]: "$borderRadius",
133 |     [`paddingHorizontal-item-${COMP}`]: "$space-2",
134 |     [`paddingVertical-item-${COMP}`]: "$space-2",
135 |     [`paddingHorizontal-${COMP}`]: "$space-2",
136 |     [`paddingVertical-${COMP}`]: "$space-2",
137 |     [`opacity-text-item-${COMP}--disabled`]: "0.5",
138 |     [`opacity-${COMP}--disabled`]: "0.5",
139 |     [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
140 |     [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
141 |     [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
142 |     [`textColor-${COMP}-badge`]: "$const-color-surface-50",
143 |     [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
144 |     [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
145 |     [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
146 |     // Default borderColor-Input--disabled is too light so the disabled component is barely visible
147 |     [`borderColor-${COMP}--disabled`]: "initial",
148 |   },
149 | });
150 | 
151 | export const autoCompleteComponentRenderer = createComponentRenderer(
152 |   COMP,
153 |   AutoCompleteMd,
154 |   ({
155 |     node,
156 |     state,
157 |     updateState,
158 |     extractValue,
159 |     renderChild,
160 |     lookupEventHandler,
161 |     registerComponentApi,
162 |     className,
163 |   }) => {
164 |     return (
165 |       <AutoComplete
166 |         multi={extractValue.asOptionalBoolean(node.props.multi)}
167 |         className={className}
168 |         updateState={updateState}
169 |         initialValue={extractValue(node.props.initialValue)}
170 |         value={state?.value}
171 |         creatable={extractValue.asOptionalBoolean(node.props.creatable)}
172 |         autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
173 |         enabled={extractValue.asOptionalBoolean(node.props.enabled)}
174 |         placeholder={extractValue.asOptionalString(node.props.placeholder)}
175 |         validationStatus={extractValue(node.props.validationStatus)}
176 |         onDidChange={lookupEventHandler("didChange")}
177 |         onFocus={lookupEventHandler("gotFocus")}
178 |         onBlur={lookupEventHandler("lostFocus")}
179 |         onItemCreated={lookupEventHandler("itemCreated")}
180 |         registerComponentApi={registerComponentApi}
181 |         emptyListTemplate={renderChild(node.props.emptyListTemplate)}
182 |         dropdownHeight={extractValue(node.props.dropdownHeight)}
183 |         readOnly={extractValue.asOptionalBoolean(node.props.readOnly)}
184 |         initiallyOpen={extractValue.asOptionalBoolean(node.props.initiallyOpen)}
185 |         optionRenderer={
186 |           node.props.optionTemplate
187 |             ? (item, val, inTrigger) => {
188 |                 return (
189 |                   <MemoizedItem
190 |                     node={node.props.optionTemplate}
191 |                     item={item}
192 |                     context={{
193 |                       $selectedValue: val,
194 |                       $inTrigger: inTrigger,
195 |                     }}
196 |                     renderChild={renderChild}
197 |                   />
198 |                 );
199 |               }
200 |             : undefined
201 |         }
202 |       >
203 |         {renderChild(node.children)}
204 |       </AutoComplete>
205 |     );
206 |   },
207 | );
208 | 
```

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

```typescript
  1 | import React, { useMemo } from "react";
  2 | 
  3 | import styles from "./Splitter.module.scss";
  4 | 
  5 | import type { RenderChildFn } from "../../abstractions/RendererDefs";
  6 | import { type ComponentDef } from "../../abstractions/ComponentDefs";
  7 | import type { ValueExtractor, LookupEventHandlerFn } from "../../abstractions/RendererDefs";
  8 | import { createComponentRenderer } from "../../components-core/renderers";
  9 | import { isComponentDefChildren } from "../../components-core/utils/misc";
 10 | import { NotAComponentDefError } from "../../components-core/EngineError";
 11 | import { parseScssVar } from "../../components-core/theming/themeVars";
 12 | import type { OrientationOptions } from "../abstractions";
 13 | import { createMetadata, d, dComponent } from "../metadata-helpers";
 14 | import { Splitter, defaultProps } from "./SplitterNative";
 15 | 
 16 | const COMP = "Splitter";
 17 | 
 18 | const baseSplitterMd = createMetadata({
 19 |   status: "stable",
 20 |   description:
 21 |     "`Splitter` component divides a container into two resizable sections. These " +
 22 |     "are are identified by their names: primary and secondary. They have a " +
 23 |     "draggable bar between them. When only a single child is visible (due to " +
 24 |     "conditional rendering with `when` attributes), the splitter bar is not " +
 25 |     "displayed and the single panel stretches to fill the entire viewport of " +
 26 |     "the splitter container.",
 27 |   props: {
 28 |     swapped: {
 29 |       description:
 30 |         `This optional booelan property indicates whether the \`${COMP}\` sections are layed out as ` +
 31 |         `primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
 32 |       valueType: "boolean",
 33 |       defaultValue: defaultProps.swapped,
 34 |     },
 35 |     splitterTemplate: dComponent(
 36 |       `The divider can be customized using XMLUI components via this property.`,
 37 |     ),
 38 |     initialPrimarySize: {
 39 |       description:
 40 |         `This optional number property sets the initial size of the primary section. The unit of ` +
 41 |         `the size value is in pixels or percentages.`,
 42 |       valueType: "string",
 43 |       defaultValue: defaultProps.initialPrimarySize,
 44 |     },
 45 |     minPrimarySize: {
 46 |       description:
 47 |         `This property sets the minimum size the primary section can have. The unit of the size ` +
 48 |         `value is in pixels or percentages.`,
 49 |       valueType: "string",
 50 |       defaultValue: defaultProps.minPrimarySize,
 51 |     },
 52 |     maxPrimarySize: {
 53 |       description:
 54 |         `This property sets the maximum size the primary section can have. The unit of the size ` +
 55 |         `value is in pixels or percentages. Negative values are supported and calculate from the ` +
 56 |         `end of the container (e.g., "-20%" means "80% of container", "-100px" means "container size - 100px").`,
 57 |       valueType: "string",
 58 |       defaultValue: defaultProps.maxPrimarySize,
 59 |     },
 60 |     floating: {
 61 |       description:
 62 |         `Toggles whether the resizer is visible (\`false\`) or not (\`true\`) when not hovered ` +
 63 |         `or dragged. The default value is \`false\`, meaning the resizer is visible all the time.`,
 64 |       valueType: "boolean",
 65 |       defaultValue: defaultProps.floating,
 66 |     },
 67 |     orientation: {
 68 |       description:
 69 |         `Sets whether the \`Splitter\` divides the container horizontally and lays out the ` +
 70 |         `section on top of each other (\`vertical\`), or vertically by placing the sections ` +
 71 |         `next to each other (\`horizontal\`).`,
 72 |       valueType: "string",
 73 |       availableValues: ["horizontal", "vertical"],
 74 |       defaultValue: defaultProps.orientation,
 75 |     },
 76 |   },
 77 |   events: {
 78 |     resize: d(`This event fires when the component is resized.`),
 79 |   },
 80 |   themeVars: parseScssVar(styles.themeVars),
 81 |   defaultThemeVars: {
 82 |     [`backgroundColor-resizer-${COMP}`]: "$color-surface-100",
 83 |     [`thickness-resizer-${COMP}`]: "5px",
 84 |     [`cursor-resizer-horizontal-${COMP}`]: "ew-resize",
 85 |     [`cursor-resizer-vertical-${COMP}`]: "ns-resize",
 86 |   },
 87 | });
 88 | 
 89 | export const SplitterMd = {
 90 |   ...baseSplitterMd,
 91 |   props: {
 92 |     ...baseSplitterMd.props,
 93 |   },
 94 | };
 95 | 
 96 | export const HSplitterMd = { ...baseSplitterMd, specializedFrom: COMP };
 97 | export const VSplitterMd = { ...baseSplitterMd, specializedFrom: COMP };
 98 | 
 99 | type SplitterComponentDef = ComponentDef<typeof SplitterMd>;
100 | type VSplitterComponentDef = ComponentDef<typeof VSplitterMd>;
101 | type HSplitterComponentDef = ComponentDef<typeof HSplitterMd>;
102 | 
103 | type RenderSplitterPars = {
104 |   node: SplitterComponentDef | VSplitterComponentDef | HSplitterComponentDef;
105 |   extractValue: ValueExtractor;
106 |   className: string | undefined;
107 |   renderChild: RenderChildFn;
108 |   orientation?: OrientationOptions;
109 |   lookupEventHandler: LookupEventHandlerFn<typeof SplitterMd>;
110 | };
111 | 
112 | const DEFAULT_ORIENTATION = "vertical";
113 | 
114 | function renderSplitter({
115 |   node,
116 |   extractValue,
117 |   className,
118 |   renderChild,
119 |   lookupEventHandler,
120 |   orientation = extractValue(node.props.orientation) ?? DEFAULT_ORIENTATION,
121 | }: RenderSplitterPars) {
122 |   if (!isComponentDefChildren(node.children)) {
123 |     throw new NotAComponentDefError();
124 |   }
125 | 
126 |   // Let XMLUI handle the conditional rendering, then count the non-null results
127 |   const renderedChildren = useMemo(() => {
128 |     if (!Array.isArray(node.children)) {
129 |       const rendered = renderChild(node.children);
130 |       return rendered ? [rendered] : [];
131 |     }
132 |     
133 |     return node.children
134 |       .map((child, index) => renderChild(child))
135 |       .filter(child => child !== null && child !== undefined)
136 |       .map((child, index) => React.cloneElement(child as React.ReactElement, { key: index }));
137 |   }, [node.children, renderChild]);
138 | 
139 |   const visibleChildCount = renderedChildren.length;
140 | 
141 |   return (
142 |     <Splitter
143 |       className={className}
144 |       swapped={extractValue.asOptionalBoolean(node.props?.swapped)}
145 |       orientation={orientation}
146 |       splitterTemplate={renderChild(node.props?.splitterTemplate)}
147 |       initialPrimarySize={extractValue(node.props?.initialPrimarySize)}
148 |       minPrimarySize={extractValue(node.props?.minPrimarySize)}
149 |       maxPrimarySize={extractValue(node.props?.maxPrimarySize)}
150 |       floating={extractValue.asOptionalBoolean(node.props?.floating)}
151 |       resize={lookupEventHandler("resize")}
152 |       visibleChildCount={visibleChildCount}
153 |     >
154 |       {renderedChildren}
155 |     </Splitter>
156 |   );
157 | }
158 | 
159 | export const splitterComponentRenderer = createComponentRenderer(
160 |   COMP,
161 |   SplitterMd,
162 |   ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
163 |     return renderSplitter({
164 |       node,
165 |       extractValue,
166 |       className,
167 |       renderChild,
168 |       lookupEventHandler: lookupEventHandler as any,
169 |     });
170 |   },
171 | );
172 | 
173 | export const vSplitterComponentRenderer = createComponentRenderer(
174 |   "VSplitter",
175 |   VSplitterMd,
176 |   ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
177 |     return renderSplitter({
178 |       node,
179 |       extractValue,
180 |       className,
181 |       renderChild,
182 |       orientation: "vertical",
183 |       lookupEventHandler: lookupEventHandler as any,
184 |     });
185 |   },
186 | );
187 | 
188 | export const hSplitterComponentRenderer = createComponentRenderer(
189 |   "HSplitter",
190 |   HSplitterMd,
191 |   ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
192 |     return renderSplitter({
193 |       node,
194 |       extractValue,
195 |       className,
196 |       renderChild,
197 |       orientation: "horizontal",
198 |       lookupEventHandler: lookupEventHandler as any,
199 |     });
200 |   },
201 | );
202 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Tooltip/TooltipNative.tsx:
--------------------------------------------------------------------------------

```typescript
  1 | import { type ReactNode, type ForwardedRef, forwardRef } from "react";
  2 | import * as RadixTooltip from "@radix-ui/react-tooltip";
  3 | import { isPlainObject } from "lodash-es";
  4 | 
  5 | import styles from "./Tooltip.module.scss";
  6 | import { useTheme } from "../../components-core/theming/ThemeContext";
  7 | import { Markdown } from "../Markdown/Markdown";
  8 | 
  9 | type TooltipOptions = {
 10 |   /**
 11 |    * The duration from when the mouse enters a tooltip trigger until the tooltip opens
 12 |    */
 13 |   delayDuration?: number;
 14 | 
 15 |   /**
 16 |    * How much time a user has to enter another trigger without incurring a delay again
 17 |    */
 18 |   skipDelayDuration?: number;
 19 | 
 20 |   /**
 21 |    * The open state of the tooltip when it is initially rendered
 22 |    */
 23 |   defaultOpen?: boolean;
 24 | 
 25 |   /**
 26 |    * Whether to show the arrow pointing to the trigger element
 27 |    */
 28 |   showArrow?: boolean;
 29 | 
 30 |   /**
 31 |    * The preferred side of the trigger to render against when open
 32 |    */
 33 |   side?: "top" | "right" | "bottom" | "left";
 34 | 
 35 |   /**
 36 |    * The preferred alignment against the trigger
 37 |    */
 38 |   align?: "start" | "center" | "end";
 39 | 
 40 |   /**
 41 |    * The distance in pixels from the trigger
 42 |    */
 43 |   sideOffset?: number;
 44 | 
 45 |   /**
 46 |    * An offset in pixels from the "start" or "end" alignment options
 47 |    */
 48 |   alignOffset?: number;
 49 | 
 50 |   /**
 51 |    * When true, overrides the side and align preferences to prevent collisions with boundary edges
 52 |    */
 53 |   avoidCollisions?: boolean;
 54 | };
 55 | 
 56 | type TooltipProps = TooltipOptions & {
 57 |   /**
 58 |    * The open state of the tooltip externally controlled
 59 |    */
 60 |   open?: boolean;
 61 | 
 62 |   /**
 63 |    * The text content to display in the tooltip
 64 |    */
 65 |   text: string;
 66 | 
 67 |   /**
 68 |    * The markdown content to display in the tooltip
 69 |    */
 70 |   markdown?: string;
 71 | 
 72 |   /**
 73 |    * The template for the tooltip content
 74 |    */
 75 |   tooltipTemplate?: ReactNode;
 76 | 
 77 |   /**
 78 |    * The content that will trigger the tooltip (used when triggerRef is not provided)
 79 |    */
 80 |   children?: ReactNode;
 81 | };
 82 | 
 83 | export type { TooltipProps, TooltipOptions };
 84 | 
 85 | export const defaultProps: TooltipOptions = {
 86 |   delayDuration: 700,
 87 |   skipDelayDuration: 300,
 88 |   defaultOpen: false,
 89 |   showArrow: false,
 90 |   side: "top",
 91 |   align: "center",
 92 |   sideOffset: 4,
 93 |   alignOffset: 0,
 94 |   avoidCollisions: true,
 95 | };
 96 | 
 97 | export const Tooltip = forwardRef(function Tooltip({
 98 |   text,
 99 |   markdown,
100 |   tooltipTemplate,
101 |   delayDuration = defaultProps.delayDuration,
102 |   skipDelayDuration = defaultProps.skipDelayDuration,
103 |   defaultOpen = defaultProps.defaultOpen,
104 |   showArrow = defaultProps.showArrow,
105 |   side = defaultProps.side,
106 |   align = defaultProps.align,
107 |   sideOffset = defaultProps.sideOffset,
108 |   alignOffset = defaultProps.alignOffset,
109 |   avoidCollisions = defaultProps.avoidCollisions,
110 |   children,
111 |   open,
112 | }: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
113 |   const { root } = useTheme();
114 |   const showTooltip = !!(text || markdown || tooltipTemplate);
115 | 
116 |   return (
117 |     <RadixTooltip.Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>
118 |       <RadixTooltip.Root defaultOpen={defaultOpen} open={open}>
119 |         <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
120 |         <RadixTooltip.Portal container={root}>
121 |           {showTooltip && (
122 |             <RadixTooltip.Content
123 |               ref={ref}
124 |               className={styles.content}
125 |               side={side}
126 |               align={align}
127 |               sideOffset={sideOffset}
128 |               alignOffset={alignOffset}
129 |               avoidCollisions={avoidCollisions}
130 |               data-tooltip-container
131 |             >
132 |               {tooltipTemplate ? (
133 |                 tooltipTemplate
134 |               ) : markdown ? (
135 |                 <Markdown>{markdown}</Markdown>
136 |               ) : (
137 |                 text
138 |               )}
139 |               {showArrow && <RadixTooltip.Arrow className={styles.arrow} />}
140 |             </RadixTooltip.Content>
141 |           )}
142 |         </RadixTooltip.Portal>
143 |       </RadixTooltip.Root>
144 |     </RadixTooltip.Provider>
145 |   );
146 | });
147 | 
148 | /**
149 |  * Parses tooltip options from any input and returns an object containing only the option properties
150 |  * of Tooltip (excludes non-option properties like text, triggerRef, and children)
151 |  */
152 | export function parseTooltipOptions(input: any): Partial<TooltipOptions> {
153 |   // If input is a plain object, return it as TooltipOptions
154 |   if (isPlainObject(input)) {
155 |     return input as Partial<TooltipOptions>;
156 |   }
157 | 
158 |   // If input is a string, split by semicolon
159 |   if (typeof input === "string") {
160 |     const values = input
161 |       .split(";")
162 |       .map((value) => value.trim())
163 |       .filter((value) => value.length > 0);
164 |     const options: Partial<TooltipOptions> = {};
165 | 
166 |     for (const value of values) {
167 |       // Check if it's a name-value pair (contains colon)
168 |       if (value.includes(":")) {
169 |         const [name, val] = value.split(":").map((part) => part.trim());
170 |         if (name && val) {
171 |           // Parse the value based on the property type
172 |           const parsedValue = parseOptionValue(name, val);
173 |           if (parsedValue !== undefined) {
174 |             (options as any)[name] = parsedValue;
175 |           }
176 |         }
177 |       } else {
178 |         // Single value case - check various option types
179 |         const sideValues = ["top", "right", "bottom", "left"];
180 |         const alignValues = ["start", "center", "end"];
181 |         const booleanOptions = ["defaultOpen", "showArrow", "avoidCollisions"];
182 | 
183 |         if (sideValues.includes(value)) {
184 |           options.side = value as "top" | "right" | "bottom" | "left";
185 |         } else if (alignValues.includes(value)) {
186 |           options.align = value as "start" | "center" | "end";
187 |         } else if (booleanOptions.includes(value)) {
188 |           // Boolean option with true value
189 |           (options as any)[value] = true;
190 |         } else if (value.startsWith("!") && value.length > 1) {
191 |           // Boolean option with false value (negated with !)
192 |           const optionName = value.substring(1);
193 |           if (booleanOptions.includes(optionName)) {
194 |             (options as any)[optionName] = false;
195 |           }
196 |         }
197 |         // If it doesn't match any known values, ignore it
198 |       }
199 |     }
200 | 
201 |     return options;
202 |   }
203 | 
204 |   // For any other type, return empty object
205 |   return {};
206 | }
207 | 
208 | /**
209 |  * Helper function to parse option values based on the property name
210 |  */
211 | function parseOptionValue(name: string, value: string): any {
212 |   switch (name) {
213 |     case "delayDuration":
214 |     case "skipDelayDuration":
215 |     case "sideOffset":
216 |     case "alignOffset":
217 |       // Parse as number
218 |       const num = parseInt(value, 10);
219 |       return isNaN(num) ? undefined : num;
220 | 
221 |     case "defaultOpen":
222 |     case "showArrow":
223 |     case "avoidCollisions":
224 |       // Parse as boolean
225 |       const lowerVal = value.toLowerCase();
226 |       if (lowerVal === "true" || lowerVal === "1" || lowerVal === "yes") return true;
227 |       if (lowerVal === "false" || lowerVal === "0" || lowerVal === "no") return false;
228 |       return undefined;
229 | 
230 |     case "side":
231 |       // Validate side values
232 |       if (["top", "right", "bottom", "left"].includes(value)) {
233 |         return value as "top" | "right" | "bottom" | "left";
234 |       }
235 |       return undefined;
236 | 
237 |     case "align":
238 |       // Validate align values
239 |       if (["start", "center", "end"].includes(value)) {
240 |         return value as "start" | "center" | "end";
241 |       }
242 |       return undefined;
243 | 
244 |     default:
245 |       // Unknown property, return undefined
246 |       return undefined;
247 |   }
248 | }
249 | 
```

--------------------------------------------------------------------------------
/blog/scripts/get-releases.js:
--------------------------------------------------------------------------------

```javascript
  1 | #!/usr/bin/env node
  2 | 
  3 | const fs = require("fs").promises;
  4 | const path = require("path");
  5 | const { exit } = require("process");
  6 | const { sortByVersion, XMLUI_STANDALONE_PATTERN } = require("./utils.js");
  7 | 
  8 | const MD_HEADING_PATTERN = /^#{1,6} \S/;
  9 | const MD_LIST_COMMIT_SHA_PATTERN = /^-\s*[a-f0-9]{6,40}:\s*/;
 10 | 
 11 | const DEF_MAX_RELEASES_STR = "10";
 12 | if (require.main === module) {
 13 |   main();
 14 | }
 15 | 
 16 | function processEnvVars() {
 17 |   if (!process.env.GITHUB_TOKEN) {
 18 |     console.error(
 19 |       `No GitHub token provided. Skipping updating releases.
 20 | If you want to update the info about the releases, set the GITHUB_TOKEN environment variable to your Personal Access Token`,
 21 |     );
 22 |     exit(0);
 23 |   }
 24 |   const githubToken = process.env.GITHUB_TOKEN;
 25 |   const owner = process.env.GITHUB_REPOSITORY?.split("/")[0] || "xmlui-org";
 26 |   const repo = process.env.GITHUB_REPOSITORY?.split("/")[1] || "xmlui";
 27 |   const maxReleases = process.env.DOCS_XMLUI_MAX_RELEASES_LENGTH;
 28 |   return {
 29 |     owner,
 30 |     repo,
 31 |     githubToken,
 32 |     maxReleases,
 33 |   };
 34 | }
 35 | 
 36 | function processOptions(args) {
 37 |   handleHelpOption(args);
 38 |   const envVars = processEnvVars();
 39 | 
 40 |   const writeToStdout = args.includes("--stdout");
 41 | 
 42 |   const outputFile = getOptionValue(args, "--output");
 43 | 
 44 |   const maxReleasesStr =
 45 |     getOptionValue(args, "--maxReleases") ?? envVars.maxReleases ?? DEF_MAX_RELEASES_STR;
 46 |   const maxReleasesParse = parseInt(maxReleasesStr);
 47 |   const maxReleases = Number.isNaN(maxReleasesParse)
 48 |     ? parseInt(DEF_MAX_RELEASES_STR)
 49 |     : maxReleasesParse;
 50 | 
 51 |   return {
 52 |     ...envVars,
 53 |     outputFile,
 54 |     writeToStdout,
 55 |     maxReleases,
 56 |   };
 57 | }
 58 | 
 59 | async function getXmluiReleases(options) {
 60 |   try {
 61 |     const { Octokit } = await import("@octokit/rest");
 62 |     const octokit = new Octokit({
 63 |       auth: options.githubToken,
 64 |     });
 65 |     console.error("Fetching releases from GitHub API...");
 66 |     const { data: releases } = await octokit.rest.repos.listReleases({
 67 |       owner: options.owner,
 68 |       repo: options.repo,
 69 |     });
 70 | 
 71 |     const xmluiReleases = releases.filter((release) => release.tag_name.startsWith("xmlui@"));
 72 | 
 73 |     xmluiReleases.sort(sortByVersion);
 74 |     const releasesToProcess = xmluiReleases.slice(0, options.maxReleases);
 75 | 
 76 |     const availableVersions = [];
 77 | 
 78 |     for (const release of releasesToProcess) {
 79 |       const xmluiStandaloneAsset = release.assets.find((asset) =>
 80 |         XMLUI_STANDALONE_PATTERN.test(asset.name),
 81 |       );
 82 |       const changes = release.body ? parseBodyIntoChanges(release.body) : [];
 83 | 
 84 |       if (xmluiStandaloneAsset) {
 85 |         availableVersions.push({
 86 |           tag_name: release.tag_name,
 87 |           published_at: release.published_at,
 88 |           changes: changes,
 89 |           assets: [
 90 |             {
 91 |               name: xmluiStandaloneAsset.name,
 92 |               browser_download_url: xmluiStandaloneAsset.browser_download_url,
 93 |             },
 94 |           ],
 95 |         });
 96 |       }
 97 |     }
 98 | 
 99 |     return availableVersions;
100 |   } catch (error) {
101 |     console.error("Error fetching xmlui releases:", error.message);
102 |     if (error.status === 401) {
103 |       console.error("Authentication failed. Please check your GitHub token");
104 |     } else if (error.status === 403) {
105 |       console.error("Rate limit exceeded or insufficient permissions.");
106 |     }
107 |     return null;
108 |   }
109 | }
110 | 
111 | async function main() {
112 |   const args = process.argv.slice(2);
113 |   const options = processOptions(args);
114 |   const outputFile = options.outputFile;
115 | 
116 |   try {
117 |     const releases = await getXmluiReleases(options);
118 | 
119 |     console.error(`Got ${releases.length} xmlui releases`);
120 |     if (releases === null) {
121 |       console.error("Failed to fetch xmlui releases. Exiting with code 1.");
122 |       process.exit(1);
123 |     }
124 |     if (outputFile === null || options.writeToStdout) {
125 |       console.log(JSON.stringify(releases, null, 2));
126 |     } else {
127 |       // Ensure output directory exists
128 |       const outputDir = path.dirname(outputFile);
129 |       await fs.mkdir(outputDir, { recursive: true });
130 | 
131 |       // Write to file
132 |       await fs.writeFile(outputFile, JSON.stringify(releases, null, 2), "utf8");
133 |       console.error(`Successfully updated ${outputFile}`);
134 |     }
135 |   } catch (error) {
136 |     console.error("Error writing release info:", error);
137 |     process.exit(1);
138 |   }
139 | }
140 | 
141 | function getOptionValue(args, optionName) {
142 |   const optionIndex = args.indexOf(optionName);
143 |   if (optionIndex === -1) return null;
144 |   const value = args[optionIndex + 1];
145 |   if (value === undefined) return null;
146 |   if (value.startsWith("--")) return null;
147 |   return value;
148 | }
149 | 
150 | function handleHelpOption(args) {
151 |   if (args.includes("--help") || args.includes("-h")) {
152 |     const helpMessage = `
153 |   Fetches xmlui release information from GitHub and outputs it in JSON format.
154 |   This script relies on the GITHUB_TOKEN environment variable for authentication
155 |   when fetching data directly from the GitHub API.
156 | 
157 |   Usage:
158 |     ./get-releases.js [options]
159 | 
160 |   Options:
161 |     --output <file>    Specify the path to the output JSON file.
162 |                        If this option is not provided the output will be directed to standard output.
163 |     --stdout           Force the JSON output to standard output.
164 |     --maxReleases      Specify the maximum number of xmlui releases to include.
165 |                        Defaults to ${DEF_MAX_RELEASES_STR}.
166 |     --help, -h         Display this help message and exit.
167 | 
168 |   Environment Variables:
169 |     GITHUB_TOKEN                    Required for fetching data from the GitHub API.
170 |                                     A GitHub Personal Access Token with 'repo' scope (or at least
171 |                                     permissions to read repository releases).
172 |                                     The script will fail if this is not set
173 |                                     and API access is attempted.
174 |     GITHUB_REPOSITORY               Optional. The 'owner/repo' string.
175 |                                     Defaults to "xmlui-org/xmlui".
176 |     DOCS_XMLUI_MAX_RELEASES_LENGTH  Optional. The maximum number of xmlui releases to include.
177 |                                     Can be overridden by the --maxReleases command line option.
178 |                                     Defaults to ${DEF_MAX_RELEASES_STR}.
179 |   `;
180 |     console.log(helpMessage.trimStart().trimEnd());
181 |     process.exit(0);
182 |   }
183 | }
184 | 
185 | /**
186 |  * Parse markdown body into individual changes with commit SHA and description
187 |  * @param {string} body
188 |  * @returns {Array<{description: string, commit_sha: string}>}
189 |  */
190 | function parseBodyIntoChanges(body) {
191 |   const changes = [];
192 |   const lines = body.split("\n");
193 | 
194 |   for (const line of lines) {
195 |     // Skip markdown headings
196 |     if (MD_HEADING_PATTERN.test(line)) {
197 |       continue;
198 |     }
199 | 
200 |     // Process list items that may contain commit SHA
201 |     if (line.startsWith("- ")) {
202 |       const match = line.match(MD_LIST_COMMIT_SHA_PATTERN);
203 |       if (match) {
204 |         // Extract commit SHA and description
205 |         const commitSha = match[0].match(/[a-f0-9]{6,40}/)[0];
206 |         const description = line.replace(MD_LIST_COMMIT_SHA_PATTERN, "").trim();
207 |         changes.push({
208 |           description: description,
209 |           commit_sha: commitSha,
210 |         });
211 |       } else {
212 |         // List item without commit SHA
213 |         const description = line.substring(2).trim(); // Remove "- " prefix
214 |         if (description) {
215 |           changes.push({
216 |             description: description,
217 |             commit_sha: null, // No commit SHA available
218 |           });
219 |         }
220 |       }
221 |     }
222 |   }
223 | 
224 |   return changes;
225 | }
226 | 
```

--------------------------------------------------------------------------------
/docs/scripts/get-releases.js:
--------------------------------------------------------------------------------

```javascript
  1 | #!/usr/bin/env node
  2 | 
  3 | const fs = require("fs").promises;
  4 | const path = require("path");
  5 | const { exit } = require("process");
  6 | const { sortByVersion, XMLUI_STANDALONE_PATTERN } = require("./utils.js");
  7 | 
  8 | const MD_HEADING_PATTERN = /^#{1,6} \S/;
  9 | const MD_LIST_COMMIT_SHA_PATTERN = /^-\s*[a-f0-9]{6,40}:\s*/;
 10 | 
 11 | const DEF_MAX_RELEASES_STR = "10";
 12 | if (require.main === module) {
 13 |   main();
 14 | }
 15 | 
 16 | function processEnvVars() {
 17 |   if (!process.env.GITHUB_TOKEN) {
 18 |     console.error(
 19 |       `No GitHub token provided. Skipping updating releases.
 20 | If you want to update the info about the releases, set the GITHUB_TOKEN environment variable to your Personal Access Token`,
 21 |     );
 22 |     exit(0);
 23 |   }
 24 |   const githubToken = process.env.GITHUB_TOKEN;
 25 |   const owner = process.env.GITHUB_REPOSITORY?.split("/")[0] || "xmlui-org";
 26 |   const repo = process.env.GITHUB_REPOSITORY?.split("/")[1] || "xmlui";
 27 |   const maxReleases = process.env.DOCS_XMLUI_MAX_RELEASES_LENGTH;
 28 |   return {
 29 |     owner,
 30 |     repo,
 31 |     githubToken,
 32 |     maxReleases,
 33 |   };
 34 | }
 35 | 
 36 | function processOptions(args) {
 37 |   handleHelpOption(args);
 38 |   const envVars = processEnvVars();
 39 | 
 40 |   const writeToStdout = args.includes("--stdout");
 41 | 
 42 |   const outputFile = getOptionValue(args, "--output");
 43 | 
 44 |   const maxReleasesStr =
 45 |     getOptionValue(args, "--maxReleases") ?? envVars.maxReleases ?? DEF_MAX_RELEASES_STR;
 46 |   const maxReleasesParse = parseInt(maxReleasesStr);
 47 |   const maxReleases = Number.isNaN(maxReleasesParse)
 48 |     ? parseInt(DEF_MAX_RELEASES_STR)
 49 |     : maxReleasesParse;
 50 | 
 51 |   return {
 52 |     ...envVars,
 53 |     outputFile,
 54 |     writeToStdout,
 55 |     maxReleases,
 56 |   };
 57 | }
 58 | 
 59 | async function getXmluiReleases(options) {
 60 |   try {
 61 |     const { Octokit } = await import("@octokit/rest");
 62 |     const octokit = new Octokit({
 63 |       auth: options.githubToken,
 64 |     });
 65 |     console.error("Fetching releases from GitHub API...");
 66 |     const { data: releases } = await octokit.rest.repos.listReleases({
 67 |       owner: options.owner,
 68 |       repo: options.repo,
 69 |     });
 70 | 
 71 |     const xmluiReleases = releases.filter((release) => release.tag_name.startsWith("xmlui@"));
 72 | 
 73 |     xmluiReleases.sort(sortByVersion);
 74 |     const releasesToProcess = xmluiReleases.slice(0, options.maxReleases);
 75 | 
 76 |     const availableVersions = [];
 77 | 
 78 |     for (const release of releasesToProcess) {
 79 |       const xmluiStandaloneAsset = release.assets.find((asset) =>
 80 |         XMLUI_STANDALONE_PATTERN.test(asset.name),
 81 |       );
 82 |       const changes = release.body ? parseBodyIntoChanges(release.body) : [];
 83 | 
 84 |       if (xmluiStandaloneAsset) {
 85 |         availableVersions.push({
 86 |           tag_name: release.tag_name,
 87 |           published_at: release.published_at,
 88 |           changes: changes,
 89 |           assets: [
 90 |             {
 91 |               name: xmluiStandaloneAsset.name,
 92 |               browser_download_url: xmluiStandaloneAsset.browser_download_url,
 93 |             },
 94 |           ],
 95 |         });
 96 |       }
 97 |     }
 98 | 
 99 |     return availableVersions;
100 |   } catch (error) {
101 |     console.error("Error fetching xmlui releases:", error.message);
102 |     if (error.status === 401) {
103 |       console.error("Authentication failed. Please check your GitHub token");
104 |     } else if (error.status === 403) {
105 |       console.error("Rate limit exceeded or insufficient permissions.");
106 |     }
107 |     return null;
108 |   }
109 | }
110 | 
111 | async function main() {
112 |   const args = process.argv.slice(2);
113 |   const options = processOptions(args);
114 |   const outputFile = options.outputFile;
115 | 
116 |   try {
117 |     const releases = await getXmluiReleases(options);
118 | 
119 |     console.error(`Got ${releases.length} xmlui releases`);
120 |     if (releases === null) {
121 |       console.error("Failed to fetch xmlui releases. Exiting with code 1.");
122 |       process.exit(1);
123 |     }
124 |     if (outputFile === null || options.writeToStdout) {
125 |       console.log(JSON.stringify(releases, null, 2));
126 |     } else {
127 |       // Ensure output directory exists
128 |       const outputDir = path.dirname(outputFile);
129 |       await fs.mkdir(outputDir, { recursive: true });
130 | 
131 |       // Write to file
132 |       await fs.writeFile(outputFile, JSON.stringify(releases, null, 2), "utf8");
133 |       console.error(`Successfully updated ${outputFile}`);
134 |     }
135 |   } catch (error) {
136 |     console.error("Error writing release info:", error);
137 |     process.exit(1);
138 |   }
139 | }
140 | 
141 | function getOptionValue(args, optionName) {
142 |   const optionIndex = args.indexOf(optionName);
143 |   if (optionIndex === -1) return null;
144 |   const value = args[optionIndex + 1];
145 |   if (value === undefined) return null;
146 |   if (value.startsWith("--")) return null;
147 |   return value;
148 | }
149 | 
150 | function handleHelpOption(args) {
151 |   if (args.includes("--help") || args.includes("-h")) {
152 |     const helpMessage = `
153 |   Fetches xmlui release information from GitHub and outputs it in JSON format.
154 |   This script relies on the GITHUB_TOKEN environment variable for authentication
155 |   when fetching data directly from the GitHub API.
156 | 
157 |   Usage:
158 |     ./get-releases.js [options]
159 | 
160 |   Options:
161 |     --output <file>    Specify the path to the output JSON file.
162 |                        If this option is not provided the output will be directed to standard output.
163 |     --stdout           Force the JSON output to standard output.
164 |     --maxReleases      Specify the maximum number of xmlui releases to include.
165 |                        Defaults to ${DEF_MAX_RELEASES_STR}.
166 |     --help, -h         Display this help message and exit.
167 | 
168 |   Environment Variables:
169 |     GITHUB_TOKEN                    Required for fetching data from the GitHub API.
170 |                                     A GitHub Personal Access Token with 'repo' scope (or at least
171 |                                     permissions to read repository releases).
172 |                                     The script will fail if this is not set
173 |                                     and API access is attempted.
174 |     GITHUB_REPOSITORY               Optional. The 'owner/repo' string.
175 |                                     Defaults to "xmlui-org/xmlui".
176 |     DOCS_XMLUI_MAX_RELEASES_LENGTH  Optional. The maximum number of xmlui releases to include.
177 |                                     Can be overridden by the --maxReleases command line option.
178 |                                     Defaults to ${DEF_MAX_RELEASES_STR}.
179 |   `;
180 |     console.log(helpMessage.trimStart().trimEnd());
181 |     process.exit(0);
182 |   }
183 | }
184 | 
185 | /**
186 |  * Parse markdown body into individual changes with commit SHA and description
187 |  * @param {string} body
188 |  * @returns {Array<{description: string, commit_sha: string}>}
189 |  */
190 | function parseBodyIntoChanges(body) {
191 |   const changes = [];
192 |   const lines = body.split("\n");
193 | 
194 |   for (const line of lines) {
195 |     // Skip markdown headings
196 |     if (MD_HEADING_PATTERN.test(line)) {
197 |       continue;
198 |     }
199 | 
200 |     // Process list items that may contain commit SHA
201 |     if (line.startsWith("- ")) {
202 |       const match = line.match(MD_LIST_COMMIT_SHA_PATTERN);
203 |       if (match) {
204 |         // Extract commit SHA and description
205 |         const commitSha = match[0].match(/[a-f0-9]{6,40}/)[0];
206 |         const description = line.replace(MD_LIST_COMMIT_SHA_PATTERN, "").trim();
207 |         changes.push({
208 |           description: description,
209 |           commit_sha: commitSha,
210 |         });
211 |       } else {
212 |         // List item without commit SHA
213 |         const description = line.substring(2).trim(); // Remove "- " prefix
214 |         if (description) {
215 |           changes.push({
216 |             description: description,
217 |             commit_sha: null, // No commit SHA available
218 |           });
219 |         }
220 |       }
221 |     }
222 |   }
223 | 
224 |   return changes;
225 | }
226 | 
```

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

```typescript
  1 | import styles from "./TimeInput.module.scss";
  2 | 
  3 | import { createComponentRenderer } from "../../components-core/renderers";
  4 | import { parseScssVar } from "../../components-core/theming/themeVars";
  5 | import {
  6 |   createMetadata,
  7 |   d,
  8 |   dAutoFocus,
  9 |   dDidChange,
 10 |   dEnabled,
 11 |   dEndIcon,
 12 |   dEndText,
 13 |   dGotFocus,
 14 |   dInitialValue,
 15 |   dLostFocus,
 16 |   dReadonly,
 17 |   dStartIcon,
 18 |   dStartText,
 19 |   dValidationStatus,
 20 | } from "../metadata-helpers";
 21 | import { TimeInputNative, defaultProps } from "./TimeInputNative";
 22 | 
 23 | const COMP = "TimeInput";
 24 | 
 25 | export const TimeInputMd = createMetadata({
 26 |   status: "experimental",
 27 |   description:
 28 |     "`TimeInput` provides time input with support for 12-hour and 24-hour formats " +
 29 |     "and configurable precision for hours, minutes, and seconds.",
 30 |   parts: {
 31 |     hour: {
 32 |       description: "The hour input field.",
 33 |     },
 34 |     minute: {
 35 |       description: "The minute input field.",
 36 |     },
 37 |     second: {
 38 |       description: "The second input field.",
 39 |     },
 40 |     ampm: {
 41 |       description: "The AM/PM indicator.",
 42 |     },
 43 |     clearButton: {
 44 |       description: "The button to clear the time input.",
 45 |     },
 46 |   },
 47 |   props: {
 48 |     initialValue: dInitialValue(),
 49 |     autoFocus: dAutoFocus(),
 50 |     readOnly: dReadonly(),
 51 |     enabled: dEnabled(defaultProps.enabled),
 52 |     validationStatus: dValidationStatus(defaultProps.validationStatus),
 53 |     hour24: {
 54 |       description: "Whether to use 24-hour format (true) or 12-hour format with AM/PM (false)",
 55 |       valueType: "boolean",
 56 |       defaultValue: defaultProps.hour24,
 57 |     },
 58 |     seconds: {
 59 |       description: "Whether to show and allow input of seconds",
 60 |       valueType: "boolean", 
 61 |       defaultValue: defaultProps.seconds,
 62 |     },
 63 |     minTime: {
 64 |       description: "Minimum time that the user can select",
 65 |       valueType: "string",
 66 |     },
 67 |     maxTime: {
 68 |       description: "Maximum time that the user can select",
 69 |       valueType: "string",
 70 |     },
 71 |     clearable: {
 72 |       description: "Whether to show a clear button that allows clearing the selected time",
 73 |       valueType: "boolean",
 74 |       defaultValue: defaultProps.clearable,
 75 |     },
 76 |     clearIcon: {
 77 |       description: "The icon to display in the clear button.",
 78 |       valueType: "string",
 79 |     },
 80 |     clearToInitialValue: {
 81 |       description: "Whether the clear button resets the time input to its initial value",
 82 |       valueType: "boolean",
 83 |       defaultValue: defaultProps.clearToInitialValue,
 84 |     },
 85 |     required: {
 86 |       description: "Whether the time input should be required",
 87 |       valueType: "boolean",
 88 |       defaultValue: defaultProps.required,
 89 |     },
 90 |     startText: dStartText(),
 91 |     startIcon: dStartIcon(),
 92 |     endText: dEndText(),
 93 |     endIcon: dEndIcon(),
 94 |     gap: {
 95 |       description:
 96 |         "This property defines the gap between the adornments and the input area. If not " +
 97 |         "set, the gap declared by the current theme is used.",
 98 |       valueType: "string",
 99 |     },
100 |     emptyCharacter: {
101 |       description: "Character to use as placeholder for empty time values. If longer than 1 character, uses the first character. Defaults to '-'",
102 |       valueType: "string",
103 |       defaultValue: defaultProps.emptyCharacter,
104 |     },
105 |   },
106 |   events: {
107 |     didChange: dDidChange(COMP),
108 |     gotFocus: dGotFocus(COMP),
109 |     lostFocus: dLostFocus(COMP),
110 |     invalidTime: d("Fired when the user enters an invalid time"),
111 |   },
112 |   apis: {
113 |     focus: {
114 |       description: `Focus the ${COMP} component.`,
115 |       signature: "focus(): void",
116 |     },
117 |     value: {
118 |       description: `You can query the component's value. If no value is set, it will retrieve \`undefined\`.`,
119 |       signature: "get value(): any",
120 |     },
121 |     setValue: {
122 |       description: `This method sets the current value of the ${COMP}.`,
123 |       signature: "set value(value: any): void",
124 |       parameters: {
125 |         value: "The new time value to set for the time picker.",
126 |       },
127 |     },
128 |     isoValue: {
129 |       description: `Get the current time value formatted in ISO standard (HH:MM:SS) using 24-hour format, suitable for JSON serialization.`,
130 |       signature: "isoValue(): string | null",
131 |     },
132 |   },
133 |   themeVars: parseScssVar(styles.themeVars),
134 |   defaultThemeVars: {
135 |     // TimeInput specific theme variables
136 |     [`paddingHorizontal-${COMP}`]: "$space-2",
137 |     [`paddingVertical-${COMP}`]: "$space-2",
138 |     [`color-divider-${COMP}`]: "$textColor-secondary",
139 |     [`spacing-divider-${COMP}`]: "1px 0",
140 |     [`width-input-${COMP}`]: "1.8em",
141 |     [`minWidth-input-${COMP}`]: "0.54em",
142 |     [`padding-input-${COMP}`]: "0 2px",
143 |     [`textAlign-input-${COMP}`]: "center",
144 |     [`fontSize-input-${COMP}`]: "inherit",
145 |     [`borderRadius-input-${COMP}`]: "$borderRadius",
146 |     [`backgroundColor-input-${COMP}-invalid`]: "rgba(220, 53, 69, 0.15)",
147 |     [`padding-button-${COMP}`]: "4px 4px",
148 |     [`borderRadius-button-${COMP}`]: "$borderRadius",
149 |     [`hoverColor-button-${COMP}`]: "$color-surface-800",
150 |     [`disabledColor-button-${COMP}`]: "$textColor-disabled",
151 |     [`outlineColor-button-${COMP}--focused`]: "$color-accent-500",
152 |     [`outlineWidth-button-${COMP}--focused`]: "2px",
153 |     [`outlineOffset-button-${COMP}--focused`]: "0",
154 |     [`minWidth-ampm-${COMP}`]: "2.2em",
155 |     [`fontSize-ampm-${COMP}`]: "inherit",
156 |   },
157 | });
158 | 
159 | export const timeInputComponentRenderer = createComponentRenderer(
160 |   COMP,
161 |   TimeInputMd,
162 |   ({
163 |     node,
164 |     state,
165 |     updateState,
166 |     extractValue,
167 |     className,
168 |     lookupEventHandler,
169 |     registerComponentApi,
170 |   }) => {
171 |     const extractedInitialValue = extractValue(node.props.initialValue);
172 |     const stateValue = state?.value;
173 | 
174 |     return (
175 |       <TimeInputNative
176 |         className={className}
177 |         initialValue={extractedInitialValue}
178 |         value={stateValue}
179 |         updateState={updateState}
180 |         registerComponentApi={registerComponentApi}
181 |         enabled={extractValue.asOptionalBoolean(node.props.enabled, defaultProps.enabled)}
182 |         autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus, defaultProps.autoFocus)}
183 |         readOnly={extractValue.asOptionalBoolean(node.props.readOnly, defaultProps.readOnly)}
184 |         validationStatus={extractValue(node.props.validationStatus)}
185 |         hour24={extractValue.asOptionalBoolean(node.props.hour24, defaultProps.hour24)}
186 |         seconds={extractValue.asOptionalBoolean(node.props.seconds, defaultProps.seconds)}
187 |         minTime={extractValue(node.props.minTime)}
188 |         maxTime={extractValue(node.props.maxTime)}
189 |         clearable={extractValue.asOptionalBoolean(node.props.clearable, defaultProps.clearable)}
190 |         clearIcon={extractValue(node.props.clearIcon)}
191 |         clearToInitialValue={extractValue.asOptionalBoolean(node.props.clearToInitialValue, defaultProps.clearToInitialValue)}
192 |         required={extractValue.asOptionalBoolean(node.props.required, defaultProps.required)}
193 |         startText={extractValue(node.props.startText)}
194 |         startIcon={extractValue(node.props.startIcon)}
195 |         endText={extractValue(node.props.endText)}
196 |         endIcon={extractValue(node.props.endIcon)}
197 |         gap={extractValue.asOptionalString(node.props.gap)}
198 |         emptyCharacter={extractValue.asOptionalString(node.props.emptyCharacter, defaultProps.emptyCharacter)}
199 |         onDidChange={lookupEventHandler("didChange")}
200 |         onFocus={lookupEventHandler("gotFocus")}
201 |         onBlur={lookupEventHandler("lostFocus")}
202 |         onInvalidChange={lookupEventHandler("invalidTime")}
203 |       />
204 |     );
205 |   },
206 | );
207 | 
```

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

```typescript
  1 | import { createComponentRenderer } from "../../components-core/renderers";
  2 | import { parseScssVar } from "../../components-core/theming/themeVars";
  3 | import { createMetadata, d, dEnabled } from "../metadata-helpers";
  4 | import {
  5 |   PositionValues,
  6 |   defaultProps,
  7 |   type PageNumber,
  8 |   PageNumberValues,
  9 |   PaginationNative,
 10 | } from "./PaginationNative";
 11 | import styles from "./Pagination.module.scss";
 12 | import {
 13 |   orientationOptionMd,
 14 |   type OrientationOptions,
 15 |   orientationOptionValues,
 16 | } from "../abstractions";
 17 | 
 18 | const COMP = "Pagination";
 19 | 
 20 | export const PaginationMd = createMetadata({
 21 |   status: "experimental",
 22 |   description:
 23 |     "`Pagination` enables navigation through large datasets by dividing content into pages. " +
 24 |     "It provides controls for page navigation and can display current page information.",
 25 |   props: {
 26 |     enabled: dEnabled(),
 27 |     itemCount: d(
 28 |       "Total number of items to paginate. " +
 29 |         "If not provided, the component renders simplified pagination controls " +
 30 |         "that are enabled/disabled using the `hasPrevPage` and `hasNextPage` props.",
 31 |       undefined,
 32 |       "number",
 33 |     ),
 34 |     pageSize: d("Number of items per page", undefined, "number", defaultProps.pageSize),
 35 |     pageIndex: d("Current page index (0-based)", undefined, "number", defaultProps.pageIndex),
 36 |     maxVisiblePages: d(
 37 |       "Maximum number of page buttons to display. " +
 38 |         "If the value is not among the allowed values, it will fall back to the default.",
 39 |       PageNumberValues,
 40 |       "number",
 41 |       defaultProps.maxVisiblePages,
 42 |     ),
 43 |     showPageInfo: d(
 44 |       "Whether to show page information",
 45 |       undefined,
 46 |       "boolean",
 47 |       defaultProps.showPageInfo,
 48 |     ),
 49 |     showPageSizeSelector: d(
 50 |       "Whether to show the page size selector",
 51 |       undefined,
 52 |       "boolean",
 53 |       defaultProps.showPageSizeSelector,
 54 |     ),
 55 |     showCurrentPage: d(
 56 |       "Whether to show the current page indicator",
 57 |       undefined,
 58 |       "boolean",
 59 |       defaultProps.showCurrentPage,
 60 |     ),
 61 |     pageSizeOptions: d(
 62 |       "Array of page sizes the user can select from. If provided, shows a page size selector dropdown",
 63 |     ),
 64 |     hasPrevPage: d(
 65 |       "Whether to disable the previous page button. Only takes effect if itemCount is not provided.",
 66 |       undefined,
 67 |       "boolean",
 68 |     ),
 69 |     hasNextPage: d(
 70 |       "Whether to disable the next page button. Only takes effect if itemCount is not provided.",
 71 |       undefined,
 72 |       "boolean",
 73 |     ),
 74 |     orientation: {
 75 |       description: "Layout orientation of the pagination component",
 76 |       options: orientationOptionValues,
 77 |       type: "string",
 78 |       availableValues: orientationOptionMd,
 79 |       default: defaultProps.orientation,
 80 |     },
 81 |     pageSizeSelectorPosition: {
 82 |       description: "Determines where to place the page size selector in the layout.",
 83 |       options: PositionValues,
 84 |       type: "string",
 85 |       default: defaultProps.pageSizeSelectorPosition,
 86 |     },
 87 |     pageInfoPosition: {
 88 |       description: "Determines where to place the page information in the layout.",
 89 |       options: PositionValues,
 90 |       type: "string",
 91 |       default: defaultProps.pageInfoPosition,
 92 |     },
 93 |     buttonRowPosition: d(
 94 |       "Determines where to place the pagination button row in the layout.",
 95 |       PositionValues,
 96 |       "string",
 97 |       defaultProps.buttonRowPosition,
 98 |     ),
 99 |   },
100 |   events: {
101 |     pageDidChange: d("Fired when the current page changes"),
102 |     pageSizeDidChange: d("Fired when the page size changes"),
103 |   },
104 |   apis: {
105 |     moveFirst: {
106 |       description: "Moves to the first page",
107 |       signature: "moveFirst(): void",
108 |     },
109 |     moveLast: {
110 |       description: "Moves to the last page",
111 |       signature: "moveLast(): void",
112 |     },
113 |     movePrev: {
114 |       description: "Moves to the previous page",
115 |       signature: "movePrev(): void",
116 |     },
117 |     moveNext: {
118 |       description: "Moves to the next page",
119 |       signature: "moveNext(): void",
120 |     },
121 |     currentPage: {
122 |       description: "Gets the current page number (1-based)",
123 |     },
124 |     currentPageSize: {
125 |       description: "Gets the current page size",
126 |     },
127 |   },
128 |   themeVars: parseScssVar(styles.themeVars),
129 |   defaultThemeVars: {
130 |     "padding-Pagination": "$space-4",
131 |     "backgroundColor-Pagination": "transparent",
132 |     "borderColor-Pagination": "$color-gray-300",
133 |     "textColor-Pagination": "$color-gray-600",
134 |     "backgroundColor-selector-Pagination": "transparent",
135 |     "textColor-selector-Pagination": "$color-gray-600",
136 |     "borderRadius-selector-Pagination": "$borderRadius",
137 |     "gap-buttonRow-Pagination": "$space-2",
138 |   },
139 | });
140 | 
141 | export const paginationComponentRenderer = createComponentRenderer(
142 |   COMP,
143 |   PaginationMd,
144 |   ({ node, extractValue, lookupEventHandler, registerComponentApi, updateState, className }) => {
145 |     let maxVisiblePages = extractValue.asOptionalNumber(
146 |       node.props.maxVisiblePages,
147 |       defaultProps.maxVisiblePages,
148 |     );
149 |     if (!PageNumberValues.includes(maxVisiblePages as any)) {
150 |       console.warn(
151 |         `Invalid maxVisiblePages value provided To Pagination: ${maxVisiblePages}. Falling back to default.`,
152 |       );
153 |       maxVisiblePages = defaultProps.maxVisiblePages;
154 |     }
155 | 
156 |     let orientation = extractValue.asOptionalString(
157 |       node.props.orientation,
158 |       defaultProps.orientation,
159 |     );
160 |     if (!orientationOptionValues.includes(orientation as any)) {
161 |       console.warn(
162 |         `Invalid orientation value provided To Pagination: ${orientation}. Falling back to default.`,
163 |       );
164 |       orientation = defaultProps.orientation;
165 |     }
166 | 
167 |     return (
168 |       <PaginationNative
169 |         enabled={extractValue.asOptionalBoolean(node.props.enabled, true)}
170 |         itemCount={extractValue.asOptionalNumber(node.props.itemCount)}
171 |         pageSize={extractValue.asOptionalNumber(node.props.pageSize, defaultProps.pageSize)}
172 |         pageIndex={extractValue.asOptionalNumber(node.props.pageIndex, defaultProps.pageIndex)}
173 |         showPageInfo={extractValue.asOptionalBoolean(
174 |           node.props.showPageInfo,
175 |           defaultProps.showPageInfo,
176 |         )}
177 |         showPageSizeSelector={extractValue.asOptionalBoolean(
178 |           node.props.showPageSizeSelector,
179 |           defaultProps.showPageSizeSelector,
180 |         )}
181 |         showCurrentPage={extractValue.asOptionalBoolean(
182 |           node.props.showCurrentPage,
183 |           defaultProps.showCurrentPage,
184 |         )}
185 |         hasPrevPage={extractValue.asOptionalBoolean(node.props.hasPrevPage)}
186 |         hasNextPage={extractValue.asOptionalBoolean(node.props.hasNextPage)}
187 |         maxVisiblePages={maxVisiblePages as PageNumber}
188 |         pageSizeOptions={extractValue(node.props.pageSizeOptions) as number[] | undefined}
189 |         orientation={orientation as OrientationOptions}
190 |         buttonRowPosition={extractValue.asOptionalString(
191 |           node.props.buttonRowPosition,
192 |           defaultProps.buttonRowPosition,
193 |         )}
194 |         pageSizeSelectorPosition={extractValue.asOptionalString(
195 |           node.props.pageSizeSelectorPosition,
196 |           defaultProps.pageSizeSelectorPosition,
197 |         )}
198 |         pageInfoPosition={extractValue.asOptionalString(
199 |           node.props.pageInfoPosition,
200 |           defaultProps.pageInfoPosition,
201 |         )}
202 |         onPageDidChange={lookupEventHandler("pageDidChange")}
203 |         onPageSizeDidChange={lookupEventHandler("pageSizeDidChange")}
204 |         registerComponentApi={registerComponentApi}
205 |         updateState={updateState}
206 |         className={className}
207 |       />
208 |     );
209 |   },
210 | );
211 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/RadioGroup/RadioGroupNative.tsx:
--------------------------------------------------------------------------------

```typescript
  1 | import React, {
  2 |   createContext,
  3 |   type CSSProperties,
  4 |   type ForwardedRef,
  5 |   forwardRef,
  6 |   useCallback,
  7 |   useContext,
  8 |   useEffect,
  9 |   useId,
 10 |   useMemo,
 11 |   useRef,
 12 | } from "react";
 13 | import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 14 | import classnames from "classnames";
 15 | 
 16 | import styles from "./RadioGroup.module.scss";
 17 | 
 18 | import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
 19 | import { noop } from "../../components-core/constants";
 20 | import { useEvent } from "../../components-core/utils/misc";
 21 | import type { Option, ValidationStatus } from "../abstractions";
 22 | import OptionTypeProvider from "../Option/OptionTypeProvider";
 23 | import { UnwrappedRadioItem } from "./RadioItemNative";
 24 | import { convertOptionValue } from "../Option/OptionNative";
 25 | 
 26 | type RadioGroupProps = {
 27 |   id?: string;
 28 |   initialValue?: string;
 29 |   autofocus?: boolean;
 30 |   value?: string;
 31 |   enabled?: boolean;
 32 |   style?: CSSProperties;
 33 |   className?: string;
 34 |   validationStatus?: ValidationStatus;
 35 |   label?: string;
 36 |   labelPosition?: string;
 37 |   labelWidth?: string;
 38 |   labelBreak?: boolean;
 39 |   required?: boolean;
 40 |   readOnly?: boolean;
 41 |   updateState?: UpdateStateFn;
 42 |   onDidChange?: (newValue: string) => void;
 43 |   onFocus?: (ev: React.FocusEvent<HTMLDivElement>) => void;
 44 |   onBlur?: (ev: React.FocusEvent<HTMLDivElement>) => void;
 45 |   children?: React.ReactNode;
 46 |   registerComponentApi?: RegisterComponentApiFn;
 47 | };
 48 | 
 49 | export const defaultProps: Pick<
 50 |   RadioGroupProps,
 51 |   "value" | "initialValue" | "enabled" | "validationStatus" | "required" | "readOnly"
 52 | > = {
 53 |   value: "",
 54 |   initialValue: "",
 55 |   enabled: true,
 56 |   validationStatus: "none" as ValidationStatus,
 57 |   required: false,
 58 |   readOnly: false,
 59 | };
 60 | 
 61 | const RadioGroupStatusContext = createContext<{
 62 |   value?: string;
 63 |   setValue?: (value: string) => void;
 64 |   status: ValidationStatus;
 65 |   enabled?: boolean;
 66 | }>({
 67 |   status: "none",
 68 |   enabled: defaultProps.enabled,
 69 | });
 70 | 
 71 | export const RadioGroup = forwardRef(function RadioGroup(
 72 |   {
 73 |     id,
 74 |     value = defaultProps.value,
 75 |     initialValue = defaultProps.initialValue,
 76 |     autofocus,
 77 |     enabled = defaultProps.enabled,
 78 |     validationStatus = defaultProps.validationStatus,
 79 |     label,
 80 |     labelPosition,
 81 |     labelWidth,
 82 |     labelBreak,
 83 |     required = defaultProps.required,
 84 |     readOnly = defaultProps.readOnly,
 85 |     updateState = noop,
 86 |     onDidChange = noop,
 87 |     onFocus = noop,
 88 |     onBlur = noop,
 89 |     children,
 90 |     registerComponentApi,
 91 |     style,
 92 |     className,
 93 |     ...rest
 94 |   }: RadioGroupProps,
 95 |   forwardedRef: ForwardedRef<HTMLDivElement>,
 96 | ) {
 97 |   const [focused, setFocused] = React.useState(false);
 98 |   const radioGroupRef = useRef<HTMLDivElement>(null);
 99 | 
100 |   // --- Initialize the related field with the input's initial value
101 |   useEffect(() => {
102 |     updateState({ value: convertOptionValue(initialValue) }, { initial: true });
103 |   }, [initialValue, updateState]);
104 | 
105 |   // --- Handle autofocus by focusing the first radio option
106 |   useEffect(() => {
107 |     if (autofocus && radioGroupRef.current) {
108 |       // Find the first radio item element
109 |       const firstRadioItem = radioGroupRef.current.querySelector('[role="radio"]');
110 |       if (firstRadioItem) {
111 |         (firstRadioItem as HTMLElement).focus();
112 |       }
113 |     }
114 |   }, [autofocus]);
115 | 
116 |   // --- Custom focus handler for label clicks
117 |   const focusActiveOption = useCallback(() => {
118 |     if (radioGroupRef.current) {
119 |       // First try to find the currently selected radio option
120 |       const selectedRadio = radioGroupRef.current.querySelector('[role="radio"][aria-checked="true"]');
121 |       if (selectedRadio) {
122 |         (selectedRadio as HTMLElement).focus();
123 |         return;
124 |       }
125 |       
126 |       // If no option is selected, focus the first one
127 |       const firstRadio = radioGroupRef.current.querySelector('[role="radio"]');
128 |       if (firstRadio) {
129 |         (firstRadio as HTMLElement).focus();
130 |       }
131 |     }
132 |   }, []);
133 | 
134 |   // --- Handle the value change events for this input
135 | 
136 |   const updateValue = useCallback(
137 |     (value: string) => {
138 |       updateState({ value });
139 |       onDidChange(value);
140 |     },
141 |     [onDidChange, updateState],
142 |   );
143 | 
144 |   const onInputChange = useCallback(
145 |     (value: string) => {
146 |       if (readOnly) return;
147 |       updateValue(value);
148 |     },
149 |     [updateValue, readOnly],
150 |   );
151 | 
152 |   // --- Manage obtaining and losing the focus
153 |   const handleOnFocus = useCallback(
154 |     (ev: React.FocusEvent<HTMLDivElement, Element>) => {
155 |       setFocused(true);
156 |       onFocus?.(ev);
157 |     },
158 |     [onFocus],
159 |   );
160 | 
161 |   const handleOnBlur = useCallback(
162 |     (ev: React.FocusEvent<HTMLDivElement, Element>) => {
163 |       setFocused(false);
164 |       onBlur?.(ev);
165 |     },
166 |     [onBlur],
167 |   );
168 | 
169 |   const setValue = useEvent((val: string) => {
170 |     updateValue(val);
171 |   });
172 | 
173 |   useEffect(() => {
174 |     registerComponentApi?.({
175 |       //focus,
176 |       setValue,
177 |     });
178 |   }, [/* focus, */ registerComponentApi, setValue]);
179 | 
180 |   const contextValue = useMemo(() => {
181 |     return { value, setValue: updateValue, status: validationStatus, enabled };
182 |   }, [value, updateValue, validationStatus, enabled]);
183 | 
184 |   return (
185 |     <OptionTypeProvider Component={RadioGroupOption}>
186 |       <RadioGroupStatusContext.Provider value={contextValue}>
187 |         <InnerRadioGroup.Root
188 |           {...rest}
189 |           style={style}
190 |           ref={radioGroupRef}
191 |           id={id}
192 |           onBlur={handleOnBlur}
193 |           onFocus={handleOnFocus}
194 |           onValueChange={onInputChange}
195 |           value={value}
196 |           disabled={!enabled}
197 |           required={required}
198 |           aria-readonly={readOnly}
199 |           className={classnames(className, styles.radioGroupContainer, {
200 |             [styles.focused]: focused,
201 |             [styles.disabled]: !enabled,
202 |           })}
203 |         >
204 |           {children}
205 |         </InnerRadioGroup.Root>
206 |       </RadioGroupStatusContext.Provider>
207 |     </OptionTypeProvider>
208 |   );
209 | });
210 | 
211 | export const RadioGroupOption = ({
212 |   value,
213 |   label,
214 |   enabled = true,
215 |   optionRenderer,
216 |   style,
217 |   className,
218 | }: Option) => {
219 |   const id = useId();
220 |   const radioGroupContext = useContext(RadioGroupStatusContext);
221 | 
222 |   const statusStyles = useMemo(
223 |     () => ({
224 |       [styles.disabled]: radioGroupContext.enabled === false ? true : !enabled,
225 |       [styles.error]: value === radioGroupContext.value && radioGroupContext.status === "error",
226 |       [styles.warning]: value === radioGroupContext.value && radioGroupContext.status === "warning",
227 |       [styles.valid]: value === radioGroupContext.value && radioGroupContext.status === "valid",
228 |     }),
229 |     [enabled, radioGroupContext, value],
230 |   );
231 | 
232 |   const item = useMemo(
233 |     () => (
234 |       <>
235 |         <UnwrappedRadioItem
236 |           id={id}
237 |           value={value}
238 |           checked={value === radioGroupContext.value}
239 |           disabled={!enabled}
240 |           statusStyles={statusStyles}
241 |         />
242 |         <label htmlFor={id} className={classnames(styles.label, statusStyles)}>
243 |           {label ?? value}
244 |         </label>
245 |       </>
246 |     ),
247 |     [enabled, id, label, statusStyles, value, radioGroupContext],
248 |   );
249 | 
250 |   return (
251 |     <div
252 |       key={id}
253 |       className={classnames(styles.radioOptionContainer, className)}
254 |       style={style}
255 |       data-radio-item
256 |     >
257 |       {!!optionRenderer ? (
258 |         <label className={styles.optionLabel}>
259 |           <div className={styles.itemContainer}>{item}</div>
260 |           {optionRenderer({
261 |             $checked: value === radioGroupContext.value,
262 |             $setChecked: radioGroupContext.setValue,
263 |           })}
264 |         </label>
265 |       ) : (
266 |         item
267 |       )}
268 |     </div>
269 |   );
270 | };
271 | 
```

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

```scss
  1 | @use "../../components-core/theming/themes" as t;
  2 | 
  3 | // --- This code snippet is required to collect the theme variables used in this module
  4 | $themeVars: ();
  5 | @function createThemeVar($componentVariable) {
  6 |   $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  7 |   @return t.getThemeVar($themeVars, $componentVariable);
  8 | }
  9 | 
 10 | $component: "NavLink";
 11 | $themeVars: t.composePaddingVars($themeVars, $component);
 12 | $themeVars: t.composeBorderVars($themeVars, $component);
 13 | $backgroundColor-NavLink: createThemeVar("backgroundColor-#{$component}");
 14 | $backgroundColor-NavLink--hover: createThemeVar("backgroundColor-#{$component}--hover");
 15 | $backgroundColor-NavLink--hover--active: createThemeVar("backgroundColor-#{$component}--hover--active");
 16 | $backgroundColor-NavLink--active: createThemeVar("backgroundColor-#{$component}--active");
 17 | $backgroundColor-NavLink--pressed: createThemeVar("backgroundColor-#{$component}--pressed");
 18 | $backgroundColor-NavLink--pressed--active: createThemeVar("backgroundColor-#{$component}--pressed--active");
 19 | $fontSize-NavLink: createThemeVar("fontSize-#{$component}");
 20 | $wordWrap-NavLink: createThemeVar("wordWrap-#{$component}");
 21 | $textColor-NavLink: createThemeVar("textColor-#{$component}");
 22 | $textColor-NavLink--hover: createThemeVar("textColor-#{$component}--hover");
 23 | $textColor-NavLink--active: createThemeVar("textColor-#{$component}--active");
 24 | $textColor-NavLink--hover--active: createThemeVar("textColor-#{$component}--hover--active");
 25 | $textColor-NavLink--pressed: createThemeVar("textColor-#{$component}--pressed");
 26 | $textColor-NavLink--pressed--active: createThemeVar("textColor-#{$component}--pressed--active");
 27 | $color-icon-NavLink: createThemeVar("color-icon-#{$component}");
 28 | $fontFamily-NavLink: createThemeVar("fontFamily-#{$component}");
 29 | $fontWeight-NavLink: createThemeVar("fontWeight-#{$component}");
 30 | $fontWeight-NavLink--pressed: createThemeVar("fontWeight-#{$component}--pressed");
 31 | $fontWeight-NavLink--active: createThemeVar("fontWeight-#{$component}--active");
 32 | $borderRadius-indicator-NavLink: createThemeVar("borderRadius-indicator-#{$component}");
 33 | $thickness-indicator-NavLink: createThemeVar("thickness-indicator-#{$component}");
 34 | $color-indicator-NavLink: createThemeVar("color-indicator-#{$component}");
 35 | $color-indicator-NavLink--hover: createThemeVar("color-indicator-#{$component}--hover");
 36 | $color-indicator-NavLink--active: createThemeVar("color-indicator-#{$component}--active");
 37 | $color-indicator-NavLink--pressed: createThemeVar("color-indicator-#{$component}--pressed");
 38 | 
 39 | // Variables for @layer section
 40 | $outlineWidth-NavLink--focus: createThemeVar('outlineWidth-#{$component}--focus');
 41 | $outlineColor-NavLink--focus: createThemeVar('outlineColor-#{$component}--focus');
 42 | $outlineStyle-NavLink--focus: createThemeVar('outlineStyle-#{$component}--focus');
 43 | $outlineOffset-NavLink--focus: createThemeVar('outlineOffset-#{$component}--focus');
 44 | 
 45 | $transition: color 0.1s, background-color 0.1s;
 46 | 
 47 | @layer components {
 48 |   .content {
 49 |     --nav-link-level: 0;
 50 |     &.base {
 51 |       &::before{
 52 |         content: "";
 53 |         width: calc(var(--nav-link-level) * 1em);
 54 |         display: block;
 55 |         flex-shrink: 0;
 56 |       }
 57 |       @include t.borderVars($themeVars, $component);
 58 |       @include t.paddingVars($themeVars, $component);
 59 |       outline: inherit;
 60 |       text-decoration: none;
 61 |       cursor: pointer;
 62 |       display: flex;
 63 |       align-items: center;
 64 |       font-size: $fontSize-NavLink;
 65 |       font-weight: $fontWeight-NavLink;
 66 |       font-family: $fontFamily-NavLink;
 67 |       word-wrap: $wordWrap-NavLink;
 68 |       position: relative;
 69 |       transition: $transition;
 70 |       color: $textColor-NavLink;
 71 |       background-color: $backgroundColor-NavLink;
 72 |       flex-shrink: 0;
 73 |       white-space: nowrap;
 74 | 
 75 |       .icon {
 76 |         color: $color-icon-NavLink;
 77 |       }
 78 | 
 79 |       * {
 80 |         color: $textColor-NavLink;
 81 |       }
 82 | 
 83 |       &.includeHoverIndicator {
 84 |         &:after {
 85 |           transition: $transition;
 86 |           position: absolute;
 87 |           left: 0.1em;
 88 |           right: 0.1em;
 89 |           bottom: 0;
 90 |           height: $thickness-indicator-NavLink;
 91 |           border-radius: $borderRadius-indicator-NavLink;
 92 |           content: "";
 93 |         }
 94 |       }
 95 | 
 96 |       &:hover,
 97 |       &:focus-visible {
 98 |         color: $textColor-NavLink--hover;
 99 |         background-color: $backgroundColor-NavLink--hover;
100 |         * {
101 |           color: $textColor-NavLink--hover;
102 |         }
103 |         &:after {
104 |           background-color: $color-indicator-NavLink--hover;
105 |         }
106 |       }
107 | 
108 | 
109 |       &:focus-visible{
110 |         outline-width: $outlineWidth-NavLink--focus;
111 |         outline-color: $outlineColor-NavLink--focus;
112 |         outline-style: $outlineStyle-NavLink--focus;
113 |         outline-offset: $outlineOffset-NavLink--focus;
114 |       }
115 | 
116 |       &[role='menuitem']{           //e.g. inside a navGroup, for hover it focuses the item, so it's always visible, that's why we have this selector here
117 |         outline: none;
118 |         &:not(:hover):focus-visible{
119 |           outline-width: $outlineWidth-NavLink--focus;
120 |           outline-color: $outlineColor-NavLink--focus;
121 |           outline-style: $outlineStyle-NavLink--focus;
122 |           outline-offset: $outlineOffset-NavLink--focus;
123 |         }
124 |       }
125 | 
126 |       &:active.displayActive {
127 |         color: $textColor-NavLink--pressed;
128 |         background-color: $backgroundColor-NavLink--pressed;
129 |         font-weight: $fontWeight-NavLink--pressed;
130 |         * {
131 |           font-weight: $fontWeight-NavLink--pressed;
132 |           color: $textColor-NavLink--pressed;
133 |         }
134 |         &:after {
135 |           background-color: $color-indicator-NavLink--pressed;
136 |         }
137 |       }
138 | 
139 |       &.navItemActive {
140 |         color: $textColor-NavLink--active;
141 |         background-color: $backgroundColor-NavLink--active;
142 |         font-weight: $fontWeight-NavLink--active;
143 |         * {
144 |           font-weight: $fontWeight-NavLink--active;
145 |           color: $textColor-NavLink--active;
146 |         }
147 |         & > * {
148 |           z-index: 1;
149 |         }
150 |         &:hover {
151 |           color: $textColor-NavLink--hover--active;
152 |           background-color: $backgroundColor-NavLink--hover--active;
153 |           * {
154 |             color: $textColor-NavLink--hover--active;
155 |           }
156 |         }
157 |         &:after {
158 |           z-index: 0;
159 |           background-color: $color-indicator-NavLink--active;
160 |         }
161 | 
162 |         &:active {
163 |           color: $textColor-NavLink--pressed--active;
164 |           background-color: $backgroundColor-NavLink--pressed--active;
165 |           font-weight: $fontWeight-NavLink--pressed;
166 |           * {
167 |             font-weight: $fontWeight-NavLink--pressed;
168 |             color: $textColor-NavLink--pressed--active;
169 |           }
170 |           &:after {
171 |             background-color: $color-indicator-NavLink--pressed;
172 |           }
173 |         }
174 |       }
175 | 
176 |       &.disabled {
177 |         cursor: not-allowed;
178 |         color: t.$textColor--disabled;
179 |       }
180 | 
181 |       &.vertical {
182 |         &:after {
183 |           top: 0;
184 |           bottom: 0;
185 |           left: 0;
186 |           right: auto;
187 |           width: $thickness-indicator-NavLink;
188 |           height: auto;
189 |           border-radius: $borderRadius-indicator-NavLink;
190 |         }
191 |       }
192 | 
193 |       &.indented {
194 |         padding-left: 2.4em;
195 |         flex-shrink: 0;
196 |       }
197 |     }
198 |   }
199 | 
200 |   .innerContent{
201 |     display: flex;
202 |     align-items: center;
203 |     gap: t.$space-2;
204 |     flex: 1;
205 |     white-space: break-spaces;
206 |     overflow-wrap: anywhere;
207 |   }
208 | }
209 | 
210 | 
211 | // --- We export the theme variables to add them to the component renderer
212 | :export {
213 |   themeVars: t.json-stringify($themeVars);
214 | }
215 | 
```

