This is page 171 of 179. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=true&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
1 | # Theme Variables
2 |
3 | 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.
4 |
5 | Theme variables follow a naming convention: They compose identifier-like segments separated by a simple or double dash. Here are a few examples:
6 |
7 | ```text
8 | maxWidth-content
9 | borderColor-Card
10 | backgroundColor-checked-Switch
11 | outlineStyle-Checkbox-error--focus
12 | borderColor-Button-secondary-outlined--hover--active
13 | ```
14 |
15 | 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.
16 |
17 | The following pattern summarizes formally the name of a theme variable:
18 |
19 | ```text
20 | <propertyName>-<part-or-aspect>-<ComponentId>-<variant>--<state>
21 | ```
22 |
23 | **`propertyName`**
24 |
25 | 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.
26 |
27 | For example, the `maxWidth` property name has the same semantics as the `max-width` CSS style.
28 |
29 | > [!INFO]
30 | > 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.
31 |
32 | **`ComponentId`**
33 |
34 | 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_.
35 |
36 | For example, the `borderColor-Card` name uses the `Card` as `ComponentId`, suggesting that it sets the border color of the `Card` component.
37 |
38 | > [!INFO]
39 | > 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.
40 |
41 | **`aspect-or-part`**
42 |
43 | 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).
44 |
45 | **`variant`**
46 |
47 | 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.
48 |
49 | 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.
50 |
51 | > [!INFO]
52 | > 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.
53 |
54 | **`state`**
55 |
56 | 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.
57 |
58 | 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.
59 |
60 | This table summarizes the states you can use with theme variables:
61 |
62 | | Name | Description |
63 | | ------------ | --------------------------------------------------------------------------------------------------------------- |
64 | | `‑‑active` | The component is active. For example, the left mouse button is pressed while the pointer is over the component. |
65 | | `‑‑disabled` | The component is disabled; it does not accept user actions |
66 | | `‑‑focus` | The component has the keyboard focus and processes keypress-related events |
67 | | `‑‑hover` | Indicates the state when the mouse (pointer) hovers above the component's client area |
68 |
69 | 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.
70 |
71 | > [!INFO]
72 | > You can use your custom state names for your components.
73 |
74 | ## Theme Property Names [#property-names]
75 |
76 | You can refer to numerous visual properties via the `propertyName` segment. The following table summarizes their names and descriptions:
77 |
78 | | Name | Description |
79 | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
80 | | **`backgroundColor`** | This property sets the [background color](/styles-and-themes/common-units#color) of an element. |
81 | | **`borderBottom`** | This property is a shorthand to set an element's bottom border. It sets the values of `borderBottomWidth`, `borderBottomStyle` and `borderBottomColor`. |
82 | | **`borderBottomColor`** | Sets the [color](/styles-and-themes/common-units#color) of an element's bottom border. |
83 | | **`borderBottomStyle`** | Sets the line [style](/styles-and-themes/common-units#border-style) of an element's bottom border. |
84 | | **`borderBottomWidth`** | Sets the width of an element's bottom border. |
85 | | **`borderColor`** | This property sets the [color](/styles-and-themes/common-units#color) of an element's border. |
86 | | **`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. |
87 | | **`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. |
88 | | **`borderHorizontal`** | This property sets the traits of the left and right borders. |
89 | | **`borderHorizontalColor`** | This property sets the [color](/styles-and-themes/common-units#color) of the left and right borders. |
90 | | **`borderHorizontalStyle`** | This property sets the [style](/styles-and-themes/common-units#border-style) of the left and right borders. |
91 | | **`borderHorizontalWidth`** | This property sets the [width](/styles-and-themes/common-units#size) of the left and right borders. |
92 | | **`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. |
93 | | **`borderLeft`** | This property is a shorthand to set an element's left border. It sets the values of `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`. |
94 | | **`borderLeftColor`** | Sets the [color](/styles-and-themes/common-units#color) of an element's left border. |
95 | | **`borderLeftStyle`** | Sets the line [style](/styles-and-themes/common-units#border-style) of an element's left border. |
96 | | **`borderLeftWidth`** | Sets the [width](/styles-and-themes/common-units#size) of an element's left border. |
97 | | **`borderRight`** | This property is a shorthand to set an element's right border. It sets the values of `borderRightWidth`, `borderRightStyle` and `borderRightColor`. |
98 | | **`borderRightColor`** | Sets the [color](/styles-and-themes/common-units#color) of an element's right border. |
99 | | **`borderRightStyle`** | Sets the line [style](/styles-and-themes/common-units#border-style) of an element's right border. |
100 | | **`borderRightWidth`** | Sets the [width](/styles-and-themes/common-units#size) of an element's right border. |
101 | | **`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. |
102 | | **`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. |
103 | | **`borderStyle`** | This property sets the [style](/styles-and-themes/common-units#border-style) of an element's border. |
104 | | **`borderTop`** | This property is a shorthand to set an element's top border. It sets the values of `borderTopWidth`, `borderTopStyle` and `borderTopColor`. |
105 | | **`borderTopColor`** | Sets the [color](/styles-and-themes/common-units#color) of an element's top border. |
106 | | **`borderTopStyle`** | Sets the line [style](/styles-and-themes/common-units#border-style) of an element's top border. |
107 | | **`borderTopWidth`** | Sets the width of an element's top border. |
108 | | **`borderVertical`** | This property sets the traits of the top and bottom borders. |
109 | | **`borderVerticalColor`** | This property sets the [color](/styles-and-themes/common-units#color) of the top and bottom borders. |
110 | | **`borderVerticalStyle`** | This property sets the [style](/styles-and-themes/common-units#border-style) of the top and bottom borders. |
111 | | **`borderVerticalWidth`** | This property sets the [width](/styles-and-themes/common-units#size) of the top and bottom borders. |
112 | | **`borderWidth`** | This property sets the width of an element's border. |
113 | | **`boxShadow`** | This property adds shadow effects around an element's frame. |
114 | | **`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. |
115 | | **`fontSize`** | This property sets the size of the font. |
116 | | **`fontStyle`** | This property sets whether a font should be styled with a normal, italic, or oblique face from its `fontFamily`. |
117 | | **`fontWeight`** | Sets the [weight](/styles-and-themes/common-units#font-weight) (or boldness) of the font. |
118 | | **`fontStretch`** | This property selects a normal, condensed, or expanded face from a font. |
119 | | **`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. |
120 | | **`lineHeight`** | Sets the [height](/styles-and-themes/common-units#size) of a line box in which the text is displayed. |
121 | | **`marginBottom`** | This property sets the [height](/styles-and-themes/common-units#size) of the margin area on the bottom of an element. |
122 | | **`marginHorizontal`** | This property combines setting the values of the `marginLeft` and `marginRight` properties. |
123 | | **`marginLeft`** | This property sets the [width](/styles-and-themes/common-units#size) of the margin area on the left of an element. |
124 | | **`marginRight`** | This property sets the [width](/styles-and-themes/common-units#size) of the margin area on the right of an element. |
125 | | **`marginTop`** | This property sets the [height](/styles-and-themes/common-units#size) of the margin area on the top of an element. |
126 | | **`marginVertical`** | This property combines setting the values of the `marginTop` and `marginBottom` properties. |
127 | | **`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`. |
128 | | **`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`. |
129 | | **`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`. |
130 | | **`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`. |
131 | | **`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. |
132 | | **`outlineOffset`** | This property sets the space between an outline and the edge or border of a focused element. |
133 | | **`outlineStyle`** | This property sets the style of an element's outline. |
134 | | **`outlineWidth`** | property sets the [width](/styles-and-themes/common-units#size) of an element's outline. |
135 | | **`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. |
136 | | **`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. |
137 | | **`paddingBottom`** | This property sets the [height](/styles-and-themes/common-units#size) of the padding area on the bottom of an element. |
138 | | **`paddingHorizontal`** | This property combines setting the values of the `paddingLeft` and `paddingRight` properties. |
139 | | **`paddingLeft`** | This property sets the [width](/styles-and-themes/common-units#size) of the padding area on the left of an element. |
140 | | **`paddingRight`** | This property sets the [width](/styles-and-themes/common-units#size) of the padding area on the right of an element. |
141 | | **`paddingTop`** | This property sets the [height](/styles-and-themes/common-units#size) of the padding area on the top of an element. |
142 | | **`paddingVertical`** | This property combines setting the values of the `paddingTop` and `paddingBottom` properties. |
143 | | **`textColor`** | This property sets the [color](/styles-and-themes/common-units#color) of the text used for rendering a component. |
144 | | **`textDecoration`** | This is a shorthand property that sets the appearance of decorative lines on text combining the `textDecorationLine`, `textDecorationColor`, `textDecorationStyle`, and `textDecorationThickness` properties. |
145 | | **`textDecorationColor`** | Sets the [color](/styles-and-themes/common-units#color) of decorations added to text by `textDecorationLine`. |
146 | | **`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. |
147 | | **`textDecorationStyle`** | Sets the style of the decoration line that is used on text in an element, such as a line-through, underline, or overline. |
148 | | **`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. |
149 | | **`textTransform`** | This property specifies how to capitalize an element's text. |
150 | | **`textUnderlineOffset`** | The offset [distance](/styles-and-themes/common-units#size) of an underlined text decoration line from its original position. |
151 |
152 | ## App-bound Traits [#app-bound-traits]
153 |
154 | You can use these app-bound theme variables within an app:
155 |
156 | | Theme Variable | Description |
157 | | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
158 | | **`backgroundColor`** | This theme variable sets the background color of the xmlui app. |
159 | | **`backgroundColor‑dropdown‑item‑‑active`** | This property sets the background color of active elements of the items in dropdown components. |
160 | | **`backgroundColor‑dropdown‑item‑‑active‑‑hover`** | This property sets the background color of active, hovered elements of the items in dropdown components. |
161 | | **`backgroundColor‑dropdown‑item‑‑hover`** | This property sets the background color of hovered elements of the items in dropdown components. |
162 | | **`backgroundColor‑overlay`** | This property sets the background color of elements used as an overlay. |
163 | | **`backgroundColor‑attention`** | This theme variable sets the background color of components using the "attention" background color. |
164 | | **`backgroundColor‑‑disabled`** | This theme variable sets the background color of color of disabled compopnents. |
165 | | **`backgroundColor‑primary`** | This theme variable sets the background color of components using the "primary" background color. |
166 | | **`backgroundColor‑secondary`** | This theme variable sets the background color of components using the "secondary" background color. |
167 | | **`backgroundColor‑subtitle`** | This theme variable sets the background color of components using the "subtitle" variant. |
168 | | **`borderColor`** | This property sets the default border color of elements. |
169 | | **`borderColor‑‑disabled`** | This property sets the default border color of disabled elements. |
170 | | **`borderColor‑dropdown‑item`** | This property sets the default background color of items in dropdown components. |
171 | | **`borderRadius`** | You can specify the default rounding for all components that use border rounding. |
172 | | **`boxShadow‑md`** | A medium-size box shadow that gives an elevated look to a component. |
173 | | **`boxShadow‑spread`** | A box shadow that spreads around all edges of a component. |
174 | | **`boxShadow‑spread‑2‑xl`** | A box shadow that spreads around all edges of a component (more extended than `boxShadow‑spread‑2`). |
175 | | **`boxShadow‑spread‑2`** | A box shadow that spreads around all edges of a component (more extended than `boxShadow‑spread`). |
176 | | **`boxShadow‑xl`** | A box shadow that gives an elevated look to a component (bigger than `boxShadow-md`). |
177 | | **`boxShadow‑xxl`** | A box shadow that gives an elevated look to a component (bigger than `boxShadow-xl`). |
178 | | **`color-danger`** | This theme variable sets the base color shade for components using the "danger" color. |
179 | | **`color-info`** | This theme variable sets the base color shade for components using the "info" color. |
180 | | **`color-primary`** | This theme variable sets the base color shade for components using the primary color. |
181 | | **`color-secondary`** | This theme variable sets the base color shade for components using the secondary color. |
182 | | **`color-success`** | This theme variable sets the base color shade for components using the "success" color. |
183 | | **`color-surface`** | This theme variable sets the base color shade for surface areas (component backgrounds). |
184 | | **`color-warn`** | This theme variable sets the base color shade for components using the "warning" color. |
185 | | **`fontFamily‑monospace`** | This theme variable specifies the font family for text elements marked with "monospace". |
186 | | **`fontFamily‑sans‑serif`** | This theme variable specifies the font family for text elements marked with "sans-serif". |
187 | | **`fontSize`** | This theme variable sets the default font size of text elements. |
188 | | **`fontSize‑tiny`** | The smallest font size available in the XMLUI styling system. |
189 | | **`fontSize‑xs`** | A font size between `fontSize-tiny` and `fonstSize‑sm`. |
190 | | **`fontSize‑sm`** | A font size between `fontSize-xs` and `fonstSize-base`. |
191 | | **`fontSize‑base`** | A font size between `fontSize-sm` and `fonstSize-lg`. |
192 | | **`fontSize‑lg`** | A font size between `fontSize-base` and `fonstSize-xl`. |
193 | | **`fontSize‑xl`** | A font size between `fontSize-lg` and `fonstSize-2xl`. |
194 | | **`fontSize‑2xl`** | A font size between `fontSize-xl` and `fonstSize-3xl`. |
195 | | **`fontSize‑3xl`** | A font size between `fontSize-2xl` and `fonstSize-4xl`. |
196 | | **`fontSize‑4xl`** | A font size between `fontSize-3xl` and `fonstSize-5xl`. |
197 | | **`fontSize‑5xl`** | A font size between `fontSize-4xl` and `fonstSize-6xl`. |
198 | | **`fontSize‑6xl`** | A font size between `fontSize-5l` and `fonstSize-7xl`. |
199 | | **`fontSize‑7xl`** | A font size between `fontSize-6l` and `fonstSize-8xl`. |
200 | | **`fontSize‑8xl`** | A font size between `fontSize-7xl` and `fonstSize-9xl`. |
201 | | **`fontSize‑9xl`** | The tallest font size available in the XMLUI styling system. |
202 | | **`fontWeight`** | This theme variable sets the weight of the default font. |
203 | | **`fontWeight‑bold`** | This theme variable sets the font's weight marked as bold (when using any text variant with a weight set to `bold`). |
204 | | **`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`). |
205 | | **`fontWeight‑light`** | This theme variable sets the font's weight marked as light (when using any text variant with a weight set to `light`). |
206 | | **`fontWeight‑normal`** | This theme variable sets the font's weight marked as normal (when using any text variant with a weight set to `normal`). |
207 | | **`fontWeight‑medium`** | This theme variable sets the font's weight marked as medium (when using any text variant with a weight set to `medium`). |
208 | | **`lineHeight‑loose`** | This theme variable sets the line heights of elements using the "loose" (meaning, "bigger than relaxed") trait. |
209 | | **`lineHeight‑none`** | This theme variable sets the line heights of elements using the "none" (meaning, "no line-height specification") trait. |
210 | | **`lineHeight‑normal`** | This theme variable sets the line heights of elements using the "normal" (meaning, "bigger than snug but less than relaxed") trait. |
211 | | **`lineHeight‑relaxed`** | This theme variable sets the line heights of elements using the "relaxed" (meaning, "bigger than normal but less than loose") trait. |
212 | | **`lineHeight‑snug`** | This theme variable sets the line heights of elements using the "snug" (meaning, "bigger than none but less than normal") trait. |
213 | | **`lineHeight‑tight`** | This theme variable sets the line heights of elements using the "tight" (meaning, "bigger than none") trait. |
214 | | **`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`. |
215 | | **`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. |
216 | | **`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`. |
217 | | **`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`. |
218 | | **`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`. |
219 | | **`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`. |
220 | | **`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`. |
221 | | **`outlineColor‑‑focus`** | Set the color of the outline used for focused components. |
222 | | **`outlineOffset‑‑focus`** | Set the width of the outline used for focused components. |
223 | | **`outlineStyle‑‑focus`** | Set the style of the outline used for focused components. |
224 | | **`outlineWidth‑‑focus`** | Set the width of the outline used for focused components. |
225 | | **`textColor‑attention`** | This theme variable sets the color of text elements using the "attention" color. |
226 | | **`textColor‑‑disabled`** | This theme variable sets the color of disabled text elements. |
227 | | **`textColor‑primary`** | This theme variable sets the color of text elements using the "primary" color. |
228 | | **`textColor‑secondary`** | This theme variable sets the color of text elements using the "secondary" color. |
229 | | **`textColor‑subtitle`** | This theme variable sets the color of text elements using the "subtitle" variant. |
230 |
231 | ## Colors in Themes
232 |
233 | 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.
234 |
235 | These theme variables represent the base colors:
236 |
237 | - `color-surface`: The color for the surface (background) areas
238 | - `color-primary`: The primary color of the app (buttons, badges, checkboxes, etc.)
239 | - `color-secondary`: The secondary color of the app (buttons, badges, checkboxes, etc.)
240 | - `color-warn`: The color to use for warnings
241 | - `color-danger`: The color for signing dangerous situations (for example, the color of a Delete button)
242 | - `color-success`: The color for signing success
243 | - `color-info`: The color for signing information
244 |
245 | 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).
246 |
247 | For example, when you set the the `color-primary` variable to `#008000`, XMLUI creates these shades:
248 |
249 | ```xmlui-pg name="Custom primary color shades"
250 | ---app
251 | <App>
252 | <Theme color-primary="#008000">
253 | <Palette name="primary" />
254 | </Theme>
255 | </App>
256 | ---comp
257 | <Component name="Swatch">
258 | <VStack gap="0.25rem">
259 | <Stack
260 | height="50px"
261 | border="1px solid black"
262 | backgroundColor="{$props.color}"
263 | horizontalAlignment="center"
264 | verticalAlignment="center">
265 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
266 | </Stack>
267 | </VStack>
268 | </Component>
269 | ---comp
270 | <Component name="Palette">
271 | <FlowLayout>
272 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
273 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
274 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
275 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
276 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
277 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
278 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
279 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
280 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
281 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
282 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
283 | </FlowLayout>
284 | </Component>
285 | ```
286 |
287 | 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.
288 |
289 | ```xmlui-pg name="Unuseful primary color shades"
290 | ---app
291 | <App>
292 | <Theme color-primary="#001000">
293 | <Palette name="primary" />
294 | </Theme>
295 | </App>
296 | ---comp
297 | <Component name="Swatch">
298 | <VStack gap="0.25rem">
299 | <Stack
300 | height="50px"
301 | border="1px solid black"
302 | backgroundColor="{$props.color}"
303 | horizontalAlignment="center"
304 | verticalAlignment="center">
305 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
306 | </Stack>
307 | </VStack>
308 | </Component>
309 | ---comp
310 | <Component name="Palette">
311 | <FlowLayout>
312 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
313 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
314 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
315 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
316 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
317 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
318 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
319 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
320 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
321 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
322 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
323 | </FlowLayout>
324 | </Component>
325 | ```
326 |
327 | ### Default Color Shade Sets
328 |
329 | XMLUI declares these default color shade sets:
330 |
331 | **Surface**:
332 |
333 | ```xmlui-pg name="Surface Colors"
334 | ---app
335 | <App>
336 | <Palette name="surface" />
337 | </App>
338 | ---comp
339 | <Component name="Swatch">
340 | <VStack gap="0.25rem">
341 | <Stack
342 | height="50px"
343 | border="1px solid black"
344 | backgroundColor="{$props.color}"
345 | horizontalAlignment="center"
346 | verticalAlignment="center">
347 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
348 | </Stack>
349 | </VStack>
350 | </Component>
351 | ---comp
352 | <Component name="Palette">
353 | <FlowLayout>
354 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
355 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
356 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
357 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
358 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
359 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
360 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
361 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
362 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
363 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
364 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
365 | </FlowLayout>
366 | </Component>
367 | ```
368 |
369 | **Primary**:
370 |
371 | ```xmlui-pg name="Primary Colors"
372 | ---app
373 | <App>
374 | <Palette name="primary" />
375 | </App>
376 | ---comp
377 | <Component name="Swatch">
378 | <VStack gap="0.25rem">
379 | <Stack
380 | height="50px"
381 | border="1px solid black"
382 | backgroundColor="{$props.color}"
383 | horizontalAlignment="center"
384 | verticalAlignment="center">
385 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
386 | </Stack>
387 | </VStack>
388 | </Component>
389 | ---comp
390 | <Component name="Palette">
391 | <FlowLayout>
392 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
393 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
394 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
395 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
396 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
397 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
398 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
399 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
400 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
401 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
402 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
403 | </FlowLayout>
404 | </Component>
405 | ```
406 |
407 | **Secondary**:
408 |
409 | ```xmlui-pg name="Secondary Colors"
410 | ---app
411 | <App>
412 | <Palette name="secondary" />
413 | </App>
414 | ---comp
415 | <Component name="Swatch">
416 | <VStack gap="0.25rem">
417 | <Stack
418 | height="50px"
419 | border="1px solid black"
420 | backgroundColor="{$props.color}"
421 | horizontalAlignment="center"
422 | verticalAlignment="center">
423 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
424 | </Stack>
425 | </VStack>
426 | </Component>
427 | ---comp
428 | <Component name="Palette">
429 | <FlowLayout>
430 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
431 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
432 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
433 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
434 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
435 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
436 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
437 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
438 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
439 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
440 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
441 | </FlowLayout>
442 | </Component>
443 | ```
444 |
445 | **Warn**:
446 |
447 | ```xmlui-pg name="Warn Colors"
448 | ---app
449 | <App>
450 | <Palette name="warn" />
451 | </App>
452 | ---comp
453 | <Component name="Swatch">
454 | <VStack gap="0.25rem">
455 | <Stack
456 | height="50px"
457 | border="1px solid black"
458 | backgroundColor="{$props.color}"
459 | horizontalAlignment="center"
460 | verticalAlignment="center">
461 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
462 | </Stack>
463 | </VStack>
464 | </Component>
465 | ---comp
466 | <Component name="Palette">
467 | <FlowLayout>
468 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
469 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
470 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
471 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
472 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
473 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
474 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
475 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
476 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
477 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
478 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
479 | </FlowLayout>
480 | </Component>
481 | ```
482 |
483 | **Danger**:
484 |
485 | ```xmlui-pg name="Danger Colors"
486 | ---app
487 | <App>
488 | <Palette name="danger" />
489 | </App>
490 | ---comp
491 | <Component name="Swatch">
492 | <VStack gap="0.25rem">
493 | <Stack
494 | height="50px"
495 | border="1px solid black"
496 | backgroundColor="{$props.color}"
497 | horizontalAlignment="center"
498 | verticalAlignment="center">
499 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
500 | </Stack>
501 | </VStack>
502 | </Component>
503 | ---comp
504 | <Component name="Palette">
505 | <FlowLayout>
506 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
507 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
508 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
509 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
510 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
511 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
512 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
513 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
514 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
515 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
516 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
517 | </FlowLayout>
518 | </Component>
519 | ```
520 |
521 | **Success**:
522 |
523 | ```xmlui-pg name="Success Colors"
524 | ---app
525 | <App>
526 | <Palette name="success" />
527 | </App>
528 | ---comp
529 | <Component name="Swatch">
530 | <VStack gap="0.25rem">
531 | <Stack
532 | height="50px"
533 | border="1px solid black"
534 | backgroundColor="{$props.color}"
535 | horizontalAlignment="center"
536 | verticalAlignment="center">
537 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
538 | </Stack>
539 | </VStack>
540 | </Component>
541 | ---comp
542 | <Component name="Palette">
543 | <FlowLayout>
544 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
545 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
546 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
547 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
548 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
549 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
550 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
551 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
552 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
553 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
554 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
555 | </FlowLayout>
556 | </Component>
557 | ```
558 |
559 | **Info**:
560 |
561 | ```xmlui-pg name="Info Colors"
562 | ---app
563 | <App>
564 | <Palette name="info" />
565 | </App>
566 | ---comp
567 | <Component name="Swatch">
568 | <VStack gap="0.25rem">
569 | <Stack
570 | height="50px"
571 | border="1px solid black"
572 | backgroundColor="{$props.color}"
573 | horizontalAlignment="center"
574 | verticalAlignment="center">
575 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
576 | </Stack>
577 | </VStack>
578 | </Component>
579 | ---comp
580 | <Component name="Palette">
581 | <FlowLayout>
582 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-50" textColor="$color-surface-950" />
583 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-100" textColor="$color-surface-950" />
584 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-200" textColor="$color-surface-950" />
585 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-300" textColor="$color-surface-950" />
586 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-400" textColor="$color-surface-950" />
587 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-500" textColor="$color-surface-50" />
588 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-600" textColor="$color-surface-50" />
589 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-700" textColor="$color-surface-50" />
590 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-800" textColor="$color-surface-50" />
591 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-900" textColor="$color-surface-50" />
592 | <Swatch width="25%" color="$color-{$props.name || 'surface'}-950" textColor="$color-surface-50" />
593 | </FlowLayout>
594 | </Component>
595 | ```
596 |
597 | ### Default Text Colors
598 |
599 | - `textColor-primary`: The text color used by components that build on the primary color
600 | - `textColor-secondary`: The text color used by components that build on the secondary color
601 | - `textColor-attention`: Accented text color
602 | - `textColor-subtitle`: Text color of text with the "subtitle" variant
603 | - `textColor--disabled`: Text color representing the disabled state of a component
604 |
605 | ```xmlui-pg name="Default Text Colors"
606 | <App>
607 | <HStack>
608 | <Text width="180px" variant="strong">textColor-primary:</Text>
609 | <Text color="$textColor-primary">This is an example text</Text>
610 | </HStack>
611 |
612 | <HStack>
613 | <Text width="180px" variant="strong">textColor-secondary:</Text>
614 | <Text color="$textColor-secondary">This is an example text</Text>
615 | </HStack>
616 |
617 | <HStack>
618 | <Text width="180px" variant="strong">textColor-attention:</Text>
619 | <Text color="$textColor-attention">This is an example text</Text>
620 | </HStack>
621 |
622 | <HStack>
623 | <Text width="180px" variant="strong">textColor-subtitle:</Text>
624 | <Text color="$textColor-subtitle">This is an example text</Text>
625 | </HStack>
626 |
627 | <HStack>
628 | <Text width="180px" variant="strong">textColor--disabled:</Text>
629 | <Text color="$textColor--disabled">This is an example text</Text>
630 | </HStack>
631 | </App>
632 | ```
633 |
634 | ### Default Background Colors
635 |
636 | - `backgroundColor`: The default background color for all components
637 | - `backgroundColor-primary`: The background color used by components that build on the primary color
638 | - `backgroundColor-secondary`: The background color used by components that build on the secondary color
639 | - `backgroundColor-attention`: The background color used by components that build on the attention color
640 | - `backgroundColor--disabled`: The background color representing the disabled state of a component
641 | - `backgroundColor--selected`: The background color representing the selected state of a component
642 | - `backgroundColor-overlay`: The background color of overlaid components
643 | - `backgroundColor-dropdown-item--hover`: The background color of hovered items in dropdown containers
644 | - `backgroundColor-dropdown-item--active`: The background color of active items in dropdown containers
645 |
646 | ```xmlui-pg name="Default Background Colors"
647 | ---app
648 | <App>
649 | <FlowLayout>
650 | <Swatch color="$backgroundColor" width="50%" />
651 | <Swatch color="$backgroundColor-primary" width="50%" />
652 | <Swatch color="$backgroundColor-secondary" width="50%" />
653 | <Swatch color="$backgroundColor-attention" width="50%" />
654 | <Swatch color="$backgroundColor--disabled" width="50%" />
655 | <Swatch color="$backgroundColor--selected" width="50%" />
656 | <Swatch color="$backgroundColor-overlay" width="50%" />
657 | <Swatch color="$backgroundColor-dropdown-item--hover" width="50%" />
658 | <Swatch color="$backgroundColor-dropdown-item--active" width="50%" />
659 | </FlowLayout>
660 | </App>
661 | ---comp
662 | <Component name="Swatch">
663 | <VStack gap="0.25rem">
664 | <Stack
665 | height="50px"
666 | border="1px solid black"
667 | backgroundColor="{$props.color}"
668 | horizontalAlignment="center"
669 | verticalAlignment="center">
670 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
671 | </Stack>
672 | </VStack>
673 | </Component>
674 | ```
675 |
676 | ### Validation Colors
677 |
678 | These colors represent validation states:
679 |
680 | - `color-info`: Color of components with informational messages
681 | - `color-valid`: Color signing valid state
682 | - `color-warning`: Color of warning
683 | - `color-error`: Color signing some error
684 |
685 | ```xmlui-pg name="Validation Colors"
686 | ---app
687 | <App>
688 | <FlowLayout>
689 | <Swatch color="$color-info" width="25%" textColor="$color-surface-50" />
690 | <Swatch color="$color-valid" width="25%" textColor="$color-surface-50" />
691 | <Swatch color="$color-warning" width="25%" textColor="$color-surface-50" />
692 | <Swatch color="$color-error" width="25%" textColor="$color-surface-50" />
693 | </FlowLayout>
694 | </App>
695 | ---comp
696 | <Component name="Swatch">
697 | <VStack gap="0.25rem">
698 | <Stack
699 | height="50px"
700 | border="1px solid black"
701 | backgroundColor="{$props.color}"
702 | horizontalAlignment="center"
703 | verticalAlignment="center">
704 | <Text value="{$props.color.substring(1) || 'color token'}" color="{$props.textColor}" />
705 | </Stack>
706 | </VStack>
707 | </Component>
708 | ```
709 |
710 | ## Fonts
711 |
712 | You can influence the default font settings of a particular theme with the following theme variables:
713 |
714 | ### Font Family
715 |
716 | These theme variables set the default font styles:
717 |
718 | - `fontFamily`: The default font family used in the app
719 | - `fontFamily-sans-serif`: The default sans-serif font family used in the app
720 | - `fontFamily-monospace`: The default monospace font family used in the app
721 |
722 | ```xmlui-pg name="Font Family"
723 | <App>
724 | <HStack>
725 | <Text width="200px" variant="strong">Default font family:</Text>
726 | <Text fontFamily="$fontFamily-sans-serif">This is an example text</Text>
727 | </HStack>
728 |
729 | <HStack>
730 | <Text width="200px" variant="strong">Sans serif font family:</Text>
731 | <Text fontFamily="$fontFamily-sans-serif">This is an example text</Text>
732 | </HStack>
733 |
734 | <HStack>
735 | <Text width="200px" variant="strong">Monospace font family:</Text>
736 | <Text fontFamily="$fontFamily-monospace">This is an example text</Text>
737 | </HStack>
738 | </App>
739 | ```
740 |
741 | ### Line Height
742 |
743 | These theme variables define a set of line heights relative to the font size:
744 |
745 | ```xmlui-pg name="Line Height"
746 | <App>
747 | <HStack verticalAlignment="center">
748 | <Text width="180px" variant="strong">lineHeight-none:</Text>
749 | <Text
750 | lineHeight="$lineHeight-none"
751 | backgroundColor="$color-surface-300"
752 | paddingHorizontal="$space-2"
753 | >
754 | This is an example text
755 | </Text>
756 | </HStack>
757 |
758 | <HStack verticalAlignment="center">
759 | <Text width="180px" variant="strong">lineHeight-tight:</Text>
760 | <Text
761 | lineHeight="$lineHeight-tight"
762 | backgroundColor="$color-surface-300"
763 | paddingHorizontal="$space-2"
764 | >
765 | This is an example text
766 | </Text>
767 | </HStack>
768 |
769 | <HStack verticalAlignment="center">
770 | <Text width="180px" variant="strong">lineHeight-snug:</Text>
771 | <Text
772 | lineHeight="$lineHeight-snug"
773 | backgroundColor="$color-surface-300"
774 | paddingHorizontal="$space-2"
775 | >
776 | This is an example text
777 | </Text>
778 | </HStack>
779 |
780 | <HStack verticalAlignment="center">
781 | <Text width="180px" variant="strong">lineHeight-normal:</Text>
782 | <Text
783 | lineHeight="$lineHeight-normal"
784 | backgroundColor="$color-surface-300"
785 | paddingHorizontal="$space-2"
786 | >
787 | This is an example text
788 | </Text>
789 | </HStack>
790 |
791 | <HStack verticalAlignment="center">
792 | <Text width="180px" variant="strong">lineHeight-relaxed:</Text>
793 | <Text
794 | lineHeight="$lineHeight-relaxed"
795 | backgroundColor="$color-surface-300"
796 | paddingHorizontal="$space-2"
797 | >
798 | This is an example text
799 | </Text>
800 | </HStack>
801 |
802 | <HStack verticalAlignment="center">
803 | <Text width="180px" variant="strong">lineHeight-loose:</Text>
804 | <Text
805 | lineHeight="$lineHeight-loose"
806 | backgroundColor="$color-surface-300"
807 | paddingHorizontal="$space-2"
808 | >
809 | This is an example text
810 | </Text>
811 | </HStack>
812 | </App>
813 | ```
814 |
815 | ### Font Size
816 |
817 | 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`:
818 |
819 | ```xmlui-pg name="Font Size" height="400px"
820 | <App>
821 | <HStack verticalAlignment="center">
822 | <Text width="160px" variant="strong">fontSize-tiny:</Text>
823 | <Text fontSize="$fontSize-tiny">Example</Text>
824 | </HStack>
825 |
826 | <HStack verticalAlignment="center">
827 | <Text width="160px" variant="strong">fontSize-xs:</Text>
828 | <Text fontSize="$fontSize-xs">Example</Text>
829 | </HStack>
830 |
831 | <HStack verticalAlignment="center">
832 | <Text width="160px" variant="strong">fontSize-sm:</Text>
833 | <Text fontSize="$fontSize-sm">Example</Text>
834 | </HStack>
835 |
836 | <HStack verticalAlignment="center">
837 | <Text width="160px" variant="strong">fontSize-base:</Text>
838 | <Text fontSize="$fontSize-base">Example</Text>
839 | </HStack>
840 |
841 | <HStack verticalAlignment="center">
842 | <Text width="160px" variant="strong">fontSize-xl:</Text>
843 | <Text fontSize="$fontSize-xl">Example</Text>
844 | </HStack>
845 |
846 | <HStack verticalAlignment="center">
847 | <Text width="160px" variant="strong">fontSize-2xl:</Text>
848 | <Text fontSize="$fontSize-2xl">Example</Text>
849 | </HStack>
850 |
851 | <HStack verticalAlignment="center">
852 | <Text width="160px" variant="strong">fontSize-3xl:</Text>
853 | <Text fontSize="$fontSize-3xl">Example</Text>
854 | </HStack>
855 |
856 | <HStack verticalAlignment="center">
857 | <Text width="160px" variant="strong">fontSize-4xl:</Text>
858 | <Text fontSize="$fontSize-4xl">Example</Text>
859 | </HStack>
860 |
861 | <HStack verticalAlignment="center">
862 | <Text width="160px" variant="strong">fontSize-5xl:</Text>
863 | <Text fontSize="$fontSize-5xl">Example</Text>
864 | </HStack>
865 |
866 | <HStack verticalAlignment="center">
867 | <Text width="160px" variant="strong">fontSize-6xl:</Text>
868 | <Text fontSize="$fontSize-6xl">Example</Text>
869 | </HStack>
870 |
871 | <HStack verticalAlignment="center">
872 | <Text width="160px" variant="strong">fontSize-7xl:</Text>
873 | <Text fontSize="$fontSize-7xl">Example</Text>
874 | </HStack>
875 |
876 | <HStack verticalAlignment="center">
877 | <Text width="160px" variant="strong">fontSize-8xl:</Text>
878 | <Text fontSize="$fontSize-8xl">Example</Text>
879 | </HStack>
880 |
881 | <HStack verticalAlignment="center">
882 | <Text width="160px" variant="strong">fontSize-9xl:</Text>
883 | <Text fontSize="$fontSize-9xl">Example</Text>
884 | </HStack>
885 | </App>
886 | ```
887 |
888 | ### Font Weight
889 |
890 | 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`:
891 |
892 | ```xmlui-pg name="Font Weight"
893 | <App>
894 | <HStack>
895 | <Text width="200px" variant="strong">fontWeight-light:</Text>
896 | <Text fontWeight="$fontWeight-light">This is an example text</Text>
897 | </HStack>
898 |
899 | <HStack>
900 | <Text width="200px" variant="strong">fontWeight-normal:</Text>
901 | <Text fontWeight="$fontWeight-normal">This is an example text</Text>
902 | </HStack>
903 |
904 | <HStack>
905 | <Text width="200px" variant="strong">fontWeight-medium:</Text>
906 | <Text fontWeight="$fontWeight-medium">This is an example text</Text>
907 | </HStack>
908 |
909 | <HStack>
910 | <Text width="200px" variant="strong">fontWeight-bold:</Text>
911 | <Text fontWeight="$fontWeight-bold">This is an example text</Text>
912 | </HStack>
913 |
914 | <HStack>
915 | <Text width="200px" variant="strong">fontWeight-extra-bold:</Text>
916 | <Text fontWeight="$fontWeight-extra-bold">This is an example text</Text>
917 | </HStack>
918 | </App>
919 | ```
920 |
921 | ## Shadows
922 |
923 | XMLUI defines a few stock shadow resources:
924 |
925 | ```xmlui-pg name="Shadows" height="320px"
926 | <App>
927 | <HStack padding="1.5rem" gap="1.5rem">
928 | <Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow" >
929 | boxShadow
930 | </Stack>
931 | <Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-md">
932 | boxShadow-md
933 | </Stack>
934 | <Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-xxl">
935 | boxShadow-xxl
936 | </Stack>
937 | </HStack>
938 | <HStack padding="1.5rem" gap="1.5rem">
939 | <Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-spread">
940 | boxShadow-spread
941 | </Stack>
942 | <Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-spread-2">
943 | boxShadow-spread-2
944 | </Stack>
945 | <Stack minWidth="36px" minHeight="36px" padding="8px" width="30%" boxShadow="$boxShadow-spread-2-xl">
946 | boxShadow-spread-2-xl
947 | </Stack>
948 | </HStack>
949 | </App>
950 | ```
951 |
952 | ## Spacing
953 |
954 | 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:
955 |
956 | ```xmlui-pg name="Spacing"
957 | <App gap="$gap-tight">
958 | <Text value="The base value is: 0.25rem" variant="strong" />
959 |
960 | <HStack>
961 | <Text value="space-0" width="$space-20" />
962 | <Stack width="$space-0" backgroundColor="$color-info" />
963 | </HStack>
964 |
965 | <HStack>
966 | <Text value="space-0_5" width="$space-20" />
967 | <Stack width="$space-0_5" backgroundColor="$color-info" />
968 | </HStack>
969 |
970 | <HStack>
971 | <Text value="space-1" width="$space-20" />
972 | <Stack width="$space-1" backgroundColor="$color-info" />
973 | </HStack>
974 |
975 | <HStack>
976 | <Text value="space-1_5" width="$space-20" />
977 | <Stack width="$space-1_5" backgroundColor="$color-info" />
978 | </HStack>
979 |
980 | <HStack>
981 | <Text value="space-2" width="$space-20" />
982 | <Stack width="$space-2" backgroundColor="$color-info" />
983 | </HStack>
984 |
985 | <HStack>
986 | <Text value="space-2_5" width="$space-20" />
987 | <Stack width="$space-2_5" backgroundColor="$color-info" />
988 | </HStack>
989 |
990 | <HStack>
991 | <Text value="space-3" width="$space-20" />
992 | <Stack width="$space-3" backgroundColor="$color-info" />
993 | </HStack>
994 |
995 | <HStack>
996 | <Text value="space-3_5" width="$space-20" />
997 | <Stack width="$space-3_5" backgroundColor="$color-info" />
998 | </HStack>
999 |
1000 | <HStack>
1001 | <Text value="space-4" width="$space-20" />
1002 | <Stack width="$space-4" backgroundColor="$color-info" />
1003 | </HStack>
1004 |
1005 | <HStack>
1006 | <Text value="space-5" width="$space-20" />
1007 | <Stack width="$space-5" backgroundColor="$color-info" />
1008 | </HStack>
1009 |
1010 | <HStack>
1011 | <Text value="space-6" width="$space-20" />
1012 | <Stack width="$space-6" backgroundColor="$color-info" />
1013 | </HStack>
1014 |
1015 | <HStack>
1016 | <Text value="space-7" width="$space-20" />
1017 | <Stack width="$space-7" backgroundColor="$color-info" />
1018 | </HStack>
1019 |
1020 | <HStack>
1021 | <Text value="space-8" width="$space-20" />
1022 | <Stack width="$space-8" backgroundColor="$color-info" />
1023 | </HStack>
1024 |
1025 | <HStack>
1026 | <Text value="space-9" width="$space-20" />
1027 | <Stack width="$space-9" backgroundColor="$color-info" />
1028 | </HStack>
1029 |
1030 | <HStack>
1031 | <Text value="space-10" width="$space-20" />
1032 | <Stack width="$space-10" backgroundColor="$color-info" />
1033 | </HStack>
1034 |
1035 | <HStack>
1036 | <Text value="space-11" width="$space-20" />
1037 | <Stack width="$space-11" backgroundColor="$color-info" />
1038 | </HStack>
1039 |
1040 | <HStack>
1041 | <Text value="space-12" width="$space-20" />
1042 | <Stack width="$space-12" backgroundColor="$color-info" />
1043 | </HStack>
1044 |
1045 | <HStack>
1046 | <Text value="space-14" width="$space-20" />
1047 | <Stack width="$space-14" backgroundColor="$color-info" />
1048 | </HStack>
1049 |
1050 | <HStack>
1051 | <Text value="space-16" width="$space-20" />
1052 | <Stack width="$space-16" backgroundColor="$color-info" />
1053 | </HStack>
1054 |
1055 | <HStack>
1056 | <Text value="space-20" width="$space-20" />
1057 | <Stack width="$space-20" backgroundColor="$color-info" />
1058 | </HStack>
1059 |
1060 | <HStack>
1061 | <Text value="space-24" width="$space-20" />
1062 | <Stack width="$space-24" backgroundColor="$color-info" />
1063 | </HStack>
1064 |
1065 | <HStack>
1066 | <Text value="space-28" width="$space-20" />
1067 | <Stack width="$space-28" backgroundColor="$color-info" />
1068 | </HStack>
1069 |
1070 | <HStack>
1071 | <Text value="space-32" width="$space-20" />
1072 | <Stack width="$space-32" backgroundColor="$color-info" />
1073 | </HStack>
1074 |
1075 | <HStack>
1076 | <Text value="space-36" width="$space-20" />
1077 | <Stack width="$space-36" backgroundColor="$color-info" />
1078 | </HStack>
1079 |
1080 | <HStack>
1081 | <Text value="space-40" width="$space-20" />
1082 | <Stack width="$space-40" backgroundColor="$color-info" />
1083 | </HStack>
1084 |
1085 | <HStack>
1086 | <Text value="space-44" width="$space-20" />
1087 | <Stack width="$space-44" backgroundColor="$color-info" />
1088 | </HStack>
1089 |
1090 | <HStack>
1091 | <Text value="space-48" width="$space-20" />
1092 | <Stack width="$space-48" backgroundColor="$color-info" />
1093 | </HStack>
1094 |
1095 | <HStack>
1096 | <Text value="space-52" width="$space-20" />
1097 | <Stack width="$space-52" backgroundColor="$color-info" />
1098 | </HStack>
1099 |
1100 | <HStack>
1101 | <Text value="space-56" width="$space-20" />
1102 | <Stack width="$space-56" backgroundColor="$color-info" />
1103 | </HStack>
1104 |
1105 | <HStack>
1106 | <Text value="space-60" width="$space-20" />
1107 | <Stack width="$space-60" backgroundColor="$color-info" />
1108 | </HStack>
1109 |
1110 | <HStack>
1111 | <Text value="space-64" width="$space-20" />
1112 | <Stack width="$space-64" backgroundColor="$color-info" />
1113 | </HStack>
1114 |
1115 | <HStack>
1116 | <Text value="space-72" width="$space-20" />
1117 | <Stack width="$space-72" backgroundColor="$color-info" />
1118 | </HStack>
1119 |
1120 | <HStack>
1121 | <Text value="space-80" width="$space-20" />
1122 | <Stack width="$space-80" backgroundColor="$color-info" />
1123 | </HStack>
1124 |
1125 | <HStack>
1126 | <Text value="space-96" width="$space-20" />
1127 | <Stack width="$space-96" backgroundColor="$color-info" />
1128 | </HStack>
1129 | </App>
1130 | ```
1131 |
1132 | ## Spacing in Layout Containers [#spacing-in-layout-containers]
1133 |
1134 | 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.
1135 |
1136 | **Gaps**:
1137 |
1138 | - `gap-none`: No gap
1139 | - `gap-tight`: Less gap than the normal (layout container defaults)
1140 | - `gap-normal`: Default layout container gap
1141 | - `gap-loose`: More gap than the normal
1142 |
1143 | **Padding**:
1144 |
1145 | - `padding-none`: No padding
1146 | - `padding-tight`: Less padding than the normal (layout container defaults)
1147 | - `padding-normal`: Default layout container padding
1148 | - `padding-loose`: More padding than the normal
1149 |
1150 | **General spacing** (padding, gaps, other spacing):
1151 |
1152 | - `padding-none`: No spacing
1153 | - `padding-tight`: Less spacing than the normal
1154 | - `padding-normal`: Default spacing
1155 | - `padding-loose`: More spacing than the normal
1156 |
```