This is page 166 of 181. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── stale-days-care.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── 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
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── containers.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── state-management.md
│ └── xmlui-repo.md
├── 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/common-units.md:
--------------------------------------------------------------------------------
```markdown
1 | # Common Visual Property Units
2 |
3 | This article describes common values that you can use in layout properties.
4 |
5 | ## Boolean Values [#boolean]
6 |
7 | You can represent the `true` and `false` values with multiple keywords:
8 |
9 | | Value | Description |
10 | | ----- | ---------------------------------------------------------------------------------- |
11 | | true | Use a particular style feature. Accepted keywords: `true`, `yes`, or `on`. |
12 | | false | Do not use a particular style feature. Accepted keywords: `false`, `no`, or `off`. |
13 |
14 | ## Border Values [#border]
15 |
16 | When you specify the border of a component, you can use these three border properties:
17 |
18 | - **Border width**. The stroke [width](#size) to draw the border.
19 | - **Border style**. The border [style pattern](#border-style) to apply.
20 | - **Border color**. The [color](#color) of the border.
21 | You must specify at least one of these properties to display a border. You can specify the border properties in any order; however, you can specify a property only once. All of these border specifications are correct:
22 |
23 | ```text
24 | 1px solid blue
25 | 3px
26 | dashed 4px #f0cccc
27 | #f0cccc 4 dashed
28 | #f0f dotted
29 | ```
30 |
31 | ## Border Rounding [#border-rounding]
32 |
33 | You can define border rounding values to round the corners of a component's outer border edge. You can set a single radius to make circular corners or two radii to make elliptical ones. Radius values use the size value syntax and semantics.
34 |
35 | When you specify multiple radii, the first value determines the horizontal rounding, and the second the vertical rounding.
36 |
37 | ```xmlui-pg name="Border rounding"
38 | <App>
39 | <FlowLayout gap="8" padding="8">
40 | <CVStack width="25%" height="64px" border="solid 4px $color-surface-800" borderRadius="20px"><Text value="20px" /></CVStack>
41 | <CVStack width="25%" height="64px" border="solid 4px $color-surface-800" borderRadius="20px 40px"><Text value="20px 40px" /></CVStack>
42 | <CVStack width="25%" height="64px" border="solid 4px $color-surface-800" borderRadius="25% 20px"><Text value="25% 20px" /></CVStack>
43 | <CVStack width="25%" height="64px" border="solid 4px $color-surface-800" borderRadius="50%"><Text value="50%" /></CVStack>
44 | </FlowLayout>
45 | </App>
46 | ```
47 |
48 | ## Border Style Values [#border-style]
49 |
50 | The engine supports these border style values:
51 |
52 | | Value | Description |
53 | | -------- | ----------------------------------------------------------------------------------------- |
54 | | `dashed` | Displays a series of short square-ended dashes or line segments. |
55 | | `dotted` | Displays a series of rounded dots. |
56 | | `double` | Displays two straight lines that add up to the pixel size defined by the border width. |
57 | | `groove` | Displays a border with a carved appearance. It is the opposite of `ridge`. |
58 | | `inset` | Displays a border that makes the element appear embedded. It is the opposite of `outset`. |
59 | | `ouset` | Displays a border that makes the element appear embossed. It is the opposite of `inset`. |
60 | | `ridge` | Displays a border with an extruded appearance. It is the opposite of `groove`. |
61 | | `solid` | Displays a single, straight, solid line. |
62 |
63 | ```xmlui-pg name="Border styles"
64 | <App>
65 | <FlowLayout>
66 | <CVStack width="25%" height="64px" border="dashed 8px $color-surface-800"><Text value="dashed" /></CVStack>
67 | <CVStack width="25%" height="64px" border="dotted 8px $color-surface-800"><Text value="dotted" /></CVStack>
68 | <CVStack width="25%" height="64px" border="double 8px $color-surface-800"><Text value="double" /></CVStack>
69 | <CVStack width="25%" height="64px" border="groove 8px $color-surface-800"><Text value="groove" /></CVStack>
70 | <CVStack width="25%" height="64px" border="inset 8px $color-surface-800"><Text value="inset" /></CVStack>
71 | <CVStack width="25%" height="64px" border="outset 8px $color-surface-800"><Text value="outset" /></CVStack>
72 | <CVStack width="25%" height="64px" border="ridge 8px $color-surface-800"><Text value="ridge" /></CVStack>
73 | <CVStack width="25%" height="64px" border="solid 8px $color-surface-800"><Text value="solid" /></CVStack>
74 | </FlowLayout>
75 | </App>
76 | ```
77 |
78 | ## Color Values [#color]
79 |
80 | The engine accepts several color value types:
81 |
82 | - **Hexadecimal RGB/RGBA color definitions**. You can specify color values with RGB or ARGB codes using a `#` prefix and 3, 4, 6, or 8 hexadecimal digits.
83 | - **The `rgb` function**. Use the `rgb` function with three arguments representing the red, green, and blue components. Each component can be specified as a value between 0 and 255 or as a percentage value between 0% and 100%. You must use the same value type for all colors (numeric value or percentage); they cannot be mixed.
84 | - **The `rgba` function**. Use the `rgba` function with four arguments. The first three arguments represent the color channels (see the `rgb` function). The alpha channel can have a percentage value (0% - 100%) or a float number between 0 and 1.
85 | - **The `hsl` function**. Describe a color with the `hsl` function with three arguments representing the Hue angle (units are `deg`, `rad`, `grad`, or `turn`), the Saturation percentage (0% - 100%), and the Lightness percentage(0% - 100%).
86 | - **The `hsla` function**. Describe a color with the `hsla` function with three arguments representing the H, S, and L values (see `hsl`) and the alpha channel (a percentage value (0% - 100%) or a float number between 0 and 1).
87 | - **Named colors**. You can use standard CSS color names (all lowercase letters). See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color) for more details.
88 |
89 | ```xmlui-pg name="Color values"
90 | <App>
91 | <FlowLayout>
92 | <H3>Hexadecimal values</H3>
93 | <HStack>
94 | <CVStack width="32%" height="36px" backgroundColor="#f0f"><Text value="#f0f (same as #ff00ff)" /></CVStack>
95 | <CVStack width="32%" height="36px" backgroundColor="#aaa"><Text value="#aba (same as #aabbaa)" /></CVStack>
96 | <CVStack width="32%" height="36px" backgroundColor="#f0f8"><Text value="#8f0f (same as #ff00ff88)" /></CVStack>
97 | </HStack>
98 | <HStack>
99 | <CVStack width="32%" height="36px" backgroundColor="#49aec0"><Text value="#49aec0" /></CVStack>
100 | <CVStack width="32%" height="36px" backgroundColor="#fe5a27"><Text value="#fe5a27" /></CVStack>
101 | <CVStack width="32%" height="36px" backgroundColor="#49aec0a0"><Text value="#49aec0a0" /></CVStack>
102 | </HStack>
103 | <H3>"'rgb' function"</H3>
104 | <HStack>
105 | <CVStack width="32%" height="36px" backgroundColor="rgb(106, 90, 205)"><Text value="rgb(106, 90, 205)" /></CVStack>
106 | <CVStack width="32%" height="36px" backgroundColor="rgb(80%, 40%, 20%)"><Text value="rgb(80%, 40%, 20%)" /></CVStack>
107 | <CVStack width="32%" height="36px" backgroundColor="rgb(128, 40%, 128)"><Text value="rgb(128, 40%, 128), invalid" /></CVStack>
108 | </HStack>
109 | <H3>"'rgba' function"</H3>
110 | <HStack>
111 | <CVStack width="32%" height="36px" backgroundColor="rgba(106, 90, 205, .5)"><Text value="rgba(106, 90, 205, .5)" /></CVStack>
112 | <CVStack width="32%" height="36px" backgroundColor="rgba(80%, 40%, 20%, 80%)"><Text value="rgba(80%, 40%, 20%, 80%)" /></CVStack>
113 | <CVStack width="32%" height="36px" backgroundColor="rgba(70, 130, 180, 1)"><Text value="rgba(70, 130, 180, 1)" /></CVStack>
114 | </HStack>
115 | <H3>"'hsl' function"</H3>
116 | <HStack>
117 | <CVStack width="32%" height="36px" backgroundColor="hsl(189, 49%, 52%)"><Text value="hsl(189, 49%, 52%)" /></CVStack>
118 | <CVStack width="32%" height="36px" backgroundColor="hsl(14, 99%, 57%)"><Text value="hsl(14, 99%, 57%)" /></CVStack>
119 | <CVStack width="32%" height="36px" backgroundColor="hsl(28, 100%, 86%)"><Text value="hsl(28, 100%, 86%)" /></CVStack>
120 | </HStack>
121 | <H3>"'hsla' function"</H3>
122 | <HStack>
123 | <CVStack width="32%" height="36px" backgroundColor="hsla(189, 49%, 52%, 20%)"><Text value="hsla(189, 49%, 52%, 20%)" /></CVStack>
124 | <CVStack width="32%" height="36px" backgroundColor="hsla(14, 99%, 57%, 0.8)"><Text value="hsla(14, 99%, 57%, 0.8)" /></CVStack>
125 | <CVStack width="32%" height="36px" backgroundColor="hsla(28, 100%, 86%, 0.25)"><Text value="hsla(28, 100%, 86%, 0.25)" /></CVStack>
126 | </HStack>
127 | <H3>"Named colors"</H3>
128 | <HStack>
129 | <CVStack width="32%" height="36px" backgroundColor="palegoldenrod"><Text value="palegoldenrod" /></CVStack>
130 | <CVStack width="32%" height="36px" backgroundColor="seagreen"><Text value="seagreen" /></CVStack>
131 | <CVStack width="32%" height="36px" backgroundColor="orangered"><Text value="orangered" /></CVStack>
132 | </HStack>
133 | </FlowLayout>
134 | </App>
135 | ```
136 |
137 | ## Cursor Values [#cursor]
138 |
139 | This type of value sets the mouse cursor, if any, to show when the mouse pointer is over a particular component.
140 |
141 | ### General
142 |
143 | | Value | Description |
144 | | --------- | ----------------------------------------------------------------------------- |
145 | | `auto` | The engine will determine the cursor to display based on the current context. |
146 | | `default` | The platform-dependent default cursor. Typically, an arrow. |
147 | | `none` | No cursor is rendered. |
148 |
149 | ### Links and Status
150 |
151 | | Value | Description |
152 | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
153 | | `context‑menu` | A context menu is available. |
154 | | `help` | Help information is available. |
155 | | `pointer` | The cursor is a pointer that indicates a link. Typically, it is an image of a pointing hand. |
156 | | `progress` | The program is busy in the background, but the user can still interact with the interface (in contrast to `wait`). |
157 | | `wait` | The program is busy, and the user can't interact with the interface (in contrast to `progress`). Sometimes an image of an hourglass or a watch. |
158 |
159 | ### Selection
160 |
161 | | Value | Description |
162 | | --------------- | ----------------------------------------------------------------------------- |
163 | | `cell` | The table cell or set of cells can be selected. |
164 | | `crosshair` | Cross cursor, often used to indicate selection in a bitmap. |
165 | | `text` | The text can be selected. Typically, the shape of an I-beam. |
166 | | `vertical‑text` | The vertical text can be selected. Typically, the shape of a sideways I-beam. |
167 |
168 | ### Drag and Drop
169 |
170 | | Value | Description |
171 | | ------------- | ------------------------------------------------------------------------------------------------------------- |
172 | | `alias` | An alias or shortcut is to be created. |
173 | | `copy` | Something is to be copied. |
174 | | `move` | Something is to be moved. |
175 | | `no‑drop` | An item may not be dropped at the current location. On Windows and macOS, no-drop is the same as not-allowed. |
176 | | `not‑allowed` | The requested action will not be carried out. |
177 | | `grab` | Something can be grabbed (dragged to be moved). |
178 | | `grabbing` | Something is being grabbed (dragged to be moved). |
179 |
180 | ### Resizing and Scrolling
181 |
182 | | Value | Description |
183 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
184 | | `all‑scroll` | Something can be scrolled in any direction (panned). [Firefox bug 275174](https://bugzil.la/275174): On Windows, all-scroll is the same as move. |
185 | | `col‑resize` | The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them. |
186 | | `row‑resize` | The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them. |
187 | | `n‑resize`, `e‑resize`, `s‑resize`, `w‑resize`, `ne‑resize`, `nw‑resize`, `se‑resize`, `sw‑resize`, `ew‑resize`, `ns‑resize`, `nesw‑resize`, `nwse‑resize` | Some edge is to be moved. For example, the `se‑resize` cursor is used when the movement starts from the south-east corner of the box. In some environments, an equivalent bidirectional resize cursor is shown. For example, `n‑resize` and `s‑resize` are the same as `ns‑resize`. |
188 |
189 | ### Zooming
190 |
191 | | Value | Description |
192 | | --------------------- | ---------------------------------------------- |
193 | | `zoom‑in`, `zoom‑out` | Something can be zoomed (magnified) in or out. |
194 |
195 | ### Cursor Examples
196 |
197 | Move the mouse over the rectangles in the following example to check what the cursor looks like.
198 |
199 | ```xmlui-pg name="Cursor values"
200 | <App>
201 | <FlowLayout>
202 | <CVStack width="20%" height="36px" cursor="auto" border="solid 1px $color-surface-800">auto</CVStack>
203 | <CVStack width="20%" height="36px" cursor="default" border="solid 1px $color-surface-800">default</CVStack>
204 | <CVStack width="20%" height="36px" cursor="none" border="solid 1px $color-surface-800">none</CVStack>
205 | </FlowLayout>
206 | <FlowLayout>
207 | <CVStack width="20%" height="36px" cursor="context-menu" border="solid 1px $color-surface-800">context-menu</CVStack>
208 | <CVStack width="20%" height="36px" cursor="help" border="solid 1px $color-surface-800">help</CVStack>
209 | <CVStack width="20%" height="36px" cursor="pointer" border="solid 1px $color-surface-800">pointer</CVStack>
210 | <CVStack width="20%" height="36px" cursor="progress" border="solid 1px $color-surface-800">progress</CVStack>
211 | <CVStack width="20%" height="36px" cursor="wait" border="solid 1px $color-surface-800">wait</CVStack>
212 | </FlowLayout>
213 | <FlowLayout>
214 | <CVStack width="20%" height="36px" cursor="cell" border="solid 1px $color-surface-800">cell</CVStack>
215 | <CVStack width="20%" height="36px" cursor="crosshair" border="solid 1px $color-surface-800">crosshair</CVStack>
216 | <CVStack width="20%" height="36px" cursor="text" border="solid 1px $color-surface-800">text</CVStack>
217 | <CVStack width="20%" height="36px" cursor="vertical-text" border="solid 1px $color-surface-800">vertical-text</CVStack>
218 | </FlowLayout>
219 | <FlowLayout>
220 | <CVStack width="20%" height="36px" cursor="alias" border="solid 1px $color-surface-800">alias</CVStack>
221 | <CVStack width="20%" height="36px" cursor="copy" border="solid 1px $color-surface-800">copy</CVStack>
222 | <CVStack width="20%" height="36px" cursor="move" border="solid 1px $color-surface-800">move</CVStack>
223 | <CVStack width="20%" height="36px" cursor="no-drop" border="solid 1px $color-surface-800">no-drop</CVStack>
224 | <CVStack width="20%" height="36px" cursor="not-allowed" border="solid 1px $color-surface-800">not-allowed</CVStack>
225 | <CVStack width="20%" height="36px" cursor="grab" border="solid 1px $color-surface-800">grab</CVStack>
226 | <CVStack width="20%" height="36px" cursor="grabbing" border="solid 1px $color-surface-800">grabbing</CVStack>
227 | </FlowLayout>
228 | <FlowLayout>
229 | <CVStack width="20%" height="36px" cursor="alt-scroll" border="solid 1px $color-surface-800">all-scroll</CVStack>
230 | <CVStack width="20%" height="36px" cursor="col-resize" border="solid 1px $color-surface-800">col-resize</CVStack>
231 | <CVStack width="20%" height="36px" cursor="row-resize" border="solid 1px $color-surface-800">row-resize</CVStack>
232 | <CVStack width="20%" height="36px" cursor="n-resize" border="solid 1px $color-surface-800">n-resize</CVStack>
233 | <CVStack width="20%" height="36px" cursor="e-resize" border="solid 1px $color-surface-800">e-resize</CVStack>
234 | <CVStack width="20%" height="36px" cursor="s-resize" border="solid 1px $color-surface-800">s-resize</CVStack>
235 | <CVStack width="20%" height="36px" cursor="w-resize" border="solid 1px $color-surface-800">w-resize</CVStack>
236 | <CVStack width="20%" height="36px" cursor="ne-resize" border="solid 1px $color-surface-800">ne-resize</CVStack>
237 | <CVStack width="20%" height="36px" cursor="nw-resize" border="solid 1px $color-surface-800">nw-resize</CVStack>
238 | <CVStack width="20%" height="36px" cursor="se-resize" border="solid 1px $color-surface-800">se-resize</CVStack>
239 | <CVStack width="20%" height="36px" cursor="sw-resize" border="solid 1px $color-surface-800">sw-resize</CVStack>
240 | <CVStack width="20%" height="36px" cursor="ew-resize" border="solid 1px $color-surface-800">ew-resize</CVStack>
241 | <CVStack width="20%" height="36px" cursor="ns-resize" border="solid 1px $color-surface-800">ns-resize</CVStack>
242 | <CVStack width="20%" height="36px" cursor="nesw-resize" border="solid 1px $color-surface-800">nesw-resize</CVStack>
243 | <CVStack width="20%" height="36px" cursor="nwse-resize" border="solid 1px $color-surface-800">nwse-resize</CVStack>
244 | </FlowLayout>
245 | <FlowLayout>
246 | <CVStack width="20%" height="36px" cursor="zoom-in" border="solid 1px $color-surface-800">zoom-in</CVStack>
247 | <CVStack width="20%" height="36px" cursor="zoom-out" border="solid 1px $color-surface-800">zoom-out</CVStack>
248 | </FlowLayout>
249 | </App>
250 | ```
251 |
252 | ## Font Family Values [#font-family]
253 |
254 | Font family values are a prioritized list of one or more font family names and/or generic family names. Multiple names should be separated by commas. Font family names containing whitespace should be quoted.
255 | These are the generic family names:
256 |
257 | | Name | Description |
258 | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
259 | | `serif` | Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings. |
260 | | `sans‑serif` | Glyphs have stroke endings that are plain. |
261 | | `monospace` | All glyphs have the same fixed width. |
262 | | `cursive` | Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work. |
263 | | `fantasy` | fantasy fonts are primarily decorative fonts that contain playful representations of characters. |
264 | | `system‑ui` | Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics. |
265 | | `ui‑serif` | The default user interface serif font. |
266 | | `ui‑sans‑serif` | The default user interface sans-serif font. |
267 | | `ui‑monospace` | The default user interface monospace font. |
268 | | `ui‑rounded` | The default user interface font that has rounded features. |
269 | | `math` | This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings. |
270 | | `emoji` | Fonts that are specifically designed to render emoji. |
271 | | `fangsong` | A particular style of Chinese characters that are between serif-style Song and cursive-style Kai forms. This style is often used for government documents. |
272 |
273 | > [!INFO]
274 | > A generic font family should be the last item in the list of font family names.
275 |
276 | Examples:
277 |
278 | ```text
279 | Helvetica
280 | "Times New Roman"
281 | Bookville, "Times New Roman", serif
282 | ```
283 |
284 | ## Font Weight Values [#font-weight]
285 |
286 | Font weight values set the font's weight (or boldness); the available values depend on the currently selected font family.
287 |
288 | Weight values can be numbers between 1 and 1000. The hundreds (100, 200, 300, ..., 900) are conventionally used. You can use a few identifiers to specify the font weights:
289 |
290 | | Value | Description |
291 | | --------- | --------------------------------------------------------- |
292 | | `normal` | Normal font weight. Same as `400`. |
293 | | `bold` | Bold font weight. Same as `700`. |
294 | | `lighter` | One relative font weight lighter than the parent element. |
295 | | `bolder` | One relative font weight heavier than the parent element. |
296 |
297 | ## Font Style Values [#fontStyle]
298 |
299 | This property determines whether a font should be styled with a normal, italic, or oblique face from its font family.
300 |
301 | | Value | Description |
302 | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
303 | | `normal` | Selects a font that is classified as normal within a font family. |
304 | | `italic` | Selects a font that is classified as italic. If no italic version of the face is available, one classified as oblique is used instead. If neither is available, the style is artificially simulated. |
305 | | `oblique` | Selects a font that is classified as oblique. If no oblique version of the face is available, one classified as italic is used instead. If neither is available, the style is artificially simulated. |
306 |
307 | ## Font Stretch Values [#fontStretch]
308 |
309 | This property selects a regular, condensed, or expanded face from a font. Its value can be specified as a percentage value or as one of the following:
310 |
311 | | Value | Description |
312 | | ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
313 | | `normal` | Specifies a normal font face. |
314 | | `semi‑condensed`, `condensed`, `extra‑condensed`, `ultra‑condensed` | Specifies a more condensed font face than normal, with `ultra‑condensed` as the most condensed. |
315 | | `semi‑expanded`, `expanded`, `extra‑expanded`, `ultra‑expanded` | Specifies a more expanded font face than normal, with `ultra‑expanded` as the most expanded. |
316 |
317 | ## Opacity [#opacity]
318 |
319 | This property sets an element's opacity. Opacity is the degree to which the content behind an element is hidden, and it is the opposite of transparency.
320 |
321 | The property value is a number in the range of 0.0 to 1.0, inclusive, or a percentage in the range of 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.
322 |
323 | ## Overflow Values [#overflow]
324 |
325 | A component may not fit into the viewport its parent provides. An overflow value specifies the engine's strategy in such a case.
326 |
327 | | Value | Description |
328 | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
329 | | `visible` | (**default**) Overflow content is not clipped and may be visible outside the element's padding box. |
330 | | `hidden` | Overflow content is clipped at the element's padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. |
331 | | `scroll` | Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars. |
332 |
333 | ## Outline Values [#outline]
334 |
335 | When you specify the outline of a component, you can use these three properties:
336 |
337 | - **Outline width**. The stroke [width](#size) to draw the outline.
338 | - **Outline style**. The outline [style pattern](#border-style) to apply.
339 | - **Outline color**. The [color](#color) of the outline.
340 |
341 | You must specify all of these properties to display an outline. You can specify the outline properties in any order; however, you can specify a property only once. All of these outline specifications are correct:
342 |
343 | ```text
344 | 1px solid blue
345 | dashed 4px #f0cccc
346 | #f0cccc 4 dashed
347 | ```
348 |
349 | ## Shadow Values [#shadow]
350 |
351 | You can define shadow values with one or more shadow effects. If you use more than one effect, you must separate them with a comma. A shadow effect is composed of these parts:
352 |
353 | - Horizontal offset of the effect
354 | - Vertical offset of the effect
355 | - Blur radius
356 | - Spread radius
357 | - Optional color
358 |
359 | The first up to four [size value](#size)
360 | segments are followed by the optional [color value](#color).
361 |
362 | You can use two, three, or four size values.
363 |
364 | - If only two values are given, the engine interprets them as the horizontal and vertical offsets.
365 | - If a third value is given, it is interpreted as a blur radius.
366 | - If a fourth value is given, it is interpreted as a spread radius.
367 |
368 | When you prefix the shadow value with `inset`, it changes the shadow from an outer box shadow to an inner box shadow (as if the content is pressed into the box).
369 |
370 | ```xmlui-pg name="Shadow Values" height="360px"
371 | <FlowLayout gap="24">
372 | <Stack margin="16px" padding="16px" width="80%" border="2px solid $color-surface-800"
373 | boxShadow="12px 12px 5px orangered" >
374 | <Text>12px 12px 5px orangered</Text>
375 | </Stack>
376 | <Stack margin="16px" padding="16px" width="80%" border="2px solid $color-surface-800"
377 | boxShadow="inset 12px 12px 5px #808080" >
378 | <Text>inset 12px 12px 5px orangered</Text>
379 | </Stack>
380 | <Stack margin="16px" padding="16px" width="80%" border="2px solid $color-surface-800"
381 | boxShadow="16px 8px green" >
382 | <Text>16px 8px green</Text>
383 | </Stack>
384 | <Stack margin="16px" padding="16px" width="80%" border="2px solid $color-surface-800"
385 | boxShadow="-8px -6px green" >
386 | <Text>"inset 12px 12px 5px orangered"</Text>
387 | </Stack>
388 | <Stack margin="16px" padding="16px" width="80%" border="2px solid $color-surface-800"
389 | boxShadow="16px 8px 12px blue" >
390 | <Text>16px 8px 12px blue</Text>
391 | </Stack>
392 | <Stack margin="16px" padding="16px" width="80%" border="2px solid $color-surface-800"
393 | boxShadow="16px 8px 8px 4px blue" >
394 | <Text>16px 8px 8px 4px blue</Text>
395 | </Stack>
396 | <Stack margin="16px" padding="16px" width="80%" border="2px solid $color-surface-800"
397 | boxShadow="12px 12px 5px orangered, inset 8px 6px green" >
398 | <Text>12px 12px 5px orangered, inset 8px 6px green</Text>
399 | </Stack>
400 | <Stack margin="16px" padding="16px" width="80%" border="2px solid $color-surface-800"
401 | boxShadow="8px 4px 2px blue, -8px -6px green" >
402 | <Text>12px 12px 5px blue, -8px -6px green</Text>
403 | </Stack>
404 | </FlowLayout>
405 | ```
406 |
407 | ## Size Values [#size]
408 |
409 | Size values are composed of a numeric value and an optional unit. Here are a few examples:
410 |
411 | ```text
412 | 12px
413 | 0.25rem
414 | 50%
415 | 0
416 | 125mm
417 | ```
418 |
419 | UI Engine uses these units with the CSS semantics:
420 |
421 | | Unit | Description |
422 | | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
423 | | `cm` | Centimeters (1cm = 37.8px = 25.2/64in) |
424 | | `mm` | Millimeters (1mm = 1/10th of 1cm) |
425 | | `in` | Inches (1in = 2.54cm = 96px) |
426 | | `pc` | Picas (1pc = 1/6th of 1in) |
427 | | `pt` | Points (1pt = 1/72nd of 1in) |
428 | | `px` | Pixels (1px = 1/96th of 1in) |
429 | | `em` | Relative to the font size of the parent component, in the case of typographical properties (like the font size), and font size of the element itself, in the case of other properties like (width). |
430 | | `ex` | x-height (the height of a normal lowercase "x") of the element's font. |
431 | | `ch` | The advance measure (width) of the glyph "0" of the element's font. |
432 | | `ch` | The advance measure (width) of the glyph "0" of the element's font. |
433 | | `rem` | Font size of the root element. |
434 | | `vw` | 1% of the viewport's width. |
435 | | `vh` | 1% of the viewport's height. |
436 | | `vmin` | 1% of the viewport's smaller dimension. |
437 | | `vmax` | 1% of the viewport's smaller dimension. |
438 | | `%` | The percentage value is relative to the parent container's viewport size offered for the particular child element. |
439 | | `*` | Start sizing: The size weight used when calculating the dimension of the particular child element. The base of the calculation is the remaining space size in the parent's viewport. |
440 |
441 | ## Alignment Values [#alignment]
442 |
443 | Properties such as `verticalAlignment` and `horizontalAlignment` set the alignment of content in a layout component vertically or horizontally.
444 |
445 | | Value | Description |
446 | | -------- | ---------------------------------------------------------------------------------------------------------------------- |
447 | | `start` | Horizontal: `left` if direction is left-to-right and `right` if direction is right-to-left. Vertical: at the `top`. |
448 | | `end` | Horizontal: `right` if direction is left-to-right and `left` if direction is right-to-left. Vertical: at the `bottom`. |
449 | | `center` | The contents are centered within the container. |
450 |
451 | ```xmlui-pg name="Horizontal Alignment Values"
452 | <VStack gap="8px" marginVertical="8px" paddingVertical="8px" width="600px" margin="auto">
453 | <HStack horizontalAlignment="start" backgroundColor="$color-surface-200">
454 | <Stack backgroundColor="red" height="36px" width="36px" />
455 | </HStack>
456 |
457 | <HStack horizontalAlignment="end" backgroundColor="$color-surface-200">
458 | <Stack backgroundColor="red" height="36px" width="36px" />
459 | </HStack>
460 |
461 | <HStack horizontalAlignment="center" backgroundColor="$color-surface-200">
462 | <Stack backgroundColor="red" height="36px" width="36px" />
463 | </HStack>
464 | </VStack>
465 | ```
466 |
467 | ```xmlui-pg name="Vertical Alignment Values"
468 | <HStack gap="8px" marginVertical="8px" paddingHorizontal="30px" width="600px" height="120px" margin="auto">
469 | <VStack verticalAlignment="start" backgroundColor="$color-surface-200">
470 | <Stack backgroundColor="red" height="36px" width="36px" />
471 | </VStack>
472 |
473 | <VStack verticalAlignment="end" backgroundColor="$color-surface-200">
474 | <Stack backgroundColor="red" height="36px" width="36px" />
475 | </VStack>
476 |
477 | <VStack verticalAlignment="center" backgroundColor="$color-surface-200">
478 | <Stack backgroundColor="red" height="36px" width="36px" />
479 | </VStack>
480 | </HStack>
481 | ```
482 |
483 | ## Text Alignment Values [#text-align]
484 |
485 | This value sets the horizontal alignment of the inline-rendered content (e.g., text) inside its block-rendered parent.
486 |
487 | | Value | Description |
488 | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
489 | | `start` | The same as `left` if direction is left-to-right and `right` if direction is right-to-left. |
490 | | `end` | The same as `right` if direction is left-to-right and `left` if direction is right-to-left. |
491 | | `left` | The inline contents are aligned to the left edge of the line box. |
492 | | `right` | The inline contents are aligned to the right edge of the line box. |
493 | | `center` | The inline contents are centered within the line box. |
494 | | `justify` | The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. |
495 |
496 | ```xmlui-pg name="Alignment Values"
497 | <VStack gap="8px" marginVertical="8px" paddingVertical="8px" width="600px" margin="auto">
498 | <Text textAlign="left">This is a long text with several words (left)</Text>
499 | <Text textAlign="right">This is a long text with several words (right)</Text>
500 | <Text textAlign="center">This is a long text with several words (center)</Text>
501 | <Text textAlign="justify">This is a long, long,long, long, long, long, long, very long text with several words that do not fit into a single line (justify). Last line is not justified.</Text>
502 | </VStack>
503 | ```
504 |
505 | ## Text Decoration Values [#text-decoration]
506 |
507 | A text decoration value is composed of these segments:
508 |
509 | - **color**. The color of the decoration
510 | - **line**. The kind of decoration used
511 | - **style**. The line style to use
512 |
513 | You can use one, two, or three segments when specifying the text decoration. They can be in any order; however, one segment type can be used only once.
514 |
515 | These are the available line values:
516 |
517 | | Value | Description |
518 | | -------------- | ----------------------------------------------------------------- |
519 | | `underline` | Each line of text has a decorative line beneath it. |
520 | | `overline` | Each line of text has a decorative line above it. |
521 | | `line-through` | Each line of text has a decorative line going through its middle. |
522 |
523 | You can use these style values:
524 |
525 | | Value | Description |
526 | | -------- | -------------------- |
527 | | `solid` | Draws a single line. |
528 | | `double` | Draws a double line. |
529 | | `dotted` | Draws a dotted line. |
530 | | `dashed` | Draws a dashed line. |
531 | | `wavy` | Draws a wavy line. |
532 |
533 | ```xmlui-pg name="Text Decoration Values" height="265px"
534 | <VStack margin="8px" gap="8px">
535 | <Text textDecoration="underline">underline</Text>
536 | <Text textDecoration="red wavy underline">red wavy underline</Text>
537 | <Text textDecoration="line-through">line-through</Text>
538 | <Text textDecoration="line-through orange">line-through orange</Text>
539 | <Text textDecoration="double line-through blue">double line-through blue</Text>
540 | <Text textDecoration="overline">overline</Text>
541 | <Text textDecoration="dotted overline #808080">dotted overline #808080</Text>
542 | </VStack>
543 | ```
544 |
545 | ## Text Transform Values [#text-transform]
546 |
547 | This value specifies how to capitalize a component's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
548 |
549 | | Value | Description |
550 | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
551 | | `none` | Converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text) |
552 | | `capitalize` | Draws a double line. |
553 | | `uppercase` | Converts all characters to uppercase. |
554 | | `lowercase` | Converts all characters to lowercase. |
555 | | `full-width` | Forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese). |
556 | | `full-size-kana` | Generally used for ruby annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby. |
557 |
558 | ## Text Wrap Values [#text-wrap]
559 |
560 | This value controls how text inside an element is wrapped.
561 |
562 | | Value | Description |
563 | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
564 | | `wrap` | Text is wrapped across lines at appropriate characters (for example, spaces in languages like English that use space separators) to minimize overflow. (**default**) |
565 | | `nowrap` | The text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line. |
566 | | `balance` | The text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. |
567 | | `pretty` | Results in the same behavior as `wrap`, except that the user agent will use a slower algorithm that favors better layout over speed. |
568 | | `stable` | Results in the same behavior as `wrap`, except that when the user is editing the content, the lines that come before the lines they are editing remain static rather than the whole block of text re-wrapping. |
569 |
570 | ## User Select Values [#user-select]
571 |
572 | These values control whether the user can select text.
573 |
574 | | Value | Description |
575 | | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
576 | | `none` | The text of the component and its children is not selectable. |
577 | | `auto` | Automatically determines the value. |
578 | | `text` | The text can be selected by the user. |
579 | | `all` | The content of the component shall be selected atomically: If a selection would contain part of the component, then the selection must contain the entire component, including all its children. If a double-click or context-click occurs in sub-components, the highest ancestor with this value will be selected. |
580 | | `contains` | Enables selection to start within the component; however, the selection will be contained by the bounds of that component. |
581 |
582 | ## Zoom Values [#zoom]
583 |
584 | The value of the `zoom` property controls the magnification level of a component:
585 |
586 | | Value | Description |
587 | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
588 | | `normal` | Render the element at its normal size; equal to `1`. |
589 | | `reset` | This resets the value to zoom: 1 and prevents the element from being (de)magnified if the user applies non-pinch-based zooming (e.g., by pressing Ctrl—or Ctrl+ keyboard shortcuts) to the document. |
590 | | percentage value | `100%` is equivalent to normal. Values larger than `100%` zoom in. Values smaller than `100%` zoom out. |
591 | | number | Equivalent to the corresponding percentage (`1.0` = `100%` = `normal`). Values larger than `1.0` zoom in. Values smaller than `1.0` zoom out. |
592 |
593 | ```xmlui-pg name="Setting zoom"
594 | <App>
595 | <HStack>
596 | <Card zoom="0.75" width="150px" title="Hello!" subtitle="zoom: '0.75' " height="fit-content"/>
597 | <Card width="150px" title="Hello!" subtitle="zoom: 'normal'" height="fit-content"/>
598 | <Card zoom="200%" width="150px" title="Hello!" subtitle="zoom: '200%'" height="fit-content"/>
599 | </HStack>
600 | </App>
601 | ```
602 |
603 | ## Font Variant Values [#font-variant]
604 |
605 | This value controls the usage of alternate glyphs in a font. These alternates include things like stylistic variants (such as small caps), ligatures, and more.
606 |
607 | | Value | Description |
608 | | ------------ | ----------------------------------------------------------------------------------------------------- |
609 | | `normal` | Specifies a normal font face; none of the features below are activated. |
610 | | `small-caps` | Specifies a font that is specifically designed with capital letters at the size of lowercase letters. |
611 |
612 | ```xmlui-pg name="Font variant values"
613 | <App>
614 | <FlowLayout gap="16px">
615 | <Text fontSize="18px" fontVariant="normal">This text uses normal font variant</Text>
616 | <Text fontSize="18px" fontVariant="small-caps">This text uses small-caps font variant</Text>
617 | </FlowLayout>
618 | </App>
619 | ```
620 |
621 | ## Line Break Values [#line-break]
622 |
623 | This value determines how line breaking works for languages that use a text wrapping system other than the standard space-based approach.
624 |
625 | | Value | Description |
626 | | ---------- | ----------------------------------------------------------------------------- |
627 | | `auto` | Uses the default line break rule. |
628 | | `loose` | Relaxes the line-breaking rules, allowing more opportunities for a break. |
629 | | `normal` | Uses standard line break rules. |
630 | | `strict` | Tightens the line-breaking rules, reducing the number of break opportunities. |
631 | | `anywhere` | Allows a line break to be inserted between any character. |
632 |
633 | ## Text Shadow Values [#text-shadow]
634 |
635 | This value adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations.
636 |
637 | A shadow is described by:
638 |
639 | - Horizontal offset (required)
640 | - Vertical offset (required)
641 | - Blur radius (optional)
642 | - Color (optional)
643 |
644 | ```xmlui-pg name="Text shadow examples"
645 | <App>
646 | <VStack gap="16px">
647 | <Text fontSize="20px" textShadow="2px 2px">Simple shadow (black)</Text>
648 | <Text fontSize="20px" textShadow="2px 2px 5px red">Shadow with blur</Text>
649 | <Text fontSize="20px" textShadow="2px 2px blue, 4px 4px 10px red">Multiple shadows</Text>
650 | <Text fontSize="20px" color="white" textShadow="1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue">Glow effect</Text>
651 | </VStack>
652 | </App>
653 | ```
654 |
655 | ## Text Indent Values [#text-indent]
656 |
657 | This value specifies the amount of indentation (empty space) that should be left before the first line of the text content of a block element.
658 |
659 | ```xmlui-pg name="Text indent examples"
660 | <App>
661 | <VStack gap="16px" width="100%">
662 | <Text textIndent="0px">This paragraph has <Text variant="strong">no text indent</Text>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</Text>
663 | <Text textIndent="30px">This paragraph has a <Text variant="strong">30px text indent</Text>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</Text>
664 | <Text textIndent="10%">This paragraph has a <Text variant="strong">10% text indent</Text>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</Text>
665 | </VStack>
666 | </App>
667 | ```
668 |
669 | ## Word Break Values [#word-break]
670 |
671 | This value specifies how words should break when reaching the end of a line.
672 |
673 | | Value | Description |
674 | | ------------ | ----------------------------------------------------------------------------------------------------- |
675 | | `normal` | Uses default line break rules. |
676 | | `break-all` | May break between any two characters to prevent overflow. |
677 | | `keep-all` | Prevents breaks for Chinese, Japanese, and Korean (CJK) text. Non-CJK text behavior is set to normal. |
678 | | `break-word` | Allows unbreakable words to be broken at arbitrary points if there are no acceptable break points. |
679 |
680 | ```xmlui-pg name="Word break examples"
681 | <App>
682 | <FlowLayout gap="16px">
683 | <VStack width="150px" border="1px solid gray" padding="8px">
684 | <Text>word-break: normal</Text>
685 | <Text wordBreak="normal">This is a very long text with a verylongwordthatdoesnotbreak normally</Text>
686 | </VStack>
687 | <VStack width="150px" border="1px solid gray" padding="8px">
688 | <Text>word-break: break-all</Text>
689 | <Text wordBreak="break-all">This is a very long text with a verylongwordthatbreaks anywhere</Text>
690 | </VStack>
691 | <VStack width="150px" border="1px solid gray" padding="8px">
692 | <Text>word-break: keep-all</Text>
693 | <Text wordBreak="keep-all">This is a very long text with a verylongwordthatdoesnotbreak normally</Text>
694 | </VStack>
695 | <VStack width="150px" border="1px solid gray" padding="8px">
696 | <Text>word-break: break-word</Text>
697 | <Text wordBreak="break-word">This is a very long text with a verylongwordthatdoesnotbreak normally</Text>
698 | </VStack>
699 | </FlowLayout>
700 | </App>
701 | ```
702 |
703 | ## Word Spacing Values [#word-spacing]
704 |
705 | This value sets the length of white space between words and between tags. Positive values increase the space between words, while negative values bring them closer together.
706 |
707 | ```xmlui-pg name="Word spacing examples"
708 | <App>
709 | <VStack gap="16px">
710 | <Text wordSpacing="normal">This text has <Text variant="strong">normal</Text> word spacing.</Text>
711 | <Text wordSpacing="5px">This text has <Text variant="strong">5px</Text> word spacing.</Text>
712 | <Text wordSpacing="10px">This text has <Text variant="strong">10px</Text> word spacing.</Text>
713 | <Text wordSpacing="-2px">This text has <Text variant="strong">-2px</Text> word spacing.</Text>
714 | </VStack>
715 | </App>
716 | ```
717 |
718 | ## Word Wrap Values [#word-wrap]
719 |
720 | This value determines whether the browser should break lines within words when they would otherwise overflow the container.
721 |
722 | | Value | Description |
723 | | ------------ | ------------------------------------------------------------------------------------- |
724 | | `normal` | Lines may only break at normal break points (such as spaces between words). |
725 | | `break-word` | To prevent overflow, an otherwise unbreakable word may be broken at arbitrary points. |
726 | | `anywhere` | To prevent overflow, the browser may break between any two characters. |
727 |
728 | ```xmlui-pg name="Word wrap examples"
729 | <App>
730 | <FlowLayout gap="16px">
731 | <VStack width="150px" border="1px solid gray" padding="8px">
732 | <Text>word-wrap: normal</Text>
733 | <Text wordWrap="normal">This is a very long text with a verylongwordthatdoesnotbreak normally</Text>
734 | </VStack>
735 | <VStack width="150px" border="1px solid gray" padding="8px">
736 | <Text>word-wrap: break-word</Text>
737 | <Text wordWrap="break-word">This is a very long text with a verylongwordthatbreaks when needed</Text>
738 | </VStack>
739 | <VStack width="150px" border="1px solid gray" padding="8px">
740 | <Text>word-wrap: anywhere</Text>
741 | <Text wordWrap="anywhere">This is a very long text with a verylongwordthatbreaks when needed</Text>
742 | </VStack>
743 | </FlowLayout>
744 | </App>
745 | ```
746 |
747 | ## Writing Mode Values [#writing-mode]
748 |
749 | This value sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
750 |
751 | | Value | Description |
752 | | --------------- | --------------------------------------------------------------------------------------------- |
753 | | `horizontal-tb` | Content flows horizontally from left to right, vertically from top to bottom. |
754 | | `vertical-rl` | Content flows vertically from top to bottom, horizontally from right to left. |
755 | | `vertical-lr` | Content flows vertically from top to bottom, horizontally from left to right. |
756 | | `sideways-rl` | Content flows vertically from top to bottom and all glyphs are set sideways toward the right. |
757 | | `sideways-lr` | Content flows vertically from top to bottom and all glyphs are set sideways toward the left. |
758 |
759 | ```xmlui-pg name="Writing mode examples"
760 | <App>
761 | <FlowLayout gap="24px">
762 | <VStack width="100px" height="200px" border="1px solid gray" padding="8px">
763 | <Text>horizontal-tb</Text>
764 | <Text writingMode="horizontal-tb">Horizontal writing mode</Text>
765 | </VStack>
766 | <VStack width="100px" height="200px" border="1px solid gray" padding="8px">
767 | <Text>vertical-rl</Text>
768 | <Text writingMode="vertical-rl">Vertical 1</Text>
769 | <Text writingMode="vertical-rl">Vertical 2</Text>
770 | </VStack>
771 | <VStack width="100px" height="200px" border="1px solid gray" padding="8px">
772 | <Text>vertical-lr</Text>
773 | <Text writingMode="vertical-lr">Vertical 1</Text>
774 | <Text writingMode="vertical-lr">Vertical 2</Text>
775 | </VStack>
776 | <VStack width="100px" height="200px" border="1px solid gray" padding="8px">
777 | <Text>sideways-rl</Text>
778 | <Text writingMode="sideways-rl">Vertical 1</Text>
779 | <Text writingMode="sideways-rl">Vertical 2</Text>
780 | </VStack>
781 | <VStack width="100px" height="200px" border="1px solid gray" padding="8px">
782 | <Text>sideways-lr</Text>
783 | <Text writingMode="sideways-lr">Vertical 1</Text>
784 | <Text writingMode="sideways-lr">Vertical 2</Text>
785 | </VStack>
786 | </FlowLayout>
787 | </App>
788 | ```
789 |
790 | ## Transition Values [#transition]
791 |
792 | This value specifies the CSS property to animate, the duration of the transition effect, the timing function, and the delay before the transition starts. It creates smooth animations between property value changes.
793 |
794 | A transition value can include up to four parts (in any order):
795 |
796 | - **Property name**: Specifies the CSS property to transition (e.g., `opacity`, `color`, `width`)
797 | - **Duration**: How long the transition takes (e.g., `0.5s`, `300ms`)
798 | - **Timing function**: How the transition progresses over time (e.g., `ease`, `linear`)
799 | - **Delay**: How long to wait before starting the transition (e.g., `0s`, `200ms`)
800 |
801 | You can specify multiple transitions by separating them with commas.
802 |
803 | | Timing Function Values | Description |
804 | | ----------------------- | ----------------------------------------------------------------------- |
805 | | `ease` | Starts slow, becomes fast, then ends slowly. This is the default value. |
806 | | `linear` | Same speed from start to end. |
807 | | `ease-in` | Starts slowly and accelerates. |
808 | | `ease-out` | Starts quickly and decelerates. |
809 | | `ease-in-out` | Starts slowly, speeds up in the middle, and ends slowly. |
810 | | `cubic-bezier(n,n,n,n)` | Define your own timing function with four values. |
811 |
```