This is page 95 of 187. Use http://codebase.md/xmlui-org/xmlui/xmlui/tools/vscode/resources/xmlui-markup-syntax-highlighting.png?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── itchy-cases-deny.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.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.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/docs/content/components/Tree.md:
--------------------------------------------------------------------------------
```markdown
1 | # Tree [#tree]
2 |
3 | The `Tree` component is a virtualized tree component that displays hierarchical data with support for flat and hierarchy data formats.
4 |
5 | **Key features:**
6 | - **Flat and hierarchical data structures**: You can select the most convenient data format to represent the tree. A set of properties enables you to map your data structure to the visual representation of the tree.
7 | - **Flexible expand/collapse**: You have several properties to represent the expanded and collapsed state of tree nodes. You can also specify several options that determine which tree items are collapsed initially.
8 | - **Tree API**: Several exposed methods allow you to manage the tree's view state imperatively.
9 |
10 | ## Specifying Data [#specifying-data]
11 |
12 | With the `dataFormat` property, you can select between "flat" or "hierarchy" formats. The component transforms the data according to the value of this property into a visual representation.
13 |
14 | The "flat" and "hierarchy" data structures both use these fields for a particular tree node:
15 | - `id`: Unique ID of tree node
16 | - `name`: The field to be used as the display label
17 | - `icon`: An optional icon identifier. If specified, this icon is displayed with the tree item.
18 | - `iconExpanded`: An optional icon identifier. This icon is displayed when the field is expanded.
19 | - `iconCollapsed`: An optional icon identifier. This icon is displayed when the field is collapsed.
20 | - `selectable`: Indicates if the node can be selected.
21 |
22 | The "flat" structure refers to its direct parent node via the `parentId` property, which contains the ID of the node it is referring to.
23 |
24 | The "hierarchy" structure uses a `children` property, which is an array of nested child nodes (using the common node property set above).
25 |
26 | This example demonstrates the use of the "flat" data mode:
27 |
28 | ```xmlui-pg display copy height="220px" /"flat"/ /parentId/ name="Example: flat data format"
29 | <App>
30 | <Tree
31 | testId="tree"
32 | dataFormat="flat"
33 | defaultExpanded="all"
34 | data='{[
35 | { id: 1, icon:"folder", name: "Root Item 1", parentId: null },
36 | { id: 2, icon:"folder", name: "Child Item 1.1", parentId: 1 },
37 | { id: 3, icon: "code", name: "Child Item 1.2", parentId: 1 },
38 | { id: 4, icon: "code", name: "Grandchild Item 1.1.1", parentId: 2 },
39 | ]}'>
40 | </Tree>
41 | </App>
42 | ```
43 |
44 | This example demonstrates the use of the "hiearchy" data mode:
45 |
46 | ```xmlui-pg display copy height="220px" /"flat"/ /children/ name="Example: hierarchical data format"
47 | <App>
48 | <Tree
49 | testId="tree"
50 | dataFormat="hierarchy"
51 | defaultExpanded="all"
52 | data='{[
53 | {
54 | id: 1, icon: "folder", name: "Root Item 1",
55 | children: [
56 | { id: 2, icon: "code", name: "Child Item 1.1" },
57 | { id: 3, icon: "folder", name: "Child Item 1.2",
58 | children: [
59 | { id: 4, icon: "code", name: "Grandchild Item 1.2.1"}
60 | ],
61 | }
62 | ],
63 | },
64 | ]}'>
65 | </Tree>
66 | </App>
67 | ```
68 |
69 | When you use data (for example, retrieved from a backend), those structures may use different property names. The `Tree` component allows mapping data field names through these properties:
70 | - `idField` (default: `id`)
71 | - `nameField` (default: `name`)
72 | - `iconField` (default: `icon`)
73 | - `iconExpandedField` (default: `iconExpanded`)
74 | - `iconCollapsedField` (default: `iconCollapsed`)
75 | - `parentIdField` (default: `parentId`)
76 | - `childrenField` (default: `children`)
77 | - `selectableField` (default: `selectable`)
78 |
79 | The following example uses the `idField`, `nameField`, and `parentIdField` mapping properties:
80 |
81 | ```xmlui-pg display copy height="220px" /idField/ /nameField/ /parentIdField/ /uid/ /label/ /parent/ name="Example: mapping data fields"
82 | <App>
83 | <Tree
84 | testId="tree"
85 | dataFormat="flat"
86 | defaultExpanded="all"
87 | idField="uid"
88 | nameField="label"
89 | parentIdField="parent"
90 | data='{[
91 | { uid: 1, icon:"folder", label: "Root Item 1", parent: null },
92 | { uid: 2, icon:"folder", label: "Child Item 1.1", parent: 1 },
93 | { uid: 3, icon: "code", label: "Child Item 1.2", parent: 1 },
94 | { uid: 4, icon: "code", label: "Grandchild Item 1.1.1", parent: 2 },
95 | ]}'>
96 | </Tree>
97 | </App>
98 | ```
99 |
100 | ## Expanding and collapsing tree nodes [#expanding-and-collapsing-tree-nodes]
101 |
102 | By default, when you click a tree node outside of its expand/collapse icon, the specified item is selected. With the `expandOnItemClick` property (using the `true` value), you can change this behavior to expand or collapse the item when clicking its surface anywhere.
103 |
104 | You can use the `defaultExpanded` property to specify what nodes you want to see expanded initially. You can set this property to a list of node IDs or a string. When you specify IDs, the component expands the hierarchy to reveal the specified nodes. When the value is a string, you can use these options:
105 | - `none`: all nodes are collapsed (default)
106 | - `first-level`: all first-level nodes are expanded
107 | - `all`: all nodes are expanded
108 |
109 | The following example demonstrates the use of `defaultExpanded` with tree node IDs:
110 |
111 | ```xmlui-pg display copy height="300px" /doc-root/ /proj-web/ /media-profile-pic/ name="Example: defaultExpanded with node IDs"
112 | <App>
113 | <Tree
114 | testId="tree"
115 | dataFormat="flat"
116 | defaultExpanded="{['doc-root', 'proj-web', 'media-profile-pic']}"
117 | data='{[
118 | // Branch A: Documents
119 | { id: "doc-root", name: "[Documents]", parentId: null },
120 | { id: "doc-reports", name: "Reports", parentId: "doc-root" },
121 | { id: "doc-invoices", name: "Invoices", parentId: "doc-root" },
122 | { id: "doc-q1-report", name: "Q1 Report.pdf", parentId: "doc-reports" },
123 | { id: "doc-q2-report", name: "Q2 Report.pdf", parentId: "doc-reports" },
124 | { id: "doc-inv-001", name: "Invoice-001.pdf", parentId: "doc-invoices" },
125 |
126 | // Branch B: Projects
127 | { id: "proj-root", name: "Projects", parentId: null },
128 | { id: "proj-web", name: "[Web Apps]", parentId: "proj-root" },
129 | { id: "proj-mobile", name: "Mobile Apps", parentId: "proj-root" },
130 | { id: "proj-ecommerce", name: "E-commerce Site", parentId: "proj-web" },
131 | { id: "proj-dashboard", name: "Admin Dashboard", parentId: "proj-web" },
132 | { id: "proj-ios-app", name: "iOS Shopping App", parentId: "proj-mobile" },
133 |
134 | // Branch C: Media
135 | { id: "media-root", name: "Media", parentId: null },
136 | { id: "media-images", name: "Images", parentId: "media-root" },
137 | { id: "media-videos", name: "Videos", parentId: "media-root" },
138 | { id: "media-profile-pic", name: "[profile.jpg]", parentId: "media-images" },
139 | { id: "media-banner", name: "banner.png", parentId: "media-images" },
140 | ]}'>
141 | </Tree>
142 | </App>
143 | ```
144 |
145 | You have several options to style the icons representing the expanded or collapsed state:
146 | - The icons used for the expanded and collapsed states can be changed with the `iconExpanded` and `iconCollapsed` properties, respectively.
147 | - You can specify a different size with the `iconSize` property (using only numeric values considered as pixels)
148 | - Using a rotate animation when changing the state with the `animateExpand` flag.
149 | The following option demonstrates the last two options:
150 |
151 | ```xmlui-pg display copy {4-5} height="220px" name="Example: expand/collapse options"
152 | <App>
153 | <Tree
154 | testId="tree"
155 | iconSize="24"
156 | animateExpand
157 | dataFormat="flat"
158 | defaultExpanded="all"
159 | data='{[
160 | { id: 1, name: "Root Item 1", parentId: null },
161 | { id: 2, name: "Child Item 1.1", parentId: 1 },
162 | { id: 3, name: "Child Item 1.2", parentId: 1 },
163 | { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
164 | ]}'>
165 | </Tree>
166 | </App>
167 | ```
168 |
169 | ## Selection [#selection]
170 |
171 | Each tree node is selectable by default, unless the node item's data does not have a `selectable` property (or the one specified in `selectedField`).
172 | A selectable item can be selected by clicking the mouse or pressing the Enter or Space keys when it has focus.
173 |
174 | You can set the `selectedValue` property to define the selected tree item, ot use the `selectNode` exposed method for imperative selection.
175 |
176 | ## Item templates [#item-templates]
177 |
178 | You can override the default template used to display a tree item with the `itemTemplate` property. The template definition can use the `$item` context variable to access the item's attributes for display. `$item` provides these properties:
179 | - `id`: The unique node ID
180 | - `name`: The name of the node
181 | - `depth`: The depth level in the tree
182 | - `isExpanded`: Indicates if the tree node is expanded
183 | - `hasChildren`: Indicates if the tree node has children
184 | - `children`: The children of the tree node
185 | - `selectable`: Indicates if the node can be selected
186 | - `parentId`: The ID of the node's parent
187 | - `parentIds`: A list of parent IDs from the root node to the direct parent of the node
188 | - `path`: An array with the node names following the path from the root node to the displayed node.
189 | - `loadingState`: The current state of a dynamic node ("unloaded", "loading", or "loaded")
190 |
191 | This example demonstrates these concepts:
192 |
193 | ```xmlui-pg display copy {20-30} height="400px" /$item.id/ /$item.name/ /$item.hasChildren/ name="Example: itemTemplate"
194 | <App>
195 | <Tree
196 | testId="tree"
197 | id="tree"
198 | defaultExpanded="all"
199 | data='{[
200 | { id: "root", name: "My Files", parentId: null },
201 | { id: "doc-root", name: "Documents", parentId: "root" },
202 | { id: "doc-reports", name: "Reports", parentId: "doc-root" },
203 | { id: "doc-q1-report", name: "Q1 Report.pdf", parentId: "doc-reports" },
204 | { id: "doc-q2-report", name: "Q2 Report.pdf", parentId: "doc-reports" },
205 | { id: "proj-root", name: "Projects", parentId: "root" },
206 | { id: "proj-web", name: "Web Apps", parentId: "proj-root" },
207 | { id: "proj-ecommerce", name: "E-commerce Site", parentId: "proj-web" },
208 | { id: "proj-dashboard", name: "Admin Dashboard", parentId: "proj-web" },
209 | { id: "media-root", name: "Media", parentId: "root" },
210 | { id: "media-images", name: "Images", parentId: "media-root" },
211 | { id: "media-videos", name: "Videos", parentId: "media-root" },
212 | ]}'>
213 | <property name="itemTemplate">
214 | <HStack testId="{$item.id}" verticalAlignment="center" gap="$space-1">
215 | <Icon name="{$item.hasChildren ? 'folder' : 'code'}" />
216 | <Text>
217 | ({$item.id}):
218 | </Text>
219 | <Text variant="strong">
220 | {$item.name}
221 | </Text>
222 | </HStack>
223 | </property>
224 | </Tree>
225 | </App>
226 | ```
227 |
228 | ## Dynamic tree nodes [#dynamic-tree-nodes]
229 |
230 | When initializing the tree with its `data` property, you can set the `dynamic` property of the node to `true` (you can use a field name alias with the `dynamicField` property). When you extend a dynamic node, the tree fires the `loadChildren` event, and the nodes returned by the event handler will be the actual nodes.
231 |
232 | By default, nodes are not dynamic.
233 |
234 | While the child nodes are being queried, the tree node displays a spinner to indicate the loading state.
235 |
236 | You can use the `markNodeUnloaded` exposed method to reset the state of an already loaded dynamic tree node. The next time the user expands the node, its content will be loaded again.
237 |
238 | The following sample demonstrates this feature. Click the "Child Item 1.2" node to check how it loads its children. Click the Unload button to reload the items when the node is expanded the next time.
239 |
240 | ```xmlui-pg display copy {16-19} height="340px" /dynamic: true/ /onLoadChildren/ name="Example: dynamic nodes"
241 | <App var.loadCount="{0}">
242 | <Tree
243 | testId="tree"
244 | defaultExpanded="all"
245 | id="tree"
246 | itemClickExpands
247 | data='{[
248 | { id: 1, name: "Root Item 1", parentId: null },
249 | { id: 2, name: "Child Item 1.1", parentId: 1 },
250 | { id: 3, name: "Child Item 1.2", parentId: 1, dynamic: true },
251 | { id: 4, name: "Child Item 1.3", parentId: 1 },
252 | ]}'
253 | onLoadChildren="(node) => {
254 | loadCount++;
255 | delay(1000);
256 | return ([
257 | { id: 5, name: `Dynamic Item 1.2.1 (${loadCount})` },
258 | { id: 6, name: `Dynamic Item 2.2.2 (${loadCount})` },
259 | ])
260 | }"
261 | >
262 | <property name="itemTemplate">
263 | <HStack testId="{$item.id}" verticalAlignment="center" gap="$space-1">
264 | <Icon name="{$item.hasChildren
265 | ? ($item.loadingState === 'loaded' ? 'folder' : 'folder-outline' )
266 | : 'code'}"
267 | />
268 | <Text>{$item.name}</Text>
269 | </HStack>
270 | </property>
271 | </Tree>
272 | <Button onClick="tree.markNodeUnloaded(3)">Unload</Button>
273 | </App>
274 | ```
275 |
276 | ## Properties [#properties]
277 |
278 | ### `animateExpand` (default: false) [#animateexpand-default-false]
279 |
280 | When true, uses only the collapsed icon and rotates it for expansion instead of switching icons (default: false).
281 |
282 | ### `autoExpandToSelection` (default: true) [#autoexpandtoselection-default-true]
283 |
284 | Automatically expand the path to the selected item.
285 |
286 | ### `childrenField` (default: "children") [#childrenfield-default-children]
287 |
288 | The property name in source data for child arrays (used in hierarchy format).
289 |
290 | ### `data` (required) [#data-required]
291 |
292 | The data source of the tree. Format depends on the dataFormat property.
293 |
294 | ### `dataFormat` (default: "flat") [#dataformat-default-flat]
295 |
296 | The input data structure format: "flat" (array with parent relationships) or "hierarchy" (nested objects).
297 |
298 | ### `defaultExpanded` (default: "none") [#defaultexpanded-default-none]
299 |
300 | Initial expansion state: "none", "all", "first-level", or array of specific IDs.
301 |
302 | ### `dynamicField` (default: "dynamic") [#dynamicfield-default-dynamic]
303 |
304 | The property name in source data for dynamic loading state (default: "dynamic").
305 |
306 | ### `expandRotation` (default: 90) [#expandrotation-default-90]
307 |
308 | The number of degrees to rotate the collapsed icon when expanded in animate mode (default: 90).
309 |
310 | ### `iconCollapsed` (default: "chevronright") [#iconcollapsed-default-chevronright]
311 |
312 | The icon name to use for collapsed nodes (default: "chevronright").
313 |
314 | ### `iconCollapsedField` (default: "iconCollapsed") [#iconcollapsedfield-default-iconcollapsed]
315 |
316 | The property name in source data for collapsed state icons.
317 |
318 | ### `iconExpanded` (default: "chevrondown") [#iconexpanded-default-chevrondown]
319 |
320 | The icon name to use for expanded nodes (default: "chevrondown").
321 |
322 | ### `iconExpandedField` (default: "iconExpanded") [#iconexpandedfield-default-iconexpanded]
323 |
324 | The property name in source data for expanded state icons.
325 |
326 | ### `iconField` (default: "icon") [#iconfield-default-icon]
327 |
328 | The property name in source data for icon identifiers.
329 |
330 | ### `iconSize` (default: "16") [#iconsize-default-16]
331 |
332 | The size of the expand/collapse icons (default: "16").
333 |
334 | ### `idField` (default: "id") [#idfield-default-id]
335 |
336 | The property name in source data for unique identifiers.
337 |
338 | ### `itemClickExpands` (default: false) [#itemclickexpands-default-false]
339 |
340 | Whether clicking anywhere on a tree item should expand/collapse the node, not just the expand/collapse icon.
341 |
342 | ### `itemHeight` (default: 32) [#itemheight-default-32]
343 |
344 | The height of each tree row in pixels (default: 35).
345 |
346 | ### `itemTemplate` [#itemtemplate]
347 |
348 | The template for each item in the tree.
349 |
350 | ### `nameField` (default: "name") [#namefield-default-name]
351 |
352 | The property name in source data for display text.
353 |
354 | ### `parentIdField` (default: "parentId") [#parentidfield-default-parentid]
355 |
356 | The property name in source data for parent relationships (used in flat format).
357 |
358 | ### `selectableField` (default: "selectable") [#selectablefield-default-selectable]
359 |
360 | The property name in source data for selectable state (default: "selectable").
361 |
362 | ### `selectedValue` [#selectedvalue]
363 |
364 | The selected item ID in source data format.
365 |
366 | ## Events [#events]
367 |
368 | ### `loadChildren` [#loadchildren]
369 |
370 | Fired when a tree node needs to load children dynamically. Should return an array of child data.
371 |
372 | ### `nodeDidCollapse` [#nodedidcollapse]
373 |
374 | Fired when a tree node is collapsed.
375 |
376 | ### `nodeDidExpand` [#nodedidexpand]
377 |
378 | Fired when a tree node is expanded.
379 |
380 | ### `selectionDidChange` [#selectiondidchange]
381 |
382 | Fired when the tree selection changes.
383 |
384 | ## Exposed Methods [#exposed-methods]
385 |
386 | ### `appendNode` [#appendnode]
387 |
388 | Add a new node to the tree as a child of the specified parent node.
389 |
390 | **Signature**: `appendNode(parentNodeId: string | number | null, nodeData: any): void`
391 |
392 | - `parentNodeId`: The ID of the parent node, or null/undefined to add to root level
393 | - `nodeData`: The node data object using the format specified in dataFormat and field properties
394 |
395 | ### `clearSelection` [#clearselection]
396 |
397 | Clear the current selection.
398 |
399 | **Signature**: `clearSelection(): void`
400 |
401 | ### `collapseAll` [#collapseall]
402 |
403 | Collapse all nodes in the tree.
404 |
405 | **Signature**: `collapseAll(): void`
406 |
407 | ### `collapseNode` [#collapsenode]
408 |
409 | Collapse a specific node by its source data ID.
410 |
411 | **Signature**: `collapseNode(nodeId: string | number): void`
412 |
413 | - `nodeId`: The ID of the node to collapse (source data format)
414 |
415 | ### `expandAll` [#expandall]
416 |
417 | Expand all nodes in the tree.
418 |
419 | **Signature**: `expandAll(): void`
420 |
421 | ### `expandNode` [#expandnode]
422 |
423 | Expand a specific node by its source data ID.
424 |
425 | **Signature**: `expandNode(nodeId: string | number): void`
426 |
427 | - `nodeId`: The ID of the node to expand (source data format)
428 |
429 | ### `expandToLevel` [#expandtolevel]
430 |
431 | Expand nodes up to the specified depth level (0-based).
432 |
433 | **Signature**: `expandToLevel(level: number): void`
434 |
435 | - `level`: The maximum depth level to expand (0 = root level only)
436 |
437 | ### `getExpandedNodes` [#getexpandednodes]
438 |
439 | Get an array of currently expanded node IDs in source data format.
440 |
441 | **Signature**: `getExpandedNodes(): (string | number)[]`
442 |
443 | ### `getNodeById` [#getnodebyid]
444 |
445 | Get a tree node by its source data ID.
446 |
447 | **Signature**: `getNodeById(nodeId: string | number): TreeNode | null`
448 |
449 | - `nodeId`: The ID of the node to retrieve (source data format)
450 |
451 | ### `getNodeLoadingState` [#getnodeloadingstate]
452 |
453 | Get the loading state of a dynamic node.
454 |
455 | **Signature**: `getNodeLoadingState(nodeId: string | number): NodeLoadingState`
456 |
457 | - `nodeId`: The ID of the node to check loading state for
458 |
459 | ### `getSelectedNode` [#getselectednode]
460 |
461 | Get the currently selected tree node.
462 |
463 | **Signature**: `getSelectedNode(): TreeNode | null`
464 |
465 | ### `insertNodeAfter` [#insertnodeafter]
466 |
467 | Insert a new node after an existing node at the same level.
468 |
469 | **Signature**: `insertNodeAfter(afterNodeId: string | number, nodeData: any): void`
470 |
471 | - `afterNodeId`: The ID of the existing node after which the new node should be inserted
472 | - `nodeData`: The node data object using the format specified in dataFormat and field properties
473 |
474 | ### `insertNodeBefore` [#insertnodebefore]
475 |
476 | Insert a new node before an existing node at the same level.
477 |
478 | **Signature**: `insertNodeBefore(beforeNodeId: string | number, nodeData: any): void`
479 |
480 | - `beforeNodeId`: The ID of the existing node before which the new node should be inserted
481 | - `nodeData`: The node data object using the format specified in dataFormat and field properties
482 |
483 | ### `markNodeLoaded` [#marknodeloaded]
484 |
485 | Mark a dynamic node as loaded.
486 |
487 | **Signature**: `markNodeLoaded(nodeId: string | number): void`
488 |
489 | - `nodeId`: The ID of the node to mark as loaded
490 |
491 | ### `markNodeUnloaded` [#marknodeunloaded]
492 |
493 | Mark a dynamic node as unloaded and collapse it.
494 |
495 | **Signature**: `markNodeUnloaded(nodeId: string | number): void`
496 |
497 | - `nodeId`: The ID of the node to mark as unloaded
498 |
499 | ### `removeChildren` [#removechildren]
500 |
501 | Remove all children (descendants) of a node while keeping the node itself.
502 |
503 | **Signature**: `removeChildren(nodeId: string | number): void`
504 |
505 | - `nodeId`: The ID of the parent node whose children should be removed
506 |
507 | ### `removeNode` [#removenode]
508 |
509 | Remove a node and all its descendants from the tree.
510 |
511 | **Signature**: `removeNode(nodeId: string | number): void`
512 |
513 | - `nodeId`: The ID of the node to remove (along with all its descendants)
514 |
515 | ### `scrollIntoView` [#scrollintoview]
516 |
517 | Scroll to a specific node and expand parent nodes as needed to make it visible.
518 |
519 | **Signature**: `scrollIntoView(nodeId: string | number, options?: ScrollIntoViewOptions): void`
520 |
521 | - `nodeId`: The ID of the node to scroll to (source data format)
522 | - `options`: Optional scroll options
523 |
524 | ### `scrollToItem` [#scrolltoitem]
525 |
526 | Scroll to a specific node if it's currently visible in the tree.
527 |
528 | **Signature**: `scrollToItem(nodeId: string | number): void`
529 |
530 | - `nodeId`: The ID of the node to scroll to (source data format)
531 |
532 | ### `selectNode` [#selectnode]
533 |
534 | Programmatically select a node by its source data ID.
535 |
536 | **Signature**: `selectNode(nodeId: string | number): void`
537 |
538 | - `nodeId`: The ID of the node to select (source data format)
539 |
540 | ## Styling [#styling]
541 |
542 | ### Theme Variables [#theme-variables]
543 |
544 | | Variable | Default Value (Light) | Default Value (Dark) |
545 | | --- | --- | --- |
546 | | [backgroundColor](../styles-and-themes/common-units/#color)-Tree-row--hover | $color-surface-100 | $color-surface-100 |
547 | | [backgroundColor](../styles-and-themes/common-units/#color)-Tree-row--selected | $color-primary-50 | $color-primary-50 |
548 | | [borderColor](../styles-and-themes/common-units/#color)-Tree-row--focus | $color-primary-500 | $color-primary-500 |
549 | | [outlineColor](../styles-and-themes/common-units/#color)-Tree--focus | $outlineColor--focus | $outlineColor--focus |
550 | | [outlineOffset](../styles-and-themes/common-units/#size)-Tree--focus | $outlineOffset--focus | $outlineOffset--focus |
551 | | [outlineStyle](../styles-and-themes/common-units/#border)-Tree--focus | $outlineStyle--focus | $outlineStyle--focus |
552 | | [outlineWidth](../styles-and-themes/common-units/#size)-Tree--focus | $outlineWidth--focus | $outlineWidth--focus |
553 | | [textColor](../styles-and-themes/common-units/#color)-Tree | $textColor-primary | $textColor-primary |
554 | | [textColor](../styles-and-themes/common-units/#color)-Tree--hover | $textColor-primary | $textColor-primary |
555 | | [textColor](../styles-and-themes/common-units/#color)-Tree--selected | $color-primary-900 | $color-primary-900 |
556 |
```
--------------------------------------------------------------------------------
/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 |
```
