This is page 129 of 137. Use http://codebase.md/xmlui-org/xmlui?page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── cold-items-taste.md
│ ├── config.json
│ ├── empty-spiders-dress.md
│ ├── shy-windows-allow.md
│ ├── sour-coins-read.md
│ ├── tame-zebras-invite.md
│ ├── three-ideas-invent.md
│ ├── twenty-jeans-watch.md
│ ├── warm-spies-melt.md
│ └── whole-ways-cry.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── actions.md
│ ├── AppRoot.md
│ ├── component-apis.md
│ ├── component-rendering.md
│ ├── component-review-checklist.md
│ ├── containers.md
│ ├── data-sources.md
│ ├── e2e-summary.md
│ ├── expression-evaluation.md
│ ├── glossary.md
│ ├── helper-components.md
│ ├── index.md
│ ├── loaders.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
│ ├── rendering-fundamentals.md
│ ├── reusable-components.md
│ ├── standalone-apps.md
│ ├── state-management.md
│ └── xmlui-extensibility.xlsx
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.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
│ │ │ ├── BehaviorContext.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
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/docs/public/pages/styles-and-themes/theme-variables.md:
--------------------------------------------------------------------------------
```markdown
# Theme Variables
The appearance of an xmlui app can be quickly customized with themes. The basic unit of a theme is a _theme variable_, which sets a particular visual trait of the app or a specific component, such as the background color, text weight, vertical padding, and others.
Theme variables follow a naming convention: They compose identifier-like segments separated by a simple or double dash. Here are a few examples:
```text
maxWidth-content
borderColor-Card
backgroundColor-checked-Switch
outlineStyle-Checkbox-error--focus
borderColor-Button-secondary-outlined--hover--active
```
Most theme variables are composed of two segments, like the first two examples. However, more extended theme variables exist with multiple segments, such as the last three above.
The following pattern summarizes formally the name of a theme variable:
```text
<propertyName>-<part-or-aspect>-<ComponentId>-<variant>--<state>
```
**`propertyName`**
Each theme variable starts with a name, identifying the visual attribute the particular theme property defines. This segment uses camel-casing, the counterpart of CSS style names with kebab-casing.
For example, the `maxWidth` property name has the same semantics as the `max-width` CSS style.
> [!INFO]
> Though there are exceptions, most theme variables are projected to the counterpart CSS style at the end of the day (using the same syntax and semantics). Also, only about one-tenth of CSS style names have their pair in xmlui.
**`ComponentId`**
Most theme variables belong to a specific component (we call them _component-bound theme variables_). A `ComponentId` always starts with an uppercase letter and follows Pascal-casing. If no `ComponentId` is in the variable name, we call it an _app-bound theme variable_.
For example, the `borderColor-Card` name uses the `Card` as `ComponentId`, suggesting that it sets the border color of the `Card` component.
> [!INFO]
> We call theme variables without a `ComponentId` segment _app-bound_ variables, as they do not belong to a particular component. They set some visual traits that belong to the entire app or multiple components.
**`aspect-or-part`**
When a particular theme variable belongs to a part (or specific visual aspect) of the component we name in `ComponentId`, this variable name segment refers to that part or aspect. For example, `backgroundColor-checked-Switch` refers to the background color to use when a `Switch` component is checked (turned on).
**`variant`**
Some components may have visual variants that use different style attributes. For example, a button has three different variants: `solid` (with background), `outlined` (with a border), and `ghost` (no border or background unless hovered). Adding the _variant_ segment after `ComponentId` specifies the theme variable's particular variant.
For example, the `borderColor-Button-outlined` theme variable sets the border color only for the `outlined` variant of buttons and keeps the border color of others intact.
> [!INFO]
> Some components (such as `Button`) have multiple properties representing a variant (it also has a `themeColor`). In this case, you can add multiple `variant` segments to the theme variable.
**`state`**
Components may have different visual traits according to their state in the UI. For example, a button may have a different background color when the mouse hovers over it.
The `state` segment of a theme variable specifies the particular state of the component the theme variable affects; it starts with a double dash. For example, the `backgroundColor-Button-primary-solid--hover` theme variable sets the background color of a button with the `primary` theme color and `solid` variant when the mouse hovers over it.
This table summarizes the states you can use with theme variables:
| Name | Description |
| ------------ | --------------------------------------------------------------------------------------------------------------- |
| `‑‑active` | The component is active. For example, the left mouse button is pressed while the pointer is over the component. |
| `‑‑disabled` | The component is disabled; it does not accept user actions |
| `‑‑focus` | The component has the keyboard focus and processes keypress-related events |
| `‑‑hover` | Indicates the state when the mouse (pointer) hovers above the component's client area |
You can add multiple state segments to a theme variable to define a combined state. For example, the `‑‑active‑‑hover` combination defines a visual trait when the component is activated and hovered.
> [!INFO]
> You can use your custom state names for your components.
## Theme Property Names [#property-names]
You can refer to numerous visual properties via the `propertyName` segment. The following table summarizes their names and descriptions:
| Name | Description |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`backgroundColor`** | This property sets the [background color](/styles-and-themes/common-units#color) of an element. |
| **`borderBottom`** | This property is a shorthand to set an element's bottom border. It sets the values of `borderBottomWidth`, `borderBottomStyle` and `borderBottomColor`. |
| **`borderBottomColor`** | Sets the [color](/styles-and-themes/common-units#color) of an element's bottom border. |
| **`borderBottomStyle`** | Sets the line [style](/styles-and-themes/common-units#border-style) of an element's bottom border. |
| **`borderBottomWidth`** | Sets the width of an element's bottom border. |
| **`borderColor`** | This property sets the [color](/styles-and-themes/common-units#color) of an element's border. |
| **`borderEndEndRadius`** | This property defines a logical border radius on an element, which maps to the bottom-right radius with a left-to-right rendering direction and to the bottom-left radius with a right-to-left. |
| **`borderEndStartRadius`** | This property defines a logical border radius on an element, which maps to the bottom-left radius with a left-to-right rendering direction and to the bottom-right radius with a right-to-left. |
| **`borderHorizontal`** | This property sets the traits of the left and right borders. |
| **`borderHorizontalColor`** | This property sets the [color](/styles-and-themes/common-units#color) of the left and right borders. |
| **`borderHorizontalStyle`** | This property sets the [style](/styles-and-themes/common-units#border-style) of the left and right borders. |
| **`borderHorizontalWidth`** | This property sets the [width](/styles-and-themes/common-units#size) of the left and right borders. |
| **`borderRadius`** | This property property [rounds](/styles-and-themes/common-units#border-rounding) the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. |
| **`borderLeft`** | This property is a shorthand to set an element's left border. It sets the values of `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`. |
| **`borderLeftColor`** | Sets the [color](/styles-and-themes/common-units#color) of an element's left border. |
| **`borderLeftStyle`** | Sets the line [style](/styles-and-themes/common-units#border-style) of an element's left border. |
| **`borderLeftWidth`** | Sets the [width](/styles-and-themes/common-units#size) of an element's left border. |
| **`borderRight`** | This property is a shorthand to set an element's right border. It sets the values of `borderRightWidth`, `borderRightStyle` and `borderRightColor`. |
| **`borderRightColor`** | Sets the [color](/styles-and-themes/common-units#color) of an element's right border. |
| **`borderRightStyle`** | Sets the line [style](/styles-and-themes/common-units#border-style) of an element's right border. |
| **`borderRightWidth`** | Sets the [width](/styles-and-themes/common-units#size) of an element's right border. |
| **`borderStartEndRadius`** | This property defines a logical border radius on an element, which maps to the top-right radius with a left-to-right rendering direction and to the top-left radius with a right-to-left. |
| **`borderStartStartRadius`** | This property defines a logical border radius on an element, which maps to the top-left radius with a left-to-right rendering direction and to the top-right radius with a right-to-left. |
| **`borderStyle`** | This property sets the [style](/styles-and-themes/common-units#border-style) of an element's border. |
| **`borderTop`** | This property is a shorthand to set an element's top border. It sets the values of `borderTopWidth`, `borderTopStyle` and `borderTopColor`. |
| **`borderTopColor`** | Sets the [color](/styles-and-themes/common-units#color) of an element's top border. |
| **`borderTopStyle`** | Sets the line [style](/styles-and-themes/common-units#border-style) of an element's top border. |
| **`borderTopWidth`** | Sets the width of an element's top border. |
| **`borderVertical`** | This property sets the traits of the top and bottom borders. |
| **`borderVerticalColor`** | This property sets the [color](/styles-and-themes/common-units#color) of the top and bottom borders. |
| **`borderVerticalStyle`** | This property sets the [style](/styles-and-themes/common-units#border-style) of the top and bottom borders. |
| **`borderVerticalWidth`** | This property sets the [width](/styles-and-themes/common-units#size) of the top and bottom borders. |
| **`borderWidth`** | This property sets the width of an element's border. |
| **`boxShadow`** | This property adds shadow effects around an element's frame. |
| **`fontFamily`** | Specifies a prioritized list of one or more [font family](/styles-and-themes/common-units#font-family) names and/or generic family names for the selected element. |
| **`fontSize`** | This property sets the size of the font. |
| **`fontStyle`** | This property sets whether a font should be styled with a normal, italic, or oblique face from its `fontFamily`. |
| **`fontWeight`** | Sets the [weight](/styles-and-themes/common-units#font-weight) (or boldness) of the font. |
| **`fontStretch`** | This property selects a normal, condensed, or expanded face from a font. |
| **`letterSpacing`** | This property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values cause characters to spread farther apart, while negative values bring characters closer together. |
| **`lineHeight`** | Sets the [height](/styles-and-themes/common-units#size) of a line box in which the text is displayed. |
| **`marginBottom`** | This property sets the [height](/styles-and-themes/common-units#size) of the margin area on the bottom of an element. |
| **`marginHorizontal`** | This property combines setting the values of the `marginLeft` and `marginRight` properties. |
| **`marginLeft`** | This property sets the [width](/styles-and-themes/common-units#size) of the margin area on the left of an element. |
| **`marginRight`** | This property sets the [width](/styles-and-themes/common-units#size) of the margin area on the right of an element. |
| **`marginTop`** | This property sets the [height](/styles-and-themes/common-units#size) of the margin area on the top of an element. |
| **`marginVertical`** | This property combines setting the values of the `marginTop` and `marginBottom` properties. |
| **`maxHeight`** | This property sets the maximum [height](/styles-and-themes/common-units#size) of an element. It prevents the used value of the height property from becoming larger than the value specified for `maxHeight`. |
| **`maxWidth`** | This property sets the maximum [width](/styles-and-themes/common-units#size) of an element. It prevents the used value of the width property from becoming larger than the value specified for `maxWidth`. |
| **`minHeight`** | This property sets the minimum [height](/styles-and-themes/common-units#size) of an element. It prevents the used value of the height property from becoming smaller than the value specified for `minHeight`. |
| **`minWidth`** | This property sets the minimum [width](/styles-and-themes/common-units#size) of an element. It prevents the used value of the width property from becoming smaller than the value specified for `minWidth`. |
| **`outlineColor`** | This property sets the [color](/styles-and-themes/common-units#color) of an element's outline. An outline is a line that is drawn around an element, outside the border. |
| **`outlineOffset`** | This property sets the space between an outline and the edge or border of a focused element. |
| **`outlineStyle`** | This property sets the style of an element's outline. |
| **`outlineWidth`** | property sets the [width](/styles-and-themes/common-units#size) of an element's outline. |
| **`overflowX`** | This property sets what shows when content overflows an element's left and right edges. This may be nothing, a scroll bar, or the overflow content. |
| **`overflowY`** | This property sets what shows when content overflows an element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. |
| **`paddingBottom`** | This property sets the [height](/styles-and-themes/common-units#size) of the padding area on the bottom of an element. |
| **`paddingHorizontal`** | This property combines setting the values of the `paddingLeft` and `paddingRight` properties. |
| **`paddingLeft`** | This property sets the [width](/styles-and-themes/common-units#size) of the padding area on the left of an element. |
| **`paddingRight`** | This property sets the [width](/styles-and-themes/common-units#size) of the padding area on the right of an element. |
| **`paddingTop`** | This property sets the [height](/styles-and-themes/common-units#size) of the padding area on the top of an element. |
| **`paddingVertical`** | This property combines setting the values of the `paddingTop` and `paddingBottom` properties. |
| **`textColor`** | This property sets the [color](/styles-and-themes/common-units#color) of the text used for rendering a component. |
| **`textDecoration`** | This is a shorthand property that sets the appearance of decorative lines on text combining the `textDecorationLine`, `textDecorationColor`, `textDecorationStyle`, and `textDecorationThickness` properties. |
| **`textDecorationColor`** | Sets the [color](/styles-and-themes/common-units#color) of decorations added to text by `textDecorationLine`. |
| **`textDecorationLine`** | Sets the [kind](/styles-and-themes/common-units#text-decoration) of decoration that is used on text in an element, such as an underline or overline. |
| **`textDecorationStyle`** | Sets the style of the decoration line that is used on text in an element, such as a line-through, underline, or overline. |
| **`textDecorationThickness`** | Sets the stroke [thickness](/styles-and-themes/common-units#size) of the decoration line that is used on text in an element, such as a line-through, underline, or overline. |
| **`textTransform`** | This property specifies how to capitalize an element's text. |
| **`textUnderlineOffset`** | The offset [distance](/styles-and-themes/common-units#size) of an underlined text decoration line from its original position. |
## App-bound Traits [#app-bound-traits]
You can use these app-bound theme variables within an app:
| Theme Variable | Description |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`backgroundColor`** | This theme variable sets the background color of the xmlui app. |
| **`backgroundColor‑dropdown‑item‑‑active`** | This property sets the background color of active elements of the items in dropdown components. |
| **`backgroundColor‑dropdown‑item‑‑active‑‑hover`** | This property sets the background color of active, hovered elements of the items in dropdown components. |
| **`backgroundColor‑dropdown‑item‑‑hover`** | This property sets the background color of hovered elements of the items in dropdown components. |
| **`backgroundColor‑overlay`** | This property sets the background color of elements used as an overlay. |
| **`backgroundColor‑attention`** | This theme variable sets the background color of components using the "attention" background color. |
| **`backgroundColor‑‑disabled`** | This theme variable sets the background color of color of disabled compopnents. |
| **`backgroundColor‑primary`** | This theme variable sets the background color of components using the "primary" background color. |
| **`backgroundColor‑secondary`** | This theme variable sets the background color of components using the "secondary" background color. |
| **`backgroundColor‑subtitle`** | This theme variable sets the background color of components using the "subtitle" variant. |
| **`borderColor`** | This property sets the default border color of elements. |
| **`borderColor‑‑disabled`** | This property sets the default border color of disabled elements. |
| **`borderColor‑dropdown‑item`** | This property sets the default background color of items in dropdown components. |
| **`borderRadius`** | You can specify the default rounding for all components that use border rounding. |
| **`boxShadow‑md`** | A medium-size box shadow that gives an elevated look to a component. |
| **`boxShadow‑spread`** | A box shadow that spreads around all edges of a component. |
| **`boxShadow‑spread‑2‑xl`** | A box shadow that spreads around all edges of a component (more extended than `boxShadow‑spread‑2`). |
| **`boxShadow‑spread‑2`** | A box shadow that spreads around all edges of a component (more extended than `boxShadow‑spread`). |
| **`boxShadow‑xl`** | A box shadow that gives an elevated look to a component (bigger than `boxShadow-md`). |
| **`boxShadow‑xxl`** | A box shadow that gives an elevated look to a component (bigger than `boxShadow-xl`). |
| **`color-danger`** | This theme variable sets the base color shade for components using the "danger" color. |
| **`color-info`** | This theme variable sets the base color shade for components using the "info" color. |
| **`color-primary`** | This theme variable sets the base color shade for components using the primary color. |
| **`color-secondary`** | This theme variable sets the base color shade for components using the secondary color. |
| **`color-success`** | This theme variable sets the base color shade for components using the "success" color. |
| **`color-surface`** | This theme variable sets the base color shade for surface areas (component backgrounds). |
| **`color-warn`** | This theme variable sets the base color shade for components using the "warning" color. |
| **`fontFamily‑monospace`** | This theme variable specifies the font family for text elements marked with "monospace". |
| **`fontFamily‑sans‑serif`** | This theme variable specifies the font family for text elements marked with "sans-serif". |
| **`fontSize`** | This theme variable sets the default font size of text elements. |
| **`fontSize‑tiny`** | The smallest font size available in the XMLUI styling system. |
| **`fontSize‑xs`** | A font size between `fontSize-tiny` and `fonstSize‑sm`. |
| **`fontSize‑sm`** | A font size between `fontSize-xs` and `fonstSize-base`. |
| **`fontSize‑base`** | A font size between `fontSize-sm` and `fonstSize-lg`. |
| **`fontSize‑lg`** | A font size between `fontSize-base` and `fonstSize-xl`. |
| **`fontSize‑xl`** | A font size between `fontSize-lg` and `fonstSize-2xl`. |
| **`fontSize‑2xl`** | A font size between `fontSize-xl` and `fonstSize-3xl`. |
| **`fontSize‑3xl`** | A font size between `fontSize-2xl` and `fonstSize-4xl`. |
| **`fontSize‑4xl`** | A font size between `fontSize-3xl` and `fonstSize-5xl`. |
| **`fontSize‑5xl`** | A font size between `fontSize-4xl` and `fonstSize-6xl`. |
| **`fontSize‑6xl`** | A font size between `fontSize-5l` and `fonstSize-7xl`. |
| **`fontSize‑7xl`** | A font size between `fontSize-6l` and `fonstSize-8xl`. |
| **`fontSize‑8xl`** | A font size between `fontSize-7xl` and `fonstSize-9xl`. |
| **`fontSize‑9xl`** | The tallest font size available in the XMLUI styling system. |
| **`fontWeight`** | This theme variable sets the weight of the default font. |
| **`fontWeight‑bold`** | This theme variable sets the font's weight marked as bold (when using any text variant with a weight set to `bold`). |
| **`fontWeight‑extra‑bold`** | This theme variable sets the font's weight marked as extra-bold (when using any text variant with a weight set to `extra-bold`). |
| **`fontWeight‑light`** | This theme variable sets the font's weight marked as light (when using any text variant with a weight set to `light`). |
| **`fontWeight‑normal`** | This theme variable sets the font's weight marked as normal (when using any text variant with a weight set to `normal`). |
| **`fontWeight‑medium`** | This theme variable sets the font's weight marked as medium (when using any text variant with a weight set to `medium`). |
| **`lineHeight‑loose`** | This theme variable sets the line heights of elements using the "loose" (meaning, "bigger than relaxed") trait. |
| **`lineHeight‑none`** | This theme variable sets the line heights of elements using the "none" (meaning, "no line-height specification") trait. |
| **`lineHeight‑normal`** | This theme variable sets the line heights of elements using the "normal" (meaning, "bigger than snug but less than relaxed") trait. |
| **`lineHeight‑relaxed`** | This theme variable sets the line heights of elements using the "relaxed" (meaning, "bigger than normal but less than loose") trait. |
| **`lineHeight‑snug`** | This theme variable sets the line heights of elements using the "snug" (meaning, "bigger than none but less than normal") trait. |
| **`lineHeight‑tight`** | This theme variable sets the line heights of elements using the "tight" (meaning, "bigger than none") trait. |
| **`maxWidth‑desktop`** | This theme variable sets the maximum width of the app's viewport, which makes it appear like a desktop. When the viewport width is larger than `maxWidth-tablet` and smaller than or equal to this value, the app considers the current view as `desktop`. |
| **`maxWidth‑content`** | This theme variable sets the maximum width of the app's content. If the viewport is broader, the content will have margins to the left and right, keeping the width at the specified maximum. |
| **`maxWidth‑desktop`** | This theme variable sets the maximum width of the app's viewport, which makes it appear like a desktop. When the viewport width is larger than `maxWidth-tablet` and smaller than or equal to this value, the app considers the current view as `desktop`. |
| **`maxWidth‑desktop‑large`** | This theme variable sets the maximum width of the app's viewport, which makes it appear like a large desktop. When the viewport width is larger than `maxWidth-desktop` and smaller than or equal to this value, the app considers the current view as `large-desktop`. |
| **`maxWidth‑landscape‑phone`** | This theme variable sets the maximum width of the app's viewport, which makes it appear like a phone in landscape mode. When the viewport width is larger than `maxWidth-phone` and smaller than or equal to this value, the app considers the current view as `landscape-phone`. |
| **`maxWidth‑phone`** | This theme variable sets the maximum width of the app's viewport, which makes it appear like a phone in portrait mode. When the viewport width is smaller than or equal to this value, the app considers the current view as `phone`. |
| **`maxWidth‑tablet`** | This theme variable sets the maximum width of the app's viewport, which makes it appear like a tablet (either in portrait or landscape mode). When the viewport width is larger than `maxWidth-landscape-phone` and smaller than or equal to this value, the app considers the current view as `tablet`. |
| **`outlineColor‑‑focus`** | Set the color of the outline used for focused components. |
| **`outlineOffset‑‑focus`** | Set the width of the outline used for focused components. |
| **`outlineStyle‑‑focus`** | Set the style of the outline used for focused components. |
| **`outlineWidth‑‑focus`** | Set the width of the outline used for focused components. |
| **`textColor‑attention`** | This theme variable sets the color of text elements using the "attention" color. |
| **`textColor‑‑disabled`** | This theme variable sets the color of disabled text elements. |
| **`textColor‑primary`** | This theme variable sets the color of text elements using the "primary" color. |
| **`textColor‑secondary`** | This theme variable sets the color of text elements using the "secondary" color. |
| **`textColor‑subtitle`** | This theme variable sets the color of text elements using the "subtitle" variant. |
## Colors in Themes
XMLUI provides a palette of 77 colors for each theme out of the box. These colors are combinations of seven colors with 11 shades for each.
These theme variables represent the base colors:
- `color-surface`: The color for the surface (background) areas
- `color-primary`: The primary color of the app (buttons, badges, checkboxes, etc.)
- `color-secondary`: The secondary color of the app (buttons, badges, checkboxes, etc.)
- `color-warn`: The color to use for warnings
- `color-danger`: The color for signing dangerous situations (for example, the color of a Delete button)
- `color-success`: The color for signing success
- `color-info`: The color for signing information
When you set a particular base color, xmlui creates several shade variants (using 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 as prefixes) from the lightest to the darkest. It uses the specified base color for shade 500 and calculates five darker shades (400, 300, 200, 100, and 50, from lighter to darker) plus five lighter shades (600, 700, 800, 900, and 950, from darker to lighter).
For example, when you set the the `color-primary` variable to `#008000`, XMLUI creates these shades:
```xmlui-pg name="Custom primary color shades"
---app
<App>
<Theme color-primary="#008000">
<Palette name="primary" />
</Theme>
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
When selecting the primary color, choose one representing the middle shade (500). Otherwise, you may end up with an unuseful set of shades. For example, setting `surface-color` to `#001000` will create too many dark shades.
```xmlui-pg name="Unuseful primary color shades"
---app
<App>
<Theme color-primary="#001000">
<Palette name="primary" />
</Theme>
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
### Default Color Shade Sets
XMLUI declares these default color shade sets:
**Surface**:
```xmlui-pg name="Surface Colors"
---app
<App>
<Palette name="surface" />
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
**Primary**:
```xmlui-pg name="Primary Colors"
---app
<App>
<Palette name="primary" />
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
**Secondary**:
```xmlui-pg name="Secondary Colors"
---app
<App>
<Palette name="secondary" />
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
**Warn**:
```xmlui-pg name="Warn Colors"
---app
<App>
<Palette name="warn" />
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
**Danger**:
```xmlui-pg name="Danger Colors"
---app
<App>
<Palette name="danger" />
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
**Success**:
```xmlui-pg name="Success Colors"
---app
<App>
<Palette name="success" />
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
**Info**:
```xmlui-pg name="Info Colors"
---app
<App>
<Palette name="info" />
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
---comp
<Component name="Palette">
<FlowLayout>
<Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
<Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
</FlowLayout>
</Component>
```
### Default Text Colors
- `textColor-primary`: The text color used by components that build on the primary color
- `textColor-secondary`: The text color used by components that build on the secondary color
- `textColor-attention`: Accented text color
- `textColor-subtitle`: Text color of text with the "subtitle" variant
- `textColor--disabled`: Text color representing the disabled state of a component
```xmlui-pg name="Default Text Colors"
<App>
<HStack>
<Text width="180px" variant="strong">textColor-primary:</Text>
<Text color="$textColor-primary">This is an example text</Text>
</HStack>
<HStack>
<Text width="180px" variant="strong">textColor-secondary:</Text>
<Text color="$textColor-secondary">This is an example text</Text>
</HStack>
<HStack>
<Text width="180px" variant="strong">textColor-attention:</Text>
<Text color="$textColor-attention">This is an example text</Text>
</HStack>
<HStack>
<Text width="180px" variant="strong">textColor-subtitle:</Text>
<Text color="$textColor-subtitle">This is an example text</Text>
</HStack>
<HStack>
<Text width="180px" variant="strong">textColor--disabled:</Text>
<Text color="$textColor--disabled">This is an example text</Text>
</HStack>
</App>
```
### Default Background Colors
- `backgroundColor`: The default background color for all components
- `backgroundColor-primary`: The background color used by components that build on the primary color
- `backgroundColor-secondary`: The background color used by components that build on the secondary color
- `backgroundColor-attention`: The background color used by components that build on the attention color
- `backgroundColor--disabled`: The background color representing the disabled state of a component
- `backgroundColor--selected`: The background color representing the selected state of a component
- `backgroundColor-overlay`: The background color of overlaid components
- `backgroundColor-dropdown-item--hover`: The background color of hovered items in dropdown containers
- `backgroundColor-dropdown-item--active`: The background color of active items in dropdown containers
```xmlui-pg name="Default Background Colors"
---app
<App>
<FlowLayout>
<Swatch color="$backgroundColor" width="50%" />
<Swatch color="$backgroundColor-primary" width="50%" />
<Swatch color="$backgroundColor-secondary" width="50%" />
<Swatch color="$backgroundColor-attention" width="50%" />
<Swatch color="$backgroundColor--disabled" width="50%" />
<Swatch color="$backgroundColor--selected" width="50%" />
<Swatch color="$backgroundColor-overlay" width="50%" />
<Swatch color="$backgroundColor-dropdown-item--hover" width="50%" />
<Swatch color="$backgroundColor-dropdown-item--active" width="50%" />
</FlowLayout>
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
```
### Validation Colors
These colors represent validation states:
- `color-info`: Color of components with informational messages
- `color-valid`: Color signing valid state
- `color-warning`: Color of warning
- `color-error`: Color signing some error
```xmlui-pg name="Validation Colors"
---app
<App>
<FlowLayout>
<Swatch color="$color-info" width="25%" textColor="$color-surface-50" />
<Swatch color="$color-valid" width="25%" textColor="$color-surface-50" />
<Swatch color="$color-warning" width="25%" textColor="$color-surface-50" />
<Swatch color="$color-error" width="25%" textColor="$color-surface-50" />
</FlowLayout>
</App>
---comp
<Component name="Swatch">
<VStack gap="0.25rem">
<Stack
height="50px"
border="1px solid black"
backgroundColor="{$props.color}"
horizontalAlignment="center"
verticalAlignment="center">
<Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
</Stack>
</VStack>
</Component>
```
## Fonts
You can influence the default font settings of a particular theme with the following theme variables:
### Font Family
These theme variables set the default font styles:
- `fontFamily`: The default font family used in the app
- `fontFamily-sans-serif`: The default sans-serif font family used in the app
- `fontFamily-monospace`: The default monospace font family used in the app
```xmlui-pg name="Font Family"
<App>
<HStack>
<Text width="200px" variant="strong">Default font family:</Text>
<Text fontFamily="$fontFamily-sans-serif">This is an example text</Text>
</HStack>
<HStack>
<Text width="200px" variant="strong">Sans serif font family:</Text>
<Text fontFamily="$fontFamily-sans-serif">This is an example text</Text>
</HStack>
<HStack>
<Text width="200px" variant="strong">Monospace font family:</Text>
<Text fontFamily="$fontFamily-monospace">This is an example text</Text>
</HStack>
</App>
```
### Line Height
These theme variables define a set of line heights relative to the font size:
```xmlui-pg name="Line Height"
<App>
<HStack verticalAlignment="center">
<Text width="180px" variant="strong">lineHeight-none:</Text>
<Text
lineHeight="$lineHeight-none"
backgroundColor="$color-surface-300"
paddingHorizontal="$space-2"
>
This is an example text
</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="180px" variant="strong">lineHeight-tight:</Text>
<Text
lineHeight="$lineHeight-tight"
backgroundColor="$color-surface-300"
paddingHorizontal="$space-2"
>
This is an example text
</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="180px" variant="strong">lineHeight-snug:</Text>
<Text
lineHeight="$lineHeight-snug"
backgroundColor="$color-surface-300"
paddingHorizontal="$space-2"
>
This is an example text
</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="180px" variant="strong">lineHeight-normal:</Text>
<Text
lineHeight="$lineHeight-normal"
backgroundColor="$color-surface-300"
paddingHorizontal="$space-2"
>
This is an example text
</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="180px" variant="strong">lineHeight-relaxed:</Text>
<Text
lineHeight="$lineHeight-relaxed"
backgroundColor="$color-surface-300"
paddingHorizontal="$space-2"
>
This is an example text
</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="180px" variant="strong">lineHeight-loose:</Text>
<Text
lineHeight="$lineHeight-loose"
backgroundColor="$color-surface-300"
paddingHorizontal="$space-2"
>
This is an example text
</Text>
</HStack>
</App>
```
### Font Size
The `fontSize` theme variables allow you to set your themes' normal font size (`fontSize-base`). You can use this set of theme variables to define font sizes relative to `fontSize`:
```xmlui-pg name="Font Size" height="400px"
<App>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-tiny:</Text>
<Text fontSize="$fontSize-tiny">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-xs:</Text>
<Text fontSize="$fontSize-xs">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-sm:</Text>
<Text fontSize="$fontSize-sm">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-base:</Text>
<Text fontSize="$fontSize-base">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-xl:</Text>
<Text fontSize="$fontSize-xl">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-2xl:</Text>
<Text fontSize="$fontSize-2xl">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-3xl:</Text>
<Text fontSize="$fontSize-3xl">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-4xl:</Text>
<Text fontSize="$fontSize-4xl">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-5xl:</Text>
<Text fontSize="$fontSize-5xl">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-6xl:</Text>
<Text fontSize="$fontSize-6xl">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-7xl:</Text>
<Text fontSize="$fontSize-7xl">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-8xl:</Text>
<Text fontSize="$fontSize-8xl">Example</Text>
</HStack>
<HStack verticalAlignment="center">
<Text width="160px" variant="strong">fontSize-9xl:</Text>
<Text fontSize="$fontSize-9xl">Example</Text>
</HStack>
</App>
```
### Font Weight
The `fontWeight` theme variables allow you to set your themes' normal font weight (`fontWeight-normal`). You can use this set of theme variables to define font sizes relative to `fontWeight`:
```xmlui-pg name="Font Weight"
<App>
<HStack>
<Text width="200px" variant="strong">fontWeight-light:</Text>
<Text fontWeight="$fontWeight-light">This is an example text</Text>
</HStack>
<HStack>
<Text width="200px" variant="strong">fontWeight-normal:</Text>
<Text fontWeight="$fontWeight-normal">This is an example text</Text>
</HStack>
<HStack>
<Text width="200px" variant="strong">fontWeight-medium:</Text>
<Text fontWeight="$fontWeight-medium">This is an example text</Text>
</HStack>
<HStack>
<Text width="200px" variant="strong">fontWeight-bold:</Text>
<Text fontWeight="$fontWeight-bold">This is an example text</Text>
</HStack>
<HStack>
<Text width="200px" variant="strong">fontWeight-extra-bold:</Text>
<Text fontWeight="$fontWeight-extra-bold">This is an example text</Text>
</HStack>
</App>
```
## Shadows
XMLUI defines a few stock shadow resources:
```xmlui-pg name="Shadows" height="320px"
<App>
<HStack padding="1.5rem" gap="1.5rem">
<Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow" >
boxShadow
</Stack>
<Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-md">
boxShadow-md
</Stack>
<Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-xxl">
boxShadow-xxl
</Stack>
</HStack>
<HStack padding="1.5rem" gap="1.5rem">
<Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-spread">
boxShadow-spread
</Stack>
<Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-spread-2">
boxShadow-spread-2
</Stack>
<Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-spread-2-xl">
boxShadow-spread-2-xl
</Stack>
</HStack>
</App>
```
## Spacing
XMLUI uses a relative scale with spacing (paddings, margins, gaps, etc.). This scale uses a unit defined with `space-base`, which you can set in your theme. When referring to a particular spacing, you can use values like `space-0`, `space-1`, ..., `space-12`, ..., and `space-96`, as the following example shows:
```xmlui-pg name="Spacing"
<App gap="$gap-tight">
<Text value="The base value is: 0.25rem" variant="strong" />
<HStack>
<Text value="space-0" width="$space-20" />
<Stack width="$space-0" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-0_5" width="$space-20" />
<Stack width="$space-0_5" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-1" width="$space-20" />
<Stack width="$space-1" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-1_5" width="$space-20" />
<Stack width="$space-1_5" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-2" width="$space-20" />
<Stack width="$space-2" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-2_5" width="$space-20" />
<Stack width="$space-2_5" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-3" width="$space-20" />
<Stack width="$space-3" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-3_5" width="$space-20" />
<Stack width="$space-3_5" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-4" width="$space-20" />
<Stack width="$space-4" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-5" width="$space-20" />
<Stack width="$space-5" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-6" width="$space-20" />
<Stack width="$space-6" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-7" width="$space-20" />
<Stack width="$space-7" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-8" width="$space-20" />
<Stack width="$space-8" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-9" width="$space-20" />
<Stack width="$space-9" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-10" width="$space-20" />
<Stack width="$space-10" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-11" width="$space-20" />
<Stack width="$space-11" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-12" width="$space-20" />
<Stack width="$space-12" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-14" width="$space-20" />
<Stack width="$space-14" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-16" width="$space-20" />
<Stack width="$space-16" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-20" width="$space-20" />
<Stack width="$space-20" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-24" width="$space-20" />
<Stack width="$space-24" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-28" width="$space-20" />
<Stack width="$space-28" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-32" width="$space-20" />
<Stack width="$space-32" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-36" width="$space-20" />
<Stack width="$space-36" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-40" width="$space-20" />
<Stack width="$space-40" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-44" width="$space-20" />
<Stack width="$space-44" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-48" width="$space-20" />
<Stack width="$space-48" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-52" width="$space-20" />
<Stack width="$space-52" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-56" width="$space-20" />
<Stack width="$space-56" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-60" width="$space-20" />
<Stack width="$space-60" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-64" width="$space-20" />
<Stack width="$space-64" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-72" width="$space-20" />
<Stack width="$space-72" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-80" width="$space-20" />
<Stack width="$space-80" backgroundColor="$color-info" />
</HStack>
<HStack>
<Text value="space-96" width="$space-20" />
<Stack width="$space-96" backgroundColor="$color-info" />
</HStack>
</App>
```
## Spacing in Layout Containers [#spacing-in-layout-containers]
Besides the spacing theme variables, layout containers provide a few others that can be themed. Use these theme variables to provide consistent spacing with layout containers.
**Gaps**:
- `gap-none`: No gap
- `gap-tight`: Less gap than the normal (layout container defaults)
- `gap-normal`: Default layout container gap
- `gap-loose`: More gap than the normal
**Padding**:
- `padding-none`: No padding
- `padding-tight`: Less padding than the normal (layout container defaults)
- `padding-normal`: Default layout container padding
- `padding-loose`: More padding than the normal
**General spacing** (padding, gaps, other spacing):
- `padding-none`: No spacing
- `padding-tight`: Less spacing than the normal
- `padding-normal`: Default spacing
- `padding-loose`: More spacing than the normal
```