This is page 95 of 186. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/assets/img/bg-iphone-14-pro.jpg?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.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.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── 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.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/tests/language-server/format.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, test, expect } from "vitest";
2 | import { format, type FormatOptions } from "../../src/language-server/services/format";
3 | import { createXmlUiParser, toDbgString } from "../../src/parsers/xmlui-parser";
4 |
5 | describe("XML Formatter", () => {
6 | describe("Format Options", () => {
7 | test("should respect custom indentation", () => {
8 | const input = "<Fragment><Text>Content</Text></Fragment>";
9 | const result = formatTwice(input, { tabSize: 4, insertSpaces: true });
10 |
11 | expect(result).toEqual(
12 | `<Fragment>
13 | <Text>
14 | Content
15 | </Text>
16 | </Fragment>`,
17 | );
18 | });
19 |
20 | test("should respect tab indentation", () => {
21 | const input = "<Fragment><Text>Content</Text></Fragment>";
22 | const result = formatTwice(input, { tabSize: 4, insertSpaces: false });
23 |
24 | expect(result).toEqual(
25 | `<Fragment>
26 | \t<Text>
27 | \t\tContent
28 | \t</Text>
29 | </Fragment>`,
30 | );
31 | });
32 | });
33 |
34 | describe("Basic XML Formatting", () => {
35 | test("should format simple xmlui fragment", () => {
36 | const input = '<Fragment><Text testId="textShort" width="200px">Short</Text></Fragment>';
37 | const result = formatTwice(input);
38 |
39 | expect(result).toEqual(
40 | `<Fragment>
41 | <Text testId="textShort" width="200px">
42 | Short
43 | </Text>
44 | </Fragment>`,
45 | );
46 | });
47 |
48 | test("should format nested xmlui elements", () => {
49 | const input =
50 | '<Fragment><Text testId="textShort" width="200px">Short</Text><Text testId="textLong" width="200px" maxLines="2">Long text content</Text></Fragment>';
51 | const result = formatTwice(input);
52 |
53 | expect(result).toEqual(
54 | `<Fragment>
55 | <Text testId="textShort" width="200px">
56 | Short
57 | </Text>
58 | <Text testId="textLong" width="200px" maxLines="2">
59 | Long text content
60 | </Text>
61 | </Fragment>`,
62 | );
63 | });
64 |
65 | test("should preserve text content", () => {
66 | const input =
67 | "<Text>Though this long text does not fit into a single line, please do not break it!</Text>";
68 | const result = formatTwice(input);
69 |
70 | expect(result).toEqual(
71 | `<Text>
72 | Though this long text does not fit into a single line, please do not break it!
73 | </Text>`,
74 | );
75 | });
76 |
77 | test("should format self-closing tags", () => {
78 | const input = '<Fragment><Input type="text"/><Button/></Fragment>';
79 | const result = formatTwice(input);
80 |
81 | expect(result).toEqual(
82 | `<Fragment>
83 | <Input type="text" />
84 | <Button />
85 | </Fragment>`,
86 | );
87 | });
88 |
89 | test("should format key-only attribue", () => {
90 | const input = '<Fragment><Input type="text" enabled/><Button/></Fragment>';
91 | const result = formatTwice(input);
92 |
93 | expect(result).toEqual(
94 | `<Fragment>
95 | <Input type="text" enabled />
96 | <Button />
97 | </Fragment>`,
98 | );
99 | });
100 | });
101 |
102 | describe("CDATA Handling", () => {
103 | test("should preserve CDATA sections", () => {
104 | const input = "<Fragment><Text><![CDATA[Some <special> content & more]]></Text></Fragment>";
105 | const result = formatTwice(input);
106 |
107 | expect(result).toEqual(
108 | `<Fragment>
109 | <Text>
110 | <![CDATA[Some <special> content & more]]>
111 | </Text>
112 | </Fragment>`,
113 | );
114 | });
115 |
116 | test("should format XML with multiple CDATA sections", () => {
117 | const input =
118 | "<Fragment><Text><![CDATA[First CDATA]]></Text><Text><![CDATA[Second CDATA with <tags>]]></Text></Fragment>";
119 | const result = formatTwice(input);
120 |
121 | expect(result).toEqual(
122 | `<Fragment>
123 | <Text>
124 | <![CDATA[First CDATA]]>
125 | </Text>
126 | <Text>
127 | <![CDATA[Second CDATA with <tags>]]>
128 | </Text>
129 | </Fragment>`,
130 | );
131 | });
132 |
133 | test("should handle CDATA with special characters", () => {
134 | const input = "<Text><![CDATA[Content with & < > \" ' characters]]></Text>";
135 | const result = formatTwice(input);
136 |
137 | expect(result).toEqual(
138 | `<Text>
139 | <![CDATA[Content with & < > " ' characters]]>
140 | </Text>`,
141 | );
142 | });
143 | });
144 |
145 | describe("newlines", () => {
146 | test("keeps single blank line", () => {
147 | const result = formatTwice("<A />\n\n<A />");
148 | expect(result).toEqual(`<A />\n\n<A />`);
149 | });
150 |
151 | test("converts single whitespace only line to blank line", () => {
152 | const result = formatTwice("<A />\n \n<A />");
153 | expect(result).toEqual(`<A />\n\n<A />`);
154 | });
155 |
156 | test("keeps blank line around comment only line", () => {
157 | const result = formatTwice(`<A />
158 |
159 | <!--c-->
160 |
161 | <A />`);
162 | expect(result).toEqual(`<A />
163 |
164 | <!--c-->
165 |
166 | <A />`);
167 | });
168 |
169 | test("collapses multiple blank lines around comment only line", () => {
170 | const result = formatTwice(`<A />
171 |
172 |
173 | <!--c-->
174 |
175 |
176 | <A />`);
177 | expect(result).toEqual(`<A />
178 |
179 | <!--c-->
180 |
181 | <A />`);
182 | });
183 | test("collapses multiple blank lines around 2 comment only line", () => {
184 | const result = formatTwice(`<A />
185 |
186 |
187 | <!--c--><!--c-->
188 |
189 |
190 | <A />`);
191 | expect(result).toEqual(`<A />
192 |
193 | <!--c-->
194 | <!--c-->
195 |
196 | <A />`);
197 | });
198 |
199 | test("collapses multiple blank lines into single one", () => {
200 | const result = formatTwice("<A />\n\n\n<A />");
201 | expect(result).toEqual(`<A />\n\n<A />`);
202 | });
203 |
204 | test("collapses multiple whitespace only lines into single blank line", () => {
205 | const result = formatTwice("<A />\n \n \n<A />");
206 | expect(result).toEqual(`<A />\n\n<A />`);
207 | });
208 | });
209 |
210 | describe("comments", () => {
211 | test("should handle comment before tag name", () => {
212 | const input = `<<!--c-->n attr="val" attr2>
213 | text1
214 | <n2
215 | attr3="val2"
216 | attr4 />
217 | text2
218 | </n>`;
219 | const result = formatTwice(input);
220 |
221 | expect(result).toEqual(
222 | `< <!--c--> n attr="val" attr2>
223 | text1
224 | <n2
225 | attr3="val2"
226 | attr4 />
227 | text2
228 | </n>`,
229 | );
230 | });
231 |
232 | test("should handle comment after tag name", () => {
233 | const input = `<n<!--c--> attr="val" attr2>
234 | text1
235 | <n2
236 | attr3="val2"
237 | attr4 />
238 | text2
239 | </n>`;
240 | const result = formatTwice(input);
241 |
242 | expect(result).toEqual(
243 | `<n <!--c--> attr="val" attr2>
244 | text1
245 | <n2
246 | attr3="val2"
247 | attr4 />
248 | text2
249 | </n>`,
250 | );
251 | });
252 |
253 | test("should handle comment between attribute name and =", () => {
254 | const input = `<n attr<!--c-->="val" attr2>
255 | text1
256 | <n2
257 | attr3="val2"
258 | attr4 />
259 | text2
260 | </n>`;
261 | const result = formatTwice(input);
262 |
263 | expect(result).toEqual(
264 | `<n attr <!--c--> ="val" attr2>
265 | text1
266 | <n2
267 | attr3="val2"
268 | attr4 />
269 | text2
270 | </n>`,
271 | );
272 | });
273 |
274 | test("should handle comment before attribute value", () => {
275 | const input = `<n attr=<!--c-->"val" attr2>
276 | text1
277 | <n2
278 | attr3="val2"
279 | attr4 />
280 | text2
281 | </n>`;
282 | const result = formatTwice(input);
283 |
284 | expect(result).toEqual(
285 | `<n attr= <!--c--> "val" attr2>
286 | text1
287 | <n2
288 | attr3="val2"
289 | attr4 />
290 | text2
291 | </n>`,
292 | );
293 | });
294 |
295 | test("should handle comment between attributes", () => {
296 | const input = `<n attr="val"<!--c--> attr2>
297 | text1
298 | <n2
299 | attr3="val2"
300 | attr4 />
301 | text2
302 | </n>`;
303 | const result = formatTwice(input);
304 |
305 | expect(result).toEqual(
306 | `<n attr="val" <!--c--> attr2>
307 | text1
308 | <n2
309 | attr3="val2"
310 | attr4 />
311 | text2
312 | </n>`,
313 | );
314 | });
315 |
316 | test("should handle comment after last attribute", () => {
317 | const input = `<n attr="val" attr2<!--c-->>
318 | text1
319 | <n2
320 | attr3="val2"
321 | attr4 />
322 | text2
323 | </n>`;
324 | const result = formatTwice(input);
325 |
326 | expect(result).toEqual(
327 | `<n attr="val" attr2 <!--c-->>
328 | text1
329 | <n2
330 | attr3="val2"
331 | attr4 />
332 | text2
333 | </n>`,
334 | );
335 | });
336 |
337 | test("should handle comment after opening tag", () => {
338 | const input = `<n attr="val" attr2><!--c-->
339 | text1
340 | <n2
341 | attr3="val2"
342 | attr4 />
343 | text2
344 | </n>`;
345 | const result = formatTwice(input);
346 |
347 | expect(result).toEqual(
348 | `<n attr="val" attr2>
349 | <!--c-->
350 | text1
351 | <n2
352 | attr3="val2"
353 | attr4 />
354 | text2
355 | </n>`,
356 | );
357 | });
358 |
359 | test("should handle comment before text content", () => {
360 | const input = `<n attr="val" attr2>
361 | <!--c-->text1
362 | <n2
363 | attr3="val2"
364 | attr4 />
365 | text2
366 | </n>`;
367 | const result = formatTwice(input);
368 |
369 | expect(result).toEqual(
370 | `<n attr="val" attr2>
371 | <!--c-->text1
372 | <n2
373 | attr3="val2"
374 | attr4 />
375 | text2
376 | </n>`,
377 | );
378 | });
379 |
380 | test("should handle comment after text content", () => {
381 | const input = `<n attr="val" attr2>
382 | text1<!--c-->
383 | <n2
384 | attr3="val2"
385 | attr4 />
386 | text2
387 | </n>`;
388 | const result = formatTwice(input);
389 |
390 | expect(result).toEqual(
391 | `<n attr="val" attr2>
392 | text1 <!--c-->
393 | <n2
394 | attr3="val2"
395 | attr4 />
396 | text2
397 | </n>`,
398 | );
399 | });
400 |
401 | test("should handle comment before child element", () => {
402 | const input = `<n attr="val" attr2>
403 | text1
404 | <!--c--><n2
405 | attr3="val2"
406 | attr4 />
407 | text2
408 | </n>`;
409 | const result = formatTwice(input);
410 |
411 | expect(result).toEqual(
412 | `<n attr="val" attr2>
413 | text1
414 | <!--c-->
415 | <n2
416 | attr3="val2"
417 | attr4 />
418 | text2
419 | </n>`,
420 | );
421 | });
422 |
423 | test("should handle comment in self closing tag after name", () => {
424 | const input = `<n attr="val" attr2>
425 | text1
426 | <n2<!--c-->
427 | attr3="val2"
428 | attr4 />
429 | text2
430 | </n>`;
431 | const result = formatTwice(input);
432 |
433 | expect(result).toEqual(
434 | `<n attr="val" attr2>
435 | text1
436 | <n2
437 | <!--c-->
438 | attr3="val2"
439 | attr4 />
440 | text2
441 | </n>`,
442 | );
443 | });
444 |
445 | test("should handle comment in self closing tag after newline name", () => {
446 | const input = `<n attr="val" attr2>
447 | text1
448 | <n2
449 | <!--c-->attr3="val2"
450 | attr4 />
451 | text2
452 | </n>`;
453 | const result = formatTwice(input);
454 |
455 | expect(result).toEqual(
456 | `<n attr="val" attr2>
457 | text1
458 | <n2
459 | <!--c-->
460 | attr3="val2"
461 | attr4 />
462 | text2
463 | </n>`,
464 | );
465 | });
466 |
467 | test("should handle comment in self closing tag between attributes", () => {
468 | const input = `<n attr="val" attr2>
469 | text1
470 | <n2
471 | attr3="val2"<!--c-->
472 | attr4 />
473 | text2
474 | </n>`;
475 | const result = formatTwice(input);
476 |
477 | expect(result).toEqual(
478 | `<n attr="val" attr2>
479 | text1
480 | <n2
481 | attr3="val2"
482 | <!--c-->
483 | attr4 />
484 | text2
485 | </n>`,
486 | );
487 | });
488 |
489 | test("should handle comment before self-closing tag closing", () => {
490 | const input = `<n attr="val" attr2>
491 | text1
492 | <n2
493 | attr3="val2"
494 | attr4<!--c--> />
495 | text2
496 | </n>`;
497 | const result = formatTwice(input);
498 |
499 | expect(result).toEqual(
500 | `<n attr="val" attr2>
501 | text1
502 | <n2
503 | attr3="val2"
504 | attr4
505 | <!--c--> />
506 | text2
507 | </n>`,
508 | );
509 | });
510 |
511 | test("should handle comment between text and closing tag", () => {
512 | const input = `<n attr="val" attr2>
513 | text1
514 | <n2
515 | attr3="val2"
516 | attr4 />
517 | text2<!--c-->
518 | </n>`;
519 | const result = formatTwice(input);
520 |
521 | expect(result).toEqual(
522 | `<n attr="val" attr2>
523 | text1
524 | <n2
525 | attr3="val2"
526 | attr4 />
527 | text2 <!--c-->
528 | </n>`,
529 | );
530 | });
531 |
532 | test("should handle comment between text with newline and closing tag", () => {
533 | const input = `<n attr="val" attr2>
534 | text1
535 | <n2
536 | attr3="val2"
537 | attr4 />
538 | text2
539 | <!--c-->
540 | </n>`;
541 | const result = formatTwice(input);
542 |
543 | expect(result).toEqual(
544 | `<n attr="val" attr2>
545 | text1
546 | <n2
547 | attr3="val2"
548 | attr4 />
549 | text2
550 | <!--c-->
551 | </n>`,
552 | );
553 | });
554 |
555 | test("should handle comment right after last tag", () => {
556 | const input = `<n attr="val" attr2>
557 | text1
558 | <n2
559 | attr3="val2"
560 | attr4 />
561 | text2
562 | </n><!--c-->`;
563 | const result = formatTwice(input);
564 |
565 | expect(result).toEqual(
566 | `<n attr="val" attr2>
567 | text1
568 | <n2
569 | attr3="val2"
570 | attr4 />
571 | text2
572 | </n> <!--c-->`,
573 | );
574 | });
575 |
576 | test("should handle comment after closeNodeStart", () => {
577 | const input = `<n attr="val" attr2>
578 | text1
579 | <n2
580 | attr3="val2"
581 | attr4 />
582 | text2
583 | </<!--c-->n>`;
584 | const result = formatTwice(input);
585 |
586 | expect(result).toEqual(
587 | `<n attr="val" attr2>
588 | text1
589 | <n2
590 | attr3="val2"
591 | attr4 />
592 | text2
593 | </ <!--c--> n>`,
594 | );
595 | });
596 |
597 | test("should handle comment after closeing tag name", () => {
598 | const input = `<n attr="val" attr2>
599 | text1
600 | <n2
601 | attr3="val2"
602 | attr4 />
603 | text2
604 | </n<!--c-->>`;
605 | const result = formatTwice(input);
606 |
607 | expect(result).toEqual(
608 | `<n attr="val" attr2>
609 | text1
610 | <n2
611 | attr3="val2"
612 | attr4 />
613 | text2
614 | </n <!--c-->>`,
615 | );
616 | });
617 |
618 | test("single comment between tags does not break line", () => {
619 | const input = `<n>
620 | <n1 /> <!-- c -->
621 | <n2 />
622 | </n>`;
623 | const result = formatTwice(input);
624 |
625 | expect(result).toEqual(
626 | `<n>
627 | <n1 /> <!-- c -->
628 | <n2 />
629 | </n>`,
630 | );
631 | });
632 |
633 | test("single comment between tags keeps linebreak", () => {
634 | const input = `<n>
635 | <n1 />
636 | <!-- c -->
637 | <n2 />
638 | </n>`;
639 | const result = formatTwice(input);
640 |
641 | expect(result).toEqual(
642 | `<n>
643 | <n1 />
644 | <!-- c -->
645 | <n2 />
646 | </n>`,
647 | );
648 | });
649 |
650 | test("adds newline after single comment between tags", () => {
651 | const input = `<n>
652 | <n1 />
653 | <!-- c --><n2 />
654 | </n>`;
655 | const result = formatTwice(input);
656 |
657 | expect(result).toEqual(
658 | `<n>
659 | <n1 />
660 | <!-- c -->
661 | <n2 />
662 | </n>`,
663 | );
664 | });
665 |
666 | test("single comment as the only content in tag", () => {
667 | const input = `<n> <!-- c --> </n>`;
668 | const result = formatTwice(input);
669 |
670 | expect(result).toEqual(`<n> <!-- c -->
671 | </n>`);
672 | });
673 |
674 | test("2 comments as the only content in tag", () => {
675 | const input = `<n> <!-- c --> <!-- d --> </n>`;
676 | const result = formatTwice(input);
677 |
678 | expect(result).toEqual(
679 | `<n> <!-- c -->
680 | <!-- d -->
681 | </n>`,
682 | );
683 | });
684 |
685 | test("single comment, error node in before attributes", () => {
686 | const input = `<n attr="val" <!-- long, long commonet long, long commonet long, long commonet long, long commonet --> attr2 ? ></n2>`;
687 | const result = formatTwice(input);
688 |
689 | expect(result).toEqual(
690 | `<n
691 | attr="val"
692 | <!-- long, long commonet long, long commonet long, long commonet long, long commonet -->
693 | attr2 ?></n2>`,
694 | );
695 | });
696 |
697 | test("single comment before ':' in tag name ", () => {
698 | const input = `<ns<!-- c -->:n attr="val" />`;
699 | const result = formatTwice(input);
700 |
701 | expect(result).toEqual(`<ns <!-- c --> :n attr="val" />`);
702 | });
703 |
704 | test("single comment after ':' in tag name ", () => {
705 | const input = `<ns:<!-- c -->n attr="val" />`;
706 | const result = formatTwice(input);
707 |
708 | expect(result).toEqual(`<ns: <!-- c --> n attr="val" />`);
709 | });
710 |
711 | test("single comment before ':' in attr name", () => {
712 | const input = `<n ns<!-- c -->:attr="val" />`;
713 | const result = formatTwice(input);
714 |
715 | expect(result).toEqual(`<n ns <!-- c --> :attr="val" />`);
716 | });
717 |
718 | test("single comment after ':' in attr name", () => {
719 | const input = `<n ns:<!-- c -->attr="val" />`;
720 | const result = formatTwice(input);
721 |
722 | expect(result).toEqual(`<n ns: <!-- c --> attr="val" />`);
723 | });
724 |
725 | test("should handle comments before eof", () => {
726 | const input = `<Fragment><Text>Content</Text></Fragment>
727 | <!-- This is a comment -->`;
728 | const result = formatTwice(input);
729 |
730 | expect(result).toEqual(
731 | `<Fragment>
732 | <Text>
733 | Content
734 | </Text>
735 | </Fragment>
736 | <!-- This is a comment -->`,
737 | );
738 | });
739 |
740 | test("should handle comments after text, before eof", () => {
741 | const input = `Content <!-- c-->`;
742 | const result = formatTwice(input);
743 |
744 | expect(result).toEqual(`Content <!-- c-->`);
745 | });
746 | });
747 | describe("Edge Cases", () => {
748 | test("should handle empty string", () => {
749 | const result = formatTwice("");
750 | expect(result).toEqual("");
751 | });
752 |
753 | test("should handle whitespace-only string", () => {
754 | const result = formatTwice(" \n \t ");
755 | expect(result).toEqual("");
756 | });
757 |
758 | test("should handle single self-closing tag", () => {
759 | const input = '<Input type="text"/>';
760 | const result = formatTwice(input);
761 |
762 | expect(result).toEqual(`<Input type="text" />`);
763 | });
764 |
765 | test("should handle deeply nested elements", () => {
766 | const input =
767 | "<Fragment><Container><Section><Text>Deep content</Text></Section></Container></Fragment>";
768 | const result = formatTwice(input);
769 |
770 | expect(result).toEqual(
771 | `<Fragment>
772 | <Container>
773 | <Section>
774 | <Text>
775 | Deep content
776 | </Text>
777 | </Section>
778 | </Container>
779 | </Fragment>`,
780 | );
781 | });
782 |
783 | test("should handle mixed content", () => {
784 | const input = "<Text>Before<Bold>bold</Bold>After</Text>";
785 | const result = formatTwice(input);
786 |
787 | expect(result).toEqual(
788 | `<Text>
789 | Before
790 | <Bold>
791 | bold
792 | </Bold>
793 | After
794 | </Text>`,
795 | );
796 | });
797 | });
798 |
799 | describe("Real-world xmlui Examples", () => {
800 | test("should format typical xmlui component", () => {
801 | const input = `<Fragment>
802 | <Text testId="textShort" width="200px">Short</Text>
803 | <Text testId="textLong" width="200px" maxLines="2">
804 | Though this long text does not fit into a single line, please do not break it!
805 | </Text>
806 | </Fragment>`;
807 |
808 | const result = formatTwice(input);
809 |
810 | expect(result).toEqual(
811 | `<Fragment>
812 | <Text testId="textShort" width="200px">
813 | Short
814 | </Text>
815 | <Text testId="textLong" width="200px" maxLines="2">
816 | Though this long text does not fit into a single line, please do not break it!
817 | </Text>
818 | </Fragment>`,
819 | );
820 | });
821 |
822 | test("should format long attribute list in paired tag", () => {
823 | const input =
824 | '<Button testId="submitBtn" variant="primary" size="large" disabled="false" onClick="handleClick">Submit</Button>';
825 | const result = formatTwice(input);
826 |
827 | expect(result).toEqual(
828 | `<Button
829 | testId="submitBtn"
830 | variant="primary"
831 | size="large"
832 | disabled="false"
833 | onClick="handleClick">
834 | Submit
835 | </Button>`,
836 | );
837 | });
838 |
839 | test("should format long attribute list in self-closing tag", () => {
840 | const input =
841 | '<Button testId="submitBtn" variant="primary" size="large" disabled="false" onClick="handleClick"/>';
842 | const result = formatTwice(input);
843 |
844 | expect(result).toEqual(
845 | `<Button
846 | testId="submitBtn"
847 | variant="primary"
848 | size="large"
849 | disabled="false"
850 | onClick="handleClick" />`,
851 | );
852 | });
853 |
854 | test("should format complex xmlui layout", () => {
855 | const input =
856 | "<Fragment><Header><Title>Page Title</Title></Header><Main><Section><Text>Content</Text><Button>Action</Button></Section></Main><Footer><Text>Footer content</Text></Footer></Fragment>";
857 | const result = formatTwice(input);
858 |
859 | expect(result).toEqual(
860 | `<Fragment>
861 | <Header>
862 | <Title>
863 | Page Title
864 | </Title>
865 | </Header>
866 | <Main>
867 | <Section>
868 | <Text>
869 | Content
870 | </Text>
871 | <Button>
872 | Action
873 | </Button>
874 | </Section>
875 | </Main>
876 | <Footer>
877 | <Text>
878 | Footer content
879 | </Text>
880 | </Footer>
881 | </Fragment>`,
882 | );
883 | });
884 | });
885 |
886 | describe("Additional Test Cases", () => {
887 | test("should handle multiple comments in same line", () => {
888 | const input = `<Fragment><!-- comment1 --><!-- comment2 --><Text>Content</Text></Fragment>`;
889 | const result = formatTwice(input);
890 |
891 | expect(result).toEqual(
892 | `<Fragment> <!-- comment1 -->
893 | <!-- comment2 -->
894 | <Text>
895 | Content
896 | </Text>
897 | </Fragment>`,
898 | );
899 | });
900 |
901 | test("should handle XML with namespaces", () => {
902 | const input = `<ns:Fragment xmlns:ns="http://example.com">
903 | <ns:Text>Content</ns:Text>
904 | </ns:Fragment>`;
905 | const result = formatTwice(input);
906 |
907 | expect(result).toEqual(
908 | `<ns:Fragment xmlns:ns="http://example.com">
909 | <ns:Text>
910 | Content
911 | </ns:Text>
912 | </ns:Fragment>`,
913 | );
914 | });
915 |
916 | test("should handle XML with escaped content", () => {
917 | const input = `<Fragment>
918 | <Text><div>Content</div> & "quotes"</Text>
919 | </Fragment>`;
920 | const result = formatTwice(input);
921 |
922 | expect(result).toEqual(
923 | `<Fragment>
924 | <Text>
925 | <div>Content</div> & "quotes"
926 | </Text>
927 | </Fragment>`,
928 | );
929 | });
930 |
931 | test("should handle XML with mixed line endings", () => {
932 | const input = `<Fragment>\r\n<Text>Content</Text>\r\n</Fragment>`;
933 | const result = formatTwice(input);
934 |
935 | expect(result).toEqual(
936 | `<Fragment>
937 | <Text>
938 | Content
939 | </Text>
940 | </Fragment>`,
941 | );
942 | });
943 |
944 | test("should handle XML with trailing whitespace", () => {
945 | const input = `<Fragment/> `;
946 | const result = formatTwice(input);
947 |
948 | expect(result).toEqual(`<Fragment />`);
949 | });
950 |
951 | test("should handle XML with very long lines", () => {
952 | const input = `<Fragment><Text attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5" attr6="value6" attr7="value7" attr8="value8" attr9="value9" attr10="value10">text content</Text></Fragment>`;
953 | const result = formatTwice(input);
954 |
955 | expect(result).toEqual(
956 | `<Fragment>
957 | <Text
958 | attr1="value1"
959 | attr2="value2"
960 | attr3="value3"
961 | attr4="value4"
962 | attr5="value5"
963 | attr6="value6"
964 | attr7="value7"
965 | attr8="value8"
966 | attr9="value9"
967 | attr10="value10">
968 | text content
969 | </Text>
970 | </Fragment>`,
971 | );
972 | });
973 | });
974 | });
975 |
976 | function formatFromString(
977 | input: string,
978 | options: FormatOptions = { tabSize: 2, insertSpaces: true },
979 | ) {
980 | const parser = createXmlUiParser(input);
981 | const { node } = parser.parse();
982 | const defaultOptions: FormatOptions = { insertSpaces: true, tabSize: 2, ...options };
983 |
984 | return format(node, parser.getText, defaultOptions);
985 | }
986 |
987 | /* also tests idempotency */
988 | function formatTwice(input: string, options: FormatOptions = { tabSize: 2, insertSpaces: true }) {
989 | const firstFormat = formatFromString(input, options);
990 | const secondFormat = formatFromString(firstFormat, options);
991 |
992 | expect(firstFormat).toBe(secondFormat);
993 | return firstFormat;
994 | }
995 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/themes/root.ts:
--------------------------------------------------------------------------------
```typescript
1 | import type { ThemeDefinition } from "../../../abstractions/ThemingDefs";
2 | import { palette } from "./palette";
3 |
4 | const {
5 | $colorSurface0,
6 | $colorSurface50,
7 | $colorSurface100,
8 | $colorSurface200A80,
9 | $colorSurface200A70,
10 | $colorSurface200,
11 | $colorSurface300,
12 | $colorSurface400,
13 | $colorSurface500,
14 | $colorSurface500A80,
15 | $colorSurface500A60,
16 | $colorSurface600,
17 | $colorSurface700,
18 | $colorSurface800,
19 | $colorSurface900,
20 | $colorSurface950,
21 |
22 | $colorPrimary50,
23 | $colorPrimary950,
24 |
25 | $colorWarn700,
26 |
27 | $colorDanger400,
28 | $colorDanger500,
29 | $colorDanger600,
30 | $colorDanger700,
31 |
32 | $colorSuccess600,
33 |
34 | $colorInfo600,
35 | $colorInfo800,
36 | } = palette;
37 |
38 | // --- This theme contains the application-bound base theme variables and their default values.
39 | // --- Individual controls also add their component-specific default theme variable values.
40 | export const RootThemeDefinition: ThemeDefinition = {
41 | id: "root",
42 | resources: {
43 | // "font.inter": "https://rsms.me/inter/inter.css",
44 | },
45 | themeVars: {
46 | // --- The unit of measurement for all sizes/spaces
47 | "space-base": "0.25rem",
48 |
49 | // --- Default surface color shades (form white to black)
50 | "const-color-surface-0": "white",
51 | "const-color-surface-50": "hsl(204, 30.3%, 96.5%)",
52 | "const-color-surface-100": "hsl(204, 30.3%, 93%)",
53 | "const-color-surface-200": "hsl(204, 30.3%, 85%)",
54 | "const-color-surface-300": "hsl(204, 30.3%, 75%)",
55 | "const-color-surface-400": "hsl(204, 30.3%, 65%)",
56 | "const-color-surface-500": "hsl(204, 30.3%, 52%)", // #6894AD
57 | "const-color-surface-600": "hsl(204, 30.3%, 45%)",
58 | "const-color-surface-700": "hsl(204, 30.3%, 35%)",
59 | "const-color-surface-800": "hsl(204, 30.3%, 27%)",
60 | "const-color-surface-900": "hsl(204, 30.3%, 16%)",
61 | "const-color-surface-950": "hsl(204, 30.3%, 13%)",
62 | "const-color-surface-1000": "hsl(204, 30.3%, 9%)",
63 | "const-color-surface": "$const-color-surface-500",
64 |
65 | // --- Primary color shades (bluish)
66 | "const-color-primary-50": "hsl(212,71.9%,94.5%)",
67 | "const-color-primary-100": "hsl(212,71.9%,89.1%)",
68 | "const-color-primary-200": "hsl(212,71.9%,78.1%)",
69 | "const-color-primary-300": "hsl(212,71.9%,67.2%)",
70 | "const-color-primary-400": "hsl(212,71.9%,56.3%)",
71 | "const-color-primary-500": "#206bc4",
72 | "const-color-primary-600": "hsl(212,71.9%,36.3%)",
73 | "const-color-primary-700": "hsl(212,71.9%,27.2%)",
74 | "const-color-primary-800": "hsl(212,71.9%,18.1%)",
75 | "const-color-primary-900": "hsl(212,71.9%,9.1%)",
76 | "const-color-primary-950": "hsl(212,71.9%,4.5%)",
77 | "const-color-primary": "$const-color-primary-500",
78 |
79 | // --- Secondary color shades (steel-bluish)
80 | "const-color-secondary-50": "hsl(211.7,21.2%,96.9%)",
81 | "const-color-secondary-100": "hsl(211.7,21.2%,93.7%)",
82 | "const-color-secondary-200": "hsl(211.7,21.2%,87.4%)",
83 | "const-color-secondary-300": "hsl(211.7,21.2%,81.1%)",
84 | "const-color-secondary-400": "hsl(211.7,21.2%,74.8%)",
85 | "const-color-secondary-500": "#6c7a91",
86 | "const-color-secondary-600": "hsl(211.7,21.2%,54.8%)",
87 | "const-color-secondary-700": "hsl(211.7,21.2%,41.1%)",
88 | "const-color-secondary-800": "hsl(211.7,21.2%,27.4%)",
89 | "const-color-secondary-900": "hsl(211.7,21.2%,13.7%)",
90 | "const-color-secondary-950": "hsl(211.7,21.2%,6.9%)",
91 | "const-color-secondary": "$const-color-secondary-500",
92 |
93 | // --- Warning color shades (orange shades)
94 | "const-color-warn-50": "hsl(45, 100%, 97%)",
95 | "const-color-warn-100": "hsl(45, 100%, 91%)",
96 | "const-color-warn-200": "hsl(45, 100%, 80%)",
97 | "const-color-warn-300": "hsl(45, 100%, 70%)",
98 | "const-color-warn-400": "hsl(45, 100%, 60%)",
99 | "const-color-warn-500": "hsl(35, 100%, 50%)", // #ff980a
100 | "const-color-warn-600": "hsl(35, 100%, 45%)",
101 | "const-color-warn-700": "hsl(35, 100%, 40%)",
102 | "const-color-warn-800": "hsl(35, 100%, 35%)",
103 | "const-color-warn-900": "hsl(35, 100%, 30%)",
104 | "const-color-warn-950": "hsl(35, 100%, 15%)",
105 | "const-color-warn": "$const-color-warn-500",
106 |
107 | // --- Danger color shades (reddish)
108 | "const-color-danger-50": "hsl(356, 100%, 95%)",
109 | "const-color-danger-100": "hsl(356, 100%, 91%)",
110 | "const-color-danger-200": "hsl(356, 100%, 80%)",
111 | "const-color-danger-300": "hsl(356, 100%, 70%)",
112 | "const-color-danger-400": "hsl(356, 100%, 60%)",
113 | "const-color-danger-500": "hsl(356, 100%, 50%)", // #ff3240
114 | "const-color-danger-600": "hsl(356, 100%, 45%)",
115 | "const-color-danger-700": "hsl(356, 100%, 40%)",
116 | "const-color-danger-800": "hsl(356, 100%, 35%)",
117 | "const-color-danger-900": "hsl(356, 100%, 30%)",
118 | "const-color-danger-950": "hsl(356, 100%, 15%)",
119 | "const-color-danger": "$const-color-danger-600",
120 | "const-color-attention": "$const-color-danger-500",
121 |
122 | // --- Success color shades (greenish)
123 | "const-color-success-50": "hsl(129.5, 58.4%, 96.4%)",
124 | "const-color-success-100": "hsl(129.5, 58.4%, 92.9%)",
125 | "const-color-success-200": "hsl(129.5, 58.4%, 85.7%)",
126 | "const-color-success-300": "hsl(129.5, 58.4%, 78.6%)",
127 | "const-color-success-400": "hsl(129.5, 58.4%, 71.5%)",
128 | "const-color-success-500": "hsl(129.5, 58.4%, 51.5%)", // #2fb344
129 | "const-color-success-600": "hsl(129.5, 58.4%, 45%)",
130 | "const-color-success-700": "hsl(129.5, 58.4%, 38.6%)",
131 | "const-color-success-800": "hsl(129.5, 58.4%, 25.7%)",
132 | "const-color-success-900": "hsl(129.5, 58.4%, 12.9%)",
133 | "const-color-success-950": "hsl(129.5, 58.4%, 6.4%)",
134 | "const-color-success": "$const-color-success-500",
135 |
136 | "const-color-info-50": "hsl(183, 97%, 95%)",
137 | "const-color-info-100": "hsl(183, 97%, 90%)",
138 | "const-color-info-200": "hsl(183, 97%, 80%)",
139 | "const-color-info-300": "hsl(183, 97%, 70%)",
140 | "const-color-info-400": "hsl(183, 97%, 60%)",
141 | "const-color-info-500": "hsl(183, 97%, 50%)", // #02C4CE
142 | "const-color-info-600": "hsl(183, 97%, 45%)",
143 | "const-color-info-700": "hsl(183, 97%, 35%)",
144 | "const-color-info-800": "hsl(183, 97%, 25%)",
145 | "const-color-info-900": "hsl(183, 97%, 15%)",
146 | "const-color-info-950": "hsl(183, 97%, 10%)",
147 |
148 | // --- Font weights
149 | "fontWeight-light": "300",
150 | "fontWeight-normal": "400",
151 | "fontWeight-medium": "500",
152 | "fontWeight-bold": "600",
153 | "fontWeight-extra-bold": "900",
154 |
155 | // --- Default text colors (component use these values as their defaults)
156 | "textColor-primary": "$color-surface-950",
157 | "textColor-attention": "$color-danger-600",
158 | "textColor-subtitle": "$color-surface-500",
159 | "textColor--disabled": "$color-surface-400",
160 |
161 | // --- Default background colors (component use these values as their defaults)
162 | "backgroundColor-primary": "$color-surface-50",
163 | "backgroundColor-secondary": "$color-surface-50",
164 | "backgroundColor-attention": "$color-attention",
165 | "backgroundColor--disabled": "$color-surface-50",
166 | "backgroundColor--selected": "$color-primary-50",
167 |
168 | // --- Various default colors
169 | "color-info": "$color-info-500",
170 | "color-valid": "$color-success-600",
171 | "color-warning": "$color-warn-700",
172 | "color-error": "$color-danger-500",
173 |
174 | // --- The sans-serif font set
175 | "fontFamily-sans-serif":
176 | "'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
177 |
178 | // --- The monospace font set
179 | "fontFamily-monospace": "Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
180 | "font-feature-settings": "'cv03', 'cv04', 'cv11'",
181 |
182 | // --- Some media breakpoints (review them)
183 | "maxWidth-phone": "576px",
184 | "maxWidth-landscape-phone": "768px",
185 | "maxWidth-tablet": "992px",
186 | "maxWidth-desktop": "1200px",
187 | "maxWidth-large-desktop": "1400px",
188 |
189 | // --- The app's default radius value
190 | borderRadius: "4px",
191 | "outlineColor--focus": "rgb(from $color-primary-500 r g b / 0.5)",
192 | "outlineWidth--focus": "2px",
193 | "outlineStyle--focus": "solid",
194 | "outlineOffset--focus": "0",
195 |
196 | // --- The app's default font family
197 | fontFamily: "$fontFamily-sans-serif",
198 |
199 | // --- Various font sizes (relative to the current context)
200 | "fontSize-tiny": "0.625rem",
201 | "fontSize-xs": "0.75rem",
202 | "fontSize-code": "0.85rem",
203 | "fontSize-sm": "0.875rem",
204 | "fontSize-base": "1rem",
205 | "fontSize-lg": "1.125rem",
206 | "fontSize-xl": "1.25rem",
207 | "fontSize-2xl": "1.5rem",
208 | "fontSize-3xl": "1.875rem",
209 | "fontSize-4xl": "2.25rem",
210 | "fontSize-5xl": "3rem",
211 | "fontSize-6xl": "3.75rem",
212 | "fontSize-7xl": "4.5rem",
213 | "fontSize-8xl": "6rem",
214 | "fontSize-9xl": "8rem",
215 |
216 | // --- The default font size
217 | fontSize: "$fontSize-base",
218 |
219 | // --- Various line height values
220 | // --- Default line height values (relative to the base unit, "space-base")
221 | "lineHeight-none": "1",
222 | "lineHeight-tight": "1.25",
223 | "lineHeight-snug": "1.375",
224 | "lineHeight-normal": "1.5",
225 | "lineHeight-relaxed": "1.625",
226 | "lineHeight-loose": "2",
227 |
228 | // --- Predefined gap sizes
229 | "gap-none": "$space-0",
230 | "gap-tight": "$space-2",
231 | "gap-normal": "$space-4",
232 | "gap-loose": "$space-8",
233 |
234 | // --- Predefined paddings
235 | "padding-none": "$space-0",
236 | "padding-tight": "$space-2",
237 | "padding-normal": "$space-4",
238 | "padding-loose": "$space-8",
239 |
240 | // --- Predefined spaces
241 | "space-none": "$space-0",
242 | "space-tight": "$space-2",
243 | "space-normal": "$space-4",
244 | "space-loose": "$space-8",
245 |
246 | // --- Font used for body
247 | fontWeight: "$fontWeight-normal",
248 |
249 | // --- Various default values (review them)
250 | "borderColor-dropdown-item": "$borderColor",
251 |
252 | // --- Various predefined shadow values
253 | boxShadow: "0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)",
254 | "boxShadow-md": "0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)",
255 | "boxShadow-xl":
256 | "0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -5px rgba(0, 0, 0, 0.1)",
257 | "boxShadow-xxl": "0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)",
258 | "boxShadow-spread": "0px 0px 30px rgba(0, 0, 0, 0.1)",
259 | "boxShadow-spread-2": "-6px -4px 40px 10px rgba(0, 0, 0, 0.1)",
260 | "boxShadow-spread-2-xl": "-6px -4px 40px 18px rgba(0, 0, 0, 0.1)",
261 |
262 | // --- The default maximum content width
263 | "maxWidth-content": "1320px",
264 |
265 | // --- Background colors
266 | backgroundColor: "$color-surface-subtle",
267 | "backgroundColor-overlay": "rgba(0, 0, 0, 0.2)",
268 | "backgroundColor-dropdown-item--hover": $colorSurface50,
269 | "backgroundColor-dropdown-item--active": $colorSurface100,
270 | "backgroundColor-dropdown-item--active-hover": $colorSurface50,
271 | "backgroundColor-tree-row--selected--before": $colorPrimary50,
272 |
273 | // --- Border colors
274 | borderColor: "rgb(from $color-surface-900 r g b / 0.1)",
275 | "borderColor--disabled": $colorSurface100,
276 |
277 | // --- Text colors
278 | "textColor-secondary": $colorSurface600,
279 |
280 | // --- Input is an abstract component, so we define its default theme variables here
281 | "backgroundColor-Input-default": $colorSurface0,
282 | "backgroundColor-Input-success": $colorSurface0,
283 | "backgroundColor-Input-warning": $colorSurface0,
284 | "backgroundColor-Input-error": $colorSurface0,
285 |
286 | "borderColor-Input-default": $colorSurface200,
287 | "borderColor-Input-default--hover": $colorSurface600,
288 | "borderColor-Input-default--focus": $colorSurface600,
289 | "borderColor-Input-default--success": $colorSuccess600,
290 | "borderColor-Input-default--warning": $colorWarn700,
291 | "borderColor-Input-default--error": $colorDanger500,
292 |
293 | // --- InputLabel is a React component, so we define its default theme variables here
294 | "textColor-InputLabel-required": $colorDanger600,
295 | },
296 | tones: {
297 | light: {
298 | themeVars: {
299 | // --- Default surface color shades (form white to black)
300 | "color-surface-0": "$const-color-surface-0",
301 | "color-surface-50": "$const-color-surface-50",
302 | "color-surface-100": "$const-color-surface-100",
303 | "color-surface-200": "$const-color-surface-200",
304 | "color-surface-300": "$const-color-surface-300",
305 | "color-surface-400": "$const-color-surface-400",
306 | "color-surface-500": "$const-color-surface-500",
307 | "color-surface-600": "$const-color-surface-600",
308 | "color-surface-700": "$const-color-surface-700",
309 | "color-surface-800": "$const-color-surface-800",
310 | "color-surface-900": "$const-color-surface-900",
311 | "color-surface-950": "$const-color-surface-950",
312 | "color-surface-1000": "$const-color-surface-1000",
313 | "color-surface": "$const-color-surface-500",
314 | "color-surface-base": "$color-surface-0",
315 | "color-surface-lower": "$color-surface-100",
316 | "color-surface-raised": "$color-surface-0",
317 | "color-surface-subtle": "$color-surface-50",
318 |
319 | // --- Primary color shades (bluish)
320 | "color-primary-50": "$const-color-primary-50",
321 | "color-primary-100": "$const-color-primary-100",
322 | "color-primary-200": "$const-color-primary-200",
323 | "color-primary-300": "$const-color-primary-300",
324 | "color-primary-400": "$const-color-primary-400",
325 | "color-primary-500": "$const-color-primary-500",
326 | "color-primary-600": "$const-color-primary-600",
327 | "color-primary-700": "$const-color-primary-700",
328 | "color-primary-800": "$const-color-primary-800",
329 | "color-primary-900": "$const-color-primary-900",
330 | "color-primary-950": "$const-color-primary-950",
331 | "color-primary": "$const-color-primary-500",
332 |
333 | // --- Secondary color shades (steel-bluish)
334 | "color-secondary-50": "$const-color-secondary-50",
335 | "color-secondary-100": "$const-color-secondary-100",
336 | "color-secondary-200": "$const-color-secondary-200",
337 | "color-secondary-300": "$const-color-secondary-300",
338 | "color-secondary-400": "$const-color-secondary-400",
339 | "color-secondary-500": "$const-color-secondary-500",
340 | "color-secondary-600": "$const-color-secondary-600",
341 | "color-secondary-700": "$const-color-secondary-700",
342 | "color-secondary-800": "$const-color-secondary-800",
343 | "color-secondary-900": "$const-color-secondary-900",
344 | "color-secondary-950": "$const-color-secondary-950",
345 | "color-secondary": "$const-color-secondary-500",
346 |
347 | // --- Warning color shades (orange shades)
348 | "color-warn-50": "$const-color-warn-50",
349 | "color-warn-100": "$const-color-warn-100",
350 | "color-warn-200": "$const-color-warn-200",
351 | "color-warn-300": "$const-color-warn-300",
352 | "color-warn-400": "$const-color-warn-400",
353 | "color-warn-500": "$const-color-warn-500",
354 | "color-warn-600": "$const-color-warn-600",
355 | "color-warn-700": "$const-color-warn-700",
356 | "color-warn-800": "$const-color-warn-800",
357 | "color-warn-900": "$const-color-warn-900",
358 | "color-warn-950": "$const-color-warn-950",
359 | "color-warn": "$const-color-warn-500",
360 |
361 | // --- Danger color shades (reddish)
362 | "color-danger-50": "$const-color-danger-50",
363 | "color-danger-100": "$const-color-danger-100",
364 | "color-danger-200": "$const-color-danger-200",
365 | "color-danger-300": "$const-color-danger-300",
366 | "color-danger-400": "$const-color-danger-400",
367 | "color-danger-500": "$const-color-danger-500",
368 | "color-danger-600": "$const-color-danger-600",
369 | "color-danger-700": "$const-color-danger-700",
370 | "color-danger-800": "$const-color-danger-800",
371 | "color-danger-900": "$const-color-danger-900",
372 | "color-danger-950": "$const-color-danger-950",
373 | "color-danger": "$const-color-danger-600",
374 | "color-attention": "$const-color-danger-500",
375 |
376 | // --- Success color shades (greenish)
377 | "color-success-50": "$const-color-success-50",
378 | "color-success-100": "$const-color-success-100",
379 | "color-success-200": "$const-color-success-200",
380 | "color-success-300": "$const-color-success-300",
381 | "color-success-400": "$const-color-success-400",
382 | "color-success-500": "$const-color-success-500",
383 | "color-success-600": "$const-color-success-600",
384 | "color-success-700": "$const-color-success-700",
385 | "color-success-800": "$const-color-success-800",
386 | "color-success-900": "$const-color-success-900",
387 | "color-success-950": "$const-color-success-950",
388 | "color-success": "$const-color-success-500",
389 |
390 | "color-info-50 ": "$const-color-info-50 ",
391 | "color-info-100": "$const-color-info-100",
392 | "color-info-200": "$const-color-info-200",
393 | "color-info-300": "$const-color-info-300",
394 | "color-info-400": "$const-color-info-400",
395 | "color-info-500": "$const-color-info-500",
396 | "color-info-600": "$const-color-info-600",
397 | "color-info-700": "$const-color-info-700",
398 | "color-info-800": "$const-color-info-800",
399 | "color-info-900": "$const-color-info-900",
400 | "color-info-950": "$const-color-info-950",
401 | "color-info": "$const-color-info-800",
402 | },
403 | },
404 | dark: {
405 | themeVars: {
406 | // --- Default surface color shades (form white to black)
407 | "color-surface-0": "$const-color-surface-1000",
408 | "color-surface-50": "$const-color-surface-950",
409 | "color-surface-100": "$const-color-surface-900",
410 | "color-surface-200": "$const-color-surface-800",
411 | "color-surface-300": "$const-color-surface-700",
412 | "color-surface-400": "$const-color-surface-600",
413 | "color-surface-500": "$const-color-surface-500",
414 | "color-surface-600": "$const-color-surface-400",
415 | "color-surface-700": "$const-color-surface-300",
416 | "color-surface-800": "$const-color-surface-200",
417 | "color-surface-900": "$const-color-surface-100",
418 | "color-surface-950": "$const-color-surface-50",
419 | "color-surface-1000": "$const-color-surface-0",
420 | "color-surface": "$const-color-surface-500",
421 | "color-surface-base": "$color-surface-0",
422 | "color-surface-lower": "$color-surface-0",
423 | "color-surface-raised": "$color-surface-100",
424 | "color-surface-subtle": "$color-surface-50",
425 |
426 | // --- Primary color shades (bluish)
427 | "color-primary-50": "$const-color-primary-950",
428 | "color-primary-100": "$const-color-primary-900",
429 | "color-primary-200": "$const-color-primary-800",
430 | "color-primary-300": "$const-color-primary-700",
431 | "color-primary-400": "$const-color-primary-600",
432 | "color-primary-500": "$const-color-primary-500",
433 | "color-primary-600": "$const-color-primary-400",
434 | "color-primary-700": "$const-color-primary-300",
435 | "color-primary-800": "$const-color-primary-200",
436 | "color-primary-900": "$const-color-primary-100",
437 | "color-primary-950": "$const-color-primary-50",
438 | "color-primary": "$const-color-primary-500",
439 |
440 | // --- Secondary color shades (steel-bluish)
441 | "color-secondary-50": "$const-color-secondary-950",
442 | "color-secondary-100": "$const-color-secondary-900",
443 | "color-secondary-200": "$const-color-secondary-800",
444 | "color-secondary-300": "$const-color-secondary-700",
445 | "color-secondary-400": "$const-color-secondary-600",
446 | "color-secondary-500": "$const-color-secondary-500",
447 | "color-secondary-600": "$const-color-secondary-400",
448 | "color-secondary-700": "$const-color-secondary-300",
449 | "color-secondary-800": "$const-color-secondary-200",
450 | "color-secondary-900": "$const-color-secondary-100",
451 | "color-secondary-950": "$const-color-secondary-50",
452 | "color-secondary": "$const-color-secondary-500",
453 |
454 | // --- Warning color shades (orange shades)
455 | "color-warn-50": "$const-color-warn-950",
456 | "color-warn-100": "$const-color-warn-900",
457 | "color-warn-200": "$const-color-warn-800",
458 | "color-warn-300": "$const-color-warn-700",
459 | "color-warn-400": "$const-color-warn-600",
460 | "color-warn-500": "$const-color-warn-500",
461 | "color-warn-600": "$const-color-warn-400",
462 | "color-warn-700": "$const-color-warn-300",
463 | "color-warn-800": "$const-color-warn-200",
464 | "color-warn-900": "$const-color-warn-100",
465 | "color-warn-950": "$const-color-warn-50",
466 | "color-warn": "$const-color-warn-500",
467 |
468 | // --- Danger color shades (reddish)
469 | "color-danger-50": "$const-color-danger-950",
470 | "color-danger-100": "$const-color-danger-900",
471 | "color-danger-200": "$const-color-danger-800",
472 | "color-danger-300": "$const-color-danger-700",
473 | "color-danger-400": "$const-color-danger-600",
474 | "color-danger-500": "$const-color-danger-500",
475 | "color-danger-600": "$const-color-danger-400",
476 | "color-danger-700": "$const-color-danger-300",
477 | "color-danger-800": "$const-color-danger-200",
478 | "color-danger-900": "$const-color-danger-100",
479 | "color-danger-950": "$const-color-danger-50",
480 | "color-danger": "$const-color-danger-500",
481 | "color-attention": "$const-color-danger-400",
482 |
483 | // --- Success color shades (greenish)
484 | "color-success-50": "$const-color-success-950",
485 | "color-success-100": "$const-color-success-900",
486 | "color-success-200": "$const-color-success-800",
487 | "color-success-300": "$const-color-success-700",
488 | "color-success-400": "$const-color-success-600",
489 | "color-success-500": "$const-color-success-500",
490 | "color-success-600": "$const-color-success-400",
491 | "color-success-700": "$const-color-success-300",
492 | "color-success-800": "$const-color-success-200",
493 | "color-success-900": "$const-color-success-100",
494 | "color-success-950": "$const-color-success-50",
495 | "color-success": "$const-color-success-500",
496 |
497 | "color-info-50 ": "$const-color-info-950 ",
498 | "color-info-100": "$const-color-info-900",
499 | "color-info-200": "$const-color-info-800",
500 | "color-info-300": "$const-color-info-700",
501 | "color-info-400": "$const-color-info-600",
502 | "color-info-500": "$const-color-info-500",
503 | "color-info-600": "$const-color-info-400",
504 | "color-info-700": "$const-color-info-300",
505 | "color-info-800": "$const-color-info-200",
506 | "color-info-900": "$const-color-info-100",
507 | "color-info-950": "$const-color-info-50",
508 | "color-info": "$const-color-info-200",
509 | },
510 | },
511 | },
512 | };
513 |
```
--------------------------------------------------------------------------------
/docs/content/components/_overview.md:
--------------------------------------------------------------------------------
```markdown
1 | # Components Overview [#components-overview]
2 |
3 | | Component | Description |
4 | | :---: | --- |
5 | | [APICall](./APICall) | `APICall` creates, updates or deletes data on the backend, versus [`DataSource`](/components/DataSource) which fetches data. Unlike DataSource, APICall doesn't automatically execute - you must trigger it manually with the `execute()` method, typically from form submissions or button clicks. |
6 | | [App](./App) | The `App` component is the root container that defines your application's overall structure and layout. It provides a complete UI framework with built-in navigation, header, footer, and content areas that work together seamlessly. |
7 | | [AppHeader](./AppHeader) | `AppHeader` defines the top navigation bar of your application within the [`App`](/components/App) component. It automatically handles logo placement, application title, and user profile areas with built-in responsive behavior. |
8 | | [AppState](./AppState) | `AppState` is an invisible component that provides global state management across your entire application. Unlike component variables that are scoped locally, AppState allows any component to access and update shared state without prop drilling. |
9 | | [AutoComplete](./AutoComplete) | `AutoComplete` is a searchable dropdown input that allows users to type and filter through options, with support for single or multiple selections. Unlike a basic [`Select`](/components/Select), it provides type-ahead functionality and can allow users to create new options. |
10 | | [Avatar](./Avatar) | `Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization. |
11 | | [Backdrop](./Backdrop) | The `Backdrop` component is a semi-transparent overlay that appears on top of its child component to obscure or highlight the content behind it. |
12 | | [Badge](./Badge) | `Badge` displays small text labels with colored backgrounds, commonly used for status indicators, categories, tags, and counts. It supports dynamic color mapping based on content values, useful for status systems and data categorization. |
13 | | [BarChart](./BarChart) | `BarChart` displays data as horizontal or vertical bars, supporting both grouped and stacked layouts. It's ideal for comparing values across categories, showing revenue trends, or displaying any quantitative data over time or categories. |
14 | | [Bookmark](./Bookmark) | As its name suggests, this component places a bookmark into its parent component's view. The component has an `id` that you can use in links to navigate (scroll to) the bookmark's location. |
15 | | [Breakout](./Breakout) | The `Breakout` component creates a breakout section. It allows its child to occupy the entire width of the UI even if the app or the parent container constrains the maximum content width. |
16 | | [Button](./Button) | `Button` is the primary interactive component for triggering actions like form submissions, navigation, opening modals, and API calls. It supports multiple visual styles and sizes to match different UI contexts and importance levels. |
17 | | [Card](./Card) | `Card` is a versatile container that groups related content with a visual boundary, typically featuring background color, padding, borders, and rounded corners. It's ideal for organizing information, creating sections, and establishing visual hierarchy in your interface. |
18 | | [Carousel](./Carousel) | This component displays a slideshow by cycling through elements (images, text, or custom slides) like a carousel. |
19 | | [ChangeListener](./ChangeListener) | `ChangeListener` is an invisible component that watches for changes in values and triggers actions in response. It's essential for creating reactive behavior when you need to respond to data changes, state updates, or component property modifications outside of normal event handlers. |
20 | | [Checkbox](./Checkbox) | `Checkbox` allows users to make binary choices with a clickable box that shows checked/unchecked states. It's essential for settings, preferences, multi-select lists, and accepting terms or conditions. |
21 | | [CHStack](./CHStack) | This component represents a stack that renders its contents horizontally and aligns that in the center along both axes. |
22 | | [ColorPicker](./ColorPicker) | `ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values. |
23 | | [Column](./Column) | `Column` defines the structure and behavior of individual table columns within a [`Table`](/components/Table) component. Each Column controls data binding, header display, sorting capabilities, sizing, and can contain any XMLUI components for rich cell content. |
24 | | [ContentSeparator](./ContentSeparator) | `ContentSeparator` creates visual dividers between content sections using horizontal or vertical lines. It's essential for improving readability by breaking up dense content, separating list items, or creating clear boundaries between different UI sections. |
25 | | [CVStack](./CVStack) | This component represents a stack that renders its contents vertically and aligns that in the center along both axes. |
26 | | [DataSource](./DataSource) | `DataSource` fetches and caches data from API endpoints, versus [`APICall`](/components/APICall) which creates, updates or deletes data. |
27 | | [DateInput](./DateInput) | `DateInput` provides a text-based date input interface for selecting single dates or date ranges, with direct keyboard input similar to TimeInput. It offers customizable formatting and validation options without dropdown calendars. |
28 | | [DatePicker](./DatePicker) | `DatePicker` provides an interactive calendar interface for selecting single dates or date ranges, with customizable formatting and validation options. It displays a text input that opens a calendar popup when clicked, offering both keyboard and mouse interaction. |
29 | | [DonutChart](./DonutChart) | A derivative of [PieChart](/components/PieChart) with a hollow center. Note that the height of the component or its parent needs to be set explicitly. |
30 | | [DropdownMenu](./DropdownMenu) | `DropdownMenu` provides a space-efficient way to present multiple options or actions through a collapsible interface. When clicked, the trigger button reveals a menu that can include items, separators, and nested submenus, making it ideal for navigation, action lists, or any situation requiring many options without permanent screen space. |
31 | | [EmojiSelector](./EmojiSelector) | `EmojiSelector` enables users to browse, search and select emojis from their system's native emoji set. |
32 | | [ExpandableItem](./ExpandableItem) | `ExpandableItem` creates expandable/collapsible section, similar to the HTML details disclosure element. When the user clicks on the `summary` the content expands or collapses. |
33 | | [FileInput](./FileInput) | `FileInput` enables users to select files from their device's file system for upload or processing. It combines a text field displaying selected files with a customizable button that opens the system file browser. Use it for forms, media uploads, and document processing workflows. |
34 | | [FileUploadDropZone](./FileUploadDropZone) | `FileUploadDropZone` enables users to upload files by dragging and dropping files from their local file system onto a designated area within the UI. |
35 | | [FlowLayout](./FlowLayout) | `FlowLayout` positions content in rows with automatic wrapping. When items exceed the available horizontal space, they automatically wrap to a new line. |
36 | | [Footer](./Footer) | `Footer` provides a designated area at the bottom of your application for footer content such as branding, copyright notices, or utility controls like theme toggles. |
37 | | [Form](./Form) | `Form` provides a structured container for collecting and validating user input, with built-in data binding, validation, and submission handling. It automatically manages form state and provides context for nested form controls to work together. |
38 | | [FormItem](./FormItem) | `FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically.
39 |
40 | > **Note:** `FormItem` must be used inside a `Form` component. |
41 | | [FormSection](./FormSection) | `FormSection` groups elements within a `Form`. Child components are placed in a [FlowLayout](/components/FlowLayout). |
42 | | [Fragment](./Fragment) | `Fragment` provides conditional rendering. You can use `when=` on any component to render it conditionally, use `Fragment` to apply `when` to a group of components. |
43 | | [H1](./H1) | Represents a heading level 1 text |
44 | | [H2](./H2) | Represents a heading level 2 text |
45 | | [H3](./H3) | Represents a heading level 3 text |
46 | | [H4](./H4) | Represents a heading level 4 text |
47 | | [H5](./H5) | Represents a heading level 5 text |
48 | | [H6](./H6) | Represents a heading level 6 text |
49 | | [Heading](./Heading) | `Heading` displays hierarchical text headings with semantic importance levels from H1 to H6, following HTML heading standards. It provides text overflow handling, anchor link generation, and integrates with [TableOfContents](/components/TableOfContents). |
50 | | [HSplitter](./HSplitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. |
51 | | [HStack](./HStack) | This component represents a stack rendering its contents horizontally. |
52 | | [Icon](./Icon) | `Icon` displays scalable vector icons from XMLUI's built-in icon registry using simple name references. Icons are commonly used in buttons, navigation elements, and status indicators. |
53 | | [IFrame](./IFrame) | `IFrame` embeds external content from another HTML document into the current page. It provides security controls through sandbox and allow attributes, and supports features like fullscreen display and referrer policy configuration. |
54 | | [Image](./Image) | `Image` displays pictures from URLs or local sources with built-in responsive sizing, aspect ratio control, and accessibility features. It handles different image formats and provides options for lazy loading and click interactions. |
55 | | [Items](./Items) | `Items` renders data arrays without built-in layout or styling, providing a lightweight alternative to `List`. Unlike `List`, it provides no virtualization, grouping, or visual formatting — just pure data iteration. |
56 | | [LabelList](./LabelList) | `LabelList` adds custom data labels to chart components when automatic labeling isn't sufficient. It's a specialized component for advanced chart customization scenarios where you need precise control over label positioning and appearance. |
57 | | [Legend](./Legend) | `Legend` provides a standalone legend for chart components when you need custom positioning or styling beyond the chart's built-in `showLegend` property. Most charts can display legends automatically, but this component offers precise control over legend placement and alignment. |
58 | | [LineChart](./LineChart) | `LineChart` displays data as connected points over a continuous axis, ideal for showing trends, changes over time, or relationships between variables. Use it time series data, progress tracking, and comparing multiple data series on the same scale. |
59 | | [Link](./Link) | `Link` creates clickable navigation elements for internal app routes or external URLs. You can use the `label` and `icon` properties for simple text links, or embed custom components like buttons, cards, or complex layouts for rich interactive link presentations. |
60 | | [List](./List) | `List` is a high-performance, virtualized container for rendering large datasets with built-in grouping, sorting, and visual formatting. It only renders visible items in the viewport, making it ideal for displaying thousands of records while maintaining smooth scrolling performance. |
61 | | [Logo](./Logo) | `Logo` displays your application's brand symbol by automatically loading logo images defined in the app manifest. While logos are typically configured using App-level properties (`logo`, `logo-dark`), this component provides direct control when you need custom logo placement or templating. |
62 | | [Markdown](./Markdown) | `Markdown` renders formatted text using markdown syntax. Use [Text](/working-with-text) for simple, styled text content, and `Markdown` when you need [rich formatting](/working-with-markdown). |
63 | | [MenuItem](./MenuItem) | `MenuItem` represents individual clickable items within dropdown menus and other menu components. Each menu item can display text, icons, and respond to clicks with either navigation or custom actions, making it the building block for interactive menu systems. |
64 | | [MenuSeparator](./MenuSeparator) | `MenuSeparator` displays a separator line between menu items to group related menu options within `DropdownMenu`. |
65 | | [ModalDialog](./ModalDialog) | `ModalDialog` creates overlay dialogs that appear on top of the main interface, ideal for forms, confirmations, detailed views, or any content that requires focused user attention. Dialogs are programmatically opened using the `open()` method and can receive parameters for dynamic content. |
66 | | [NavGroup](./NavGroup) | `NavGroup` creates collapsible containers for organizing related navigation items into hierarchical menu structures. It groups `NavLink` components and other `NavGroup` components, providing expandable submenus with customizable icons and states. |
67 | | [NavLink](./NavLink) | `NavLink` creates interactive navigation items that connect users to different destinations within an app or external URLs. It automatically indicates active states, supports custom icons and labels, and can execute custom actions instead of navigation when needed. |
68 | | [NavPanel](./NavPanel) | `NavPanel` defines the navigation structure within an App, serving as a container for NavLink and NavGroup components that create your application's primary navigation menu. Its appearance and behavior automatically adapt based on the App's layout configuration. |
69 | | [NoResult](./NoResult) | `NoResult` displays a visual indication that a query or search returned nothing. |
70 | | [NumberBox](./NumberBox) | `NumberBox` provides a specialized input field for numeric values with built-in validation, spinner buttons, and flexible formatting options. It supports both integer and floating-point numbers, handles empty states as null values, and integrates seamlessly with form validation. |
71 | | [Option](./Option) | `Option` defines selectable items for choice-based components, providing both the underlying value and display text for selection interfaces. It serves as a non-visual data structure that describes individual choices within [Select](/components/Select), [AutoComplete](/components/AutoComplete), and other selection components. |
72 | | [Page](./Page) | `Page` defines route endpoints within an application, mapping specific URL patterns to content that displays when users navigate to those routes. Each Page represents a distinct view or screen in your single-page application's routing system. |
73 | | [PageMetaTitle](./PageMetaTitle) | `PageMetaTitle` dynamically sets or updates the browser tab title, enabling pages and components to override the default application name with context-specific titles. |
74 | | [Pages](./Pages) | `Pages` serves as the routing coordinator within an [App](/components/App), managing which [Page](/components/Page) displays based on the current URL. |
75 | | [Pagination](./Pagination) | `Pagination` enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information. |
76 | | [PasswordInput](./PasswordInput) | `Password` is a specialized [TextBox](/components/TextBox) that enables users to input and edit passwords. |
77 | | [PieChart](./PieChart) | `PieChart` visualizes proportional data as circular segments; each slice represents a percentage of the whole. Note that the height of the component or its parent needs to be set explicitly. |
78 | | [ProgressBar](./ProgressBar) | `ProgressBar` provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete). |
79 | | [Queue](./Queue) | `Queue` manages sequential processing of items in FIFO (first-in, first-out) order. It is a non-visual component but provides UI progress reporting and result display. |
80 | | [RadioGroup](./RadioGroup) | `RadioGroup` creates a mutually exclusive selection interface where users can choose only one option from a group of radio buttons. It manages the selection state and ensures that selecting one option automatically deselects all others in the group.
81 |
82 | Radio options store their values as strings. Numbers and booleans are converted to strings when assigned, while objects, functions and arrays default to an empty string unless resolved via binding expressions. |
83 | | [RealTimeAdapter](./RealTimeAdapter) | `RealTimeAdapter` is a non-visual component that listens to real-time events. |
84 | | [Redirect](./Redirect) | `Redirect` immediately redirects the browser to the URL in its `to` property when it gets visible (its `when` property gets `true`). It works only within [App](/components/App), not externally. |
85 | | [Select](./Select) | `Select` provides a dropdown interface for choosing from a list of options, supporting both single and multiple selection modes. It offers extensive customization capabilities including search functionality, custom templates, and comprehensive form integration. |
86 | | [Slider](./Slider) | `Slider` provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.
87 |
88 | Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip. |
89 | | [Slot](./Slot) | Placeholder in a reusable component. Signs the slot where the component's injected children should be rendered. |
90 | | [SpaceFiller](./SpaceFiller) | `SpaceFiller` works well in layout containers to fill remaining (unused) space. Its behavior depends on the layout container in which it is used. |
91 | | [Spinner](./Spinner) | `Spinner` is an animated indicator that represents an action in progress with no deterministic progress value. |
92 | | [Splitter](./Splitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. |
93 | | [Stack](./Stack) | `Stack` is the fundamental layout container that organizes child elements in configurable horizontal or vertical arrangements. As the most versatile building block in XMLUI's layout system, it provides comprehensive alignment, spacing, and flow control options that serve as the foundation for all specialized stack variants. |
94 | | [StickyBox](./StickyBox) | `StickyBox` remains fixed at the top or bottom of the screen as the user scrolls. |
95 | | [SubMenuItem](./SubMenuItem) | `SubMenuItem` creates hierarchical menu structures by acting as both a menu item and a container for nested menu items. When clicked or hovered, it reveals a submenu containing additional [MenuItem](/components/MenuItem), [MenuSeparator](/components/MenuSeparator), or other [SubMenuItem](/components/SubMenuItems) components, enabling complex multi-level navigation and action organization. |
96 | | [Switch](./Switch) | `Switch` enables users to toggle between two states: on and off. |
97 | | [TabItem](./TabItem) | `TabItem` defines individual tabs within a [Tabs](/components/Tabs) component, providing both the tab header label and the content that displays when the tab is selected. As a non-visual structural component, it serves as a container that organizes content into distinct, switchable sections. |
98 | | [Table](./Table) | `Table` presents structured data for viewing, sorting, selection, and interaction. |
99 | | [TableOfContents](./TableOfContents) | `TableOfContents` component collects [Heading](/components/Heading) and [Bookmark](/components/Bookmark) within the current page and displays them in a navigable tree. |
100 | | [Tabs](./Tabs) | `Tabs` enables users to switch among content panels using clickable tab headers. It provides an efficient way to present multiple related sections in a single interface area, with each tab containing distinct content defined by [TabItem](/components/TabItem) components. |
101 | | [Text](./Text) | The `Text` component displays textual information in a number of optional styles and variants. |
102 | | [TextArea](./TextArea) | `TextArea` provides a multiline text input area. |
103 | | [TextBox](./TextBox) | `TextBox` captures user text input for forms, search fields, and data entry with support for validation, icons, and formatting hints. |
104 | | [Theme](./Theme) | `Theme` creates styling contexts to customize the appearance of nested components without using CSS. |
105 | | [TimeInput](./TimeInput) | `TimeInput` provides time input with support for 12-hour and 24-hour formats and configurable precision for hours, minutes, and seconds. |
106 | | [Timer](./Timer) | `Timer` is a non-visual component that fires events at regular intervals. It can be enabled or disabled and ensures that the timer event handler completes before firing the next event. |
107 | | [ToneChangerButton](./ToneChangerButton) | `ToneChangerButton` enables the user to switch between light and dark modes. |
108 | | [ToneSwitch](./ToneSwitch) | `ToneSwitch` enables the user to switch between light and dark modes using a switch control. |
109 | | [Tooltip](./Tooltip) | A tooltip component that displays text when hovering over trigger content. |
110 | | [Tree](./Tree) | The `Tree` component is a virtualized tree component that displays hierarchical data with support for flat and hierarchy data formats. |
111 | | [VSplitter](./VSplitter) | `Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. |
112 | | [VStack](./VStack) | This component represents a stack rendering its contents vertically. |
113 |
114 |
```
