This is page 116 of 186. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/cantFindIt.jpg?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── 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.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Slider/Slider.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | /**
2 | * Testing Notes: the Driver needs to account for the correct positioning of the indicators on the slider
3 | */
4 |
5 | import { validationStatusValues } from "../abstractions";
6 | import { getBounds, SKIP_REASON } from "../../testing/component-test-helpers";
7 | import { expect, test } from "../../testing/fixtures";
8 |
9 | // =============================================================================
10 | // BASIC FUNCTIONALITY TESTS
11 | // =============================================================================
12 |
13 | test.describe("Basic Functionality", () => {
14 | test("component renders", async ({ initTestBed, page }) => {
15 | await initTestBed(`<Slider />`);
16 | await expect(page.getByRole("slider")).toBeVisible();
17 | });
18 |
19 | test("component renders with label", async ({ initTestBed, page }) => {
20 | await initTestBed(`<Slider label="Volume" />`);
21 | await expect(page.getByRole("slider")).toBeVisible();
22 | await expect(page.getByText("Volume")).toBeVisible();
23 | });
24 |
25 | test("sets initialValue of field", async ({ initTestBed, page }) => {
26 | await initTestBed(`
27 | <Fragment>
28 | <Slider id="slider" initialValue="5" />
29 | <Text testId="slider-value" value="{slider.value}" />
30 | </Fragment>`);
31 | await expect(page.getByTestId("slider-value")).toHaveText("5");
32 | });
33 |
34 | test("accepts empty as initialValue", async ({ initTestBed, page }) => {
35 | await initTestBed(`
36 | <Fragment>
37 | <Slider id="slider" initialValue="" />
38 | <Text testId="slider-value" value="{slider.value}" />
39 | </Fragment>`);
40 | await expect(page.getByTestId("slider-value")).toHaveText("0");
41 | });
42 |
43 | [
44 | { label: "int", value: 5, expected: "5" },
45 | { label: "float", value: 5.5, expected: "5.5" },
46 | ].forEach(({ label, value, expected }) => {
47 | test(`handles ${label} correctly`, async ({ initTestBed, page }) => {
48 | await initTestBed(`
49 | <Fragment>
50 | <Slider id="slider" initialValue="${JSON.stringify(value)}" />
51 | <Text testId="slider-value" value="{slider.value}" />
52 | </Fragment>`);
53 | await expect(page.getByTestId("slider-value")).toHaveText(expected);
54 | });
55 | });
56 |
57 | [
58 | { label: "string that resolves to int", value: "5", expected: "5" },
59 | { label: "string that resolves to float", value: "5.5", expected: "5.5" },
60 | ].forEach(({ label, value, expected }) => {
61 | test(`handles ${label} correctly`, async ({ initTestBed, page }) => {
62 | await initTestBed(`
63 | <Fragment>
64 | <Slider id="slider" initialValue="${value}" />
65 | <Text testId="slider-value" value="{slider.value}" />
66 | </Fragment>`);
67 | await expect(page.getByTestId("slider-value")).toHaveText(expected);
68 | });
69 | });
70 |
71 | [
72 | { label: "NaN", value: NaN },
73 | { label: "null", value: null },
74 | { label: "undefined", value: undefined },
75 | { label: "empty string", value: "" },
76 | { label: "string not resolving to number", value: "abc" },
77 | ].forEach(({ label, value }) => {
78 | test(`handles ${label} gracefully`, async ({ initTestBed, page }) => {
79 | await initTestBed(`
80 | <Fragment>
81 | <Slider id="slider" initialValue="${value}" />
82 | <Text testId="slider-value" value="{slider.value}" />
83 | </Fragment>`);
84 | await expect(page.getByTestId("slider-value")).toHaveText("0");
85 | });
86 | });
87 |
88 | test("minValue sets the lower bound", async ({ initTestBed, page }) => {
89 | await initTestBed(`
90 | <Fragment>
91 | <Slider id="slider" minValue="5" />
92 | <Text testId="slider-value" value="{slider.value}" />
93 | </Fragment>`);
94 | const slider = page.getByRole("slider");
95 | await expect(slider).toHaveAttribute("aria-valuemin", "5");
96 | });
97 |
98 | test("value cannot be lower than minValue", async ({ initTestBed, page }) => {
99 | await initTestBed(`
100 | <Fragment>
101 | <Slider id="slider" minValue="20" maxValue="30" initialValue="10" />
102 | <Text testId="slider-value" value="{slider.value}" />
103 | </Fragment>`);
104 | await expect(page.getByTestId("slider-value")).toHaveText("20");
105 | });
106 |
107 | test("maxValue sets the upper bound", async ({ initTestBed, page }) => {
108 | await initTestBed(`<Slider maxValue="50" />`);
109 | const slider = page.getByRole("slider");
110 | await expect(slider).toHaveAttribute("aria-valuemax", "50");
111 | });
112 |
113 | test("value cannot be larger than maxValue", async ({ initTestBed, page }) => {
114 | await initTestBed(`
115 | <Fragment>
116 | <Slider id="slider" maxValue="30" initialValue="40" />
117 | <Text testId="slider-value" value="{slider.value}" />
118 | </Fragment>`);
119 | await expect(page.getByTestId("slider-value")).toHaveText("30");
120 | });
121 |
122 | test("handles invalid minValue/maxValue gracefully", async ({ initTestBed, page }) => {
123 | await initTestBed(`<Slider minValue="invalid" maxValue="invalid" />`);
124 | const slider = page.getByRole("slider");
125 | await expect(slider).toHaveAttribute("aria-valuemin", "0");
126 | await expect(slider).toHaveAttribute("aria-valuemax", "10");
127 | });
128 |
129 | test("step defines increment value", async ({ initTestBed, page }) => {
130 | await initTestBed(`
131 | <Fragment>
132 | <Slider id="slider" step="2" initialValue="0" />
133 | <Text testId="slider-value" value="{slider.value}" />
134 | </Fragment>`);
135 | const slider = page.getByRole("slider");
136 | await slider.press("ArrowRight");
137 | await expect(page.getByTestId("slider-value")).toHaveText("2");
138 | });
139 |
140 | test("handles fractional step values", async ({ initTestBed, page }) => {
141 | await initTestBed(`
142 | <Fragment>
143 | <Slider id="slider" step="0.1" initialValue="0" />
144 | <Text testId="slider-value" value="{slider.value}" />
145 | </Fragment>`);
146 | const slider = page.getByRole("slider");
147 | await slider.press("ArrowRight");
148 | await expect(page.getByTestId("slider-value")).toHaveText("0.1");
149 | });
150 |
151 | test("component handles multiple thumbs", async ({ initTestBed, page }) => {
152 | await initTestBed(`<Slider initialValue="{[2, 4]}" />`);
153 | const thumbs = page.getByRole("slider");
154 | await expect(thumbs).toHaveCount(2);
155 | });
156 |
157 | test("all thumbs are interactable via mouse", async ({
158 | initTestBed,
159 | createSliderDriver,
160 | page,
161 | }) => {
162 | await initTestBed(`
163 | <Fragment>
164 | <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
165 | <Text testId="sliderValue0">{slider.value[0]}</Text>
166 | <Text testId="sliderValue1">{slider.value[1]}</Text>
167 | </Fragment>
168 | `);
169 | const driver = await createSliderDriver("slider");
170 | await driver.dragThumbByMouse("start", 0);
171 | await driver.dragThumbByMouse("end", 1);
172 |
173 | await expect(page.getByTestId("sliderValue0")).toHaveText("0");
174 | await expect(page.getByTestId("sliderValue1")).toHaveText("10");
175 | });
176 |
177 | test("all thumbs are interactable via keyboard", async ({ initTestBed, createSliderDriver, page }) => {
178 | await initTestBed(`
179 | <Fragment>
180 | <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
181 | <Text testId="sliderValue0">{slider.value[0]}</Text>
182 | <Text testId="sliderValue1">{slider.value[1]}</Text>
183 | </Fragment>
184 | `);
185 | const driver = await createSliderDriver("slider");
186 | await driver.stepThumbByKeyboard("ArrowLeft", 0);
187 | await driver.stepThumbByKeyboard("ArrowRight", 1);
188 | await expect(page.getByTestId("sliderValue0")).toHaveText("1");
189 | await expect(page.getByTestId("sliderValue1")).toHaveText("5");
190 | });
191 |
192 | test("minStepsBetweenThumbs maintains thumb separation", async ({ initTestBed, createSliderDriver, page }) => {
193 | await initTestBed(`
194 | <Fragment>
195 | <Slider id="slider" initialValue="{[0, 5]}" minStepsBetweenThumbs="3" minValue="0" maxValue="10" />
196 | <Text testId="sliderValue1">{slider.value[1]}</Text>
197 | </Fragment>
198 | `);
199 | const driver = await createSliderDriver("slider");
200 | await driver.stepThumbByKeyboard("ArrowLeft", 1, 3); // Try to move left by 3 steps
201 | await expect(page.getByTestId("sliderValue1")).toHaveText("3");
202 | });
203 |
204 | test("enabled=false disables control", async ({ initTestBed, page }) => {
205 | await initTestBed(`<Slider enabled="false" />`);
206 | await expect(page.getByRole("slider")).toBeDisabled();
207 | });
208 |
209 | test("readOnly prevents interaction", async ({ initTestBed, page, createSliderDriver }) => {
210 | await initTestBed(`
211 | <Fragment>
212 | <Slider id="mySlider" readOnly="true" />
213 | <Text testId="slider-value" value="{mySlider.value}" />
214 | </Fragment>`);
215 | const driver = await createSliderDriver("mySlider");
216 | await driver.dragThumbByMouse("end");
217 | await expect(page.getByTestId("slider-value")).toHaveText("0"); // Value should remain unchanged
218 | });
219 |
220 | test.fixme(
221 | "autoFocus focuses slider on mount",
222 | SKIP_REASON.XMLUI_BUG("autoFocus does not seem to work with radix-ui, need to double-check"),
223 | async ({ initTestBed, page }) => {
224 | await initTestBed(`<Slider autoFocus="true" />`);
225 | await expect(page.getByRole("slider")).toBeFocused();
226 | },
227 | );
228 |
229 | test("required shows visual indicator", async ({ initTestBed, page }) => {
230 | await initTestBed(`<Slider required="true" label="Required slider" />`);
231 | await expect(page.getByText("Required slider")).toContainText("*");
232 | });
233 |
234 | test("showValues=true displays current value", async ({ initTestBed, page }) => {
235 | await initTestBed(`<Slider showValues="true" initialValue="10" />`);
236 | await page.getByRole("slider").hover();
237 | await expect(page.getByText("10")).toBeVisible();
238 | });
239 |
240 | test("showValues=false hides current value", async ({ initTestBed, page }) => {
241 | await initTestBed(`<Slider showValues="false" initialValue="10" />`);
242 | await page.getByRole("slider").hover();
243 | await expect(page.getByText("10")).not.toBeVisible();
244 | });
245 |
246 | test("valueFormat customizes value display", async ({ initTestBed, page }) => {
247 | await initTestBed(
248 | `<Slider showValues="true" initialValue="10" valueFormat="{(v) => v + '%'}" />`,
249 | );
250 | await page.getByRole("slider").hover();
251 | await expect(page.getByText("10%")).toBeVisible();
252 | });
253 |
254 | test("handles array initialValue for range", async ({ initTestBed, page }) => {
255 | await initTestBed(`<Slider initialValue="{[2, 6]}" />`);
256 | const sliders = page.getByRole("slider");
257 |
258 | await sliders.first().hover();
259 | await expect(page.getByText("2")).toBeVisible();
260 | await expect(page.getByText("6")).toBeVisible();
261 | });
262 |
263 | test("maintains thumb order in range mode", async ({ initTestBed, page }) => {
264 | await initTestBed(`<Slider initialValue="{[6, 2]}" />`);
265 | const sliders = page.getByRole("slider");
266 | // Should auto-correct to [2, 6]
267 | await sliders.first().hover();
268 | await expect(page.getByText("2")).toBeVisible();
269 | await expect(page.getByText("6")).toBeVisible();
270 | });
271 | });
272 |
273 | // =============================================================================
274 | // ACCESSIBILITY TESTS
275 | // =============================================================================
276 |
277 | test.describe("Accessibility", () => {
278 | test("has correct ARIA role", async ({ initTestBed, page }) => {
279 | await initTestBed(`<Slider />`);
280 | await expect(page.getByRole("slider")).toBeVisible();
281 | });
282 | test("label is properly associated", async ({ initTestBed, page }) => {
283 | await initTestBed(`<Slider label="Volume Control" />`);
284 | await page.getByText("Volume Control").click();
285 | await expect(page.getByRole("slider")).toBeFocused();
286 | });
287 |
288 | test("supports keyboard navigation", async ({ initTestBed, page }) => {
289 | await initTestBed(`
290 | <Fragment>
291 | <Slider id="mySlider" initialValue="5" />
292 | <Text testId="slider-value">{mySlider.value}</Text>
293 | </Fragment>`);
294 | const slider = page.getByRole("slider");
295 | await slider.focus();
296 |
297 | await slider.press("ArrowRight");
298 | await expect(page.getByTestId("slider-value")).toHaveText("6");
299 |
300 | await slider.press("ArrowLeft");
301 | await expect(page.getByTestId("slider-value")).toHaveText("5");
302 | });
303 |
304 | test("supports Home/End key navigation", async ({ initTestBed, page }) => {
305 | await initTestBed(`
306 | <Fragment>
307 | <Slider id="mySlider" minValue="0" maxValue="100" initialValue="50" />
308 | <Text testId="slider-value">{mySlider.value}</Text>
309 | </Fragment>`);
310 | const slider = page.getByRole("slider");
311 | await slider.focus();
312 |
313 | await slider.press("Home");
314 | await expect(page.getByTestId("slider-value")).toHaveText("0");
315 |
316 | await slider.press("End");
317 | await expect(page.getByTestId("slider-value")).toHaveText("100");
318 | });
319 |
320 | test("disabled slider has proper ARIA attributes", async ({ initTestBed, page }) => {
321 | await initTestBed(`<Slider enabled="false" />`);
322 | await expect(page.locator("span").first()).toHaveAttribute("aria-disabled", "true");
323 | });
324 |
325 | test("required slider has proper ARIA attributes", async ({ initTestBed, page }) => {
326 | await initTestBed(`<Slider required="true" />`);
327 | await expect(page.getByRole("slider")).toHaveAttribute("aria-required", "true");
328 | });
329 |
330 | test("range slider has multiple slider roles", async ({ initTestBed, page }) => {
331 | await initTestBed(`<Slider initialValue="{[3, 5]}" />`);
332 | const sliders = page.getByRole("slider");
333 | await expect(sliders).toHaveCount(2);
334 | });
335 | });
336 |
337 | // =============================================================================
338 | // LABEL POSITIONING TESTS
339 | // =============================================================================
340 |
341 | test.describe("Label", () => {
342 | test("labelPosition=top positions label above slider", async ({ initTestBed, page }) => {
343 | await initTestBed(`<Slider label="test" labelPosition="top" />`);
344 |
345 | const { top: sliderTop } = await getBounds(page.getByRole("slider"));
346 | const { bottom: labelBottom } = await getBounds(page.getByText("test"));
347 |
348 | expect(labelBottom).toBeLessThan(sliderTop);
349 | });
350 |
351 | test("labelPosition=start positions label before slider", async ({ initTestBed, page }) => {
352 | await initTestBed(`<Slider label="test" labelPosition="start" />`);
353 |
354 | const { left: sliderLeft } = await getBounds(page.getByRole("slider"));
355 | const { right: labelRight } = await getBounds(page.getByText("test"));
356 |
357 | expect(labelRight).toBeLessThan(sliderLeft);
358 | });
359 |
360 | test("labelWidth applies custom label width", async ({ initTestBed, page }) => {
361 | const expected = 150;
362 | await initTestBed(`<Slider label="test label" labelWidth="${expected}px" />`);
363 | const { width } = await getBounds(page.getByText("test label"));
364 | expect(width).toEqual(expected);
365 | });
366 |
367 | test("labelBreak enables label line breaks", async ({ initTestBed, page }) => {
368 | const labelText = "Very long label text that should break";
369 | await initTestBed(`<Slider label="${labelText}" labelWidth="100px" labelBreak="true" />`);
370 | const label = page.getByText(labelText);
371 | const { height } = await getBounds(label);
372 | expect(height).toBeGreaterThan(20); // Assumes multi-line height
373 | });
374 |
375 | test("handles invalid labelPosition gracefully", async ({ initTestBed, page }) => {
376 | await initTestBed(`<Slider labelPosition="invalid" label="test" />`);
377 | await expect(page.getByRole("slider")).toBeVisible();
378 | await expect(page.getByText("test")).toBeVisible();
379 | });
380 | });
381 |
382 | // =============================================================================
383 | // EVENT HANDLING TESTS
384 | // =============================================================================
385 |
386 | test.describe("Event Handling", () => {
387 | test("didChange event fires on value change", async ({ initTestBed, page }) => {
388 | const { testStateDriver } = await initTestBed(`
389 | <Slider onDidChange="testState = 'changed'" initialValue="0" />
390 | `);
391 | const slider = page.getByRole("slider");
392 | await slider.focus();
393 | await slider.press("ArrowRight");
394 | await expect.poll(testStateDriver.testState).toEqual("changed");
395 | });
396 |
397 | test("didChange event passes new value", async ({ initTestBed, page }) => {
398 | const { testStateDriver } = await initTestBed(`
399 | <Slider onDidChange="arg => testState = arg" initialValue="1" />
400 | `);
401 | const slider = page.getByRole("slider");
402 | await slider.focus();
403 | await slider.press("ArrowRight");
404 | await expect.poll(testStateDriver.testState).toEqual(2);
405 | });
406 |
407 | test("gotFocus event fires on focus", async ({ initTestBed, page }) => {
408 | const { testStateDriver } = await initTestBed(`
409 | <Slider onGotFocus="testState = 'focused'" />
410 | `);
411 | await page.getByRole("slider").focus();
412 | await expect.poll(testStateDriver.testState).toEqual("focused");
413 | });
414 |
415 | test("gotFocus event fires on label click", async ({ initTestBed, page }) => {
416 | const { testStateDriver } = await initTestBed(`
417 | <Slider label="Volume" onGotFocus="testState = 'focused'" />
418 | `);
419 | await page.getByText("Volume").click();
420 | await expect.poll(testStateDriver.testState).toEqual("focused");
421 | });
422 |
423 | test("lostFocus event fires on blur", async ({ initTestBed, page }) => {
424 | const { testStateDriver } = await initTestBed(`
425 | <Slider onLostFocus="testState = 'blurred'" />
426 | `);
427 | const slider = page.getByRole("slider");
428 | await slider.focus();
429 | await slider.blur();
430 | await expect.poll(testStateDriver.testState).toEqual("blurred");
431 | });
432 |
433 | test("events do not fire when disabled", async ({ initTestBed, page }) => {
434 | const { testStateDriver } = await initTestBed(`
435 | <Slider enabled="false" onDidChange="testState = 'changed'" onGotFocus="testState = 'focused'" />
436 | `);
437 | const slider = page.getByRole("slider");
438 | await slider.focus();
439 | await slider.press("ArrowRight");
440 | await expect.poll(testStateDriver.testState).toEqual(null);
441 | });
442 | });
443 |
444 | // =============================================================================
445 | // API TESTS
446 | // =============================================================================
447 |
448 | test.describe("Api", () => {
449 | test("value API returns current state", async ({ initTestBed, page }) => {
450 | await initTestBed(`
451 | <Fragment>
452 | <Slider id="mySlider" initialValue="5" />
453 | <Text testId="value">{mySlider.value}</Text>
454 | </Fragment>
455 | `);
456 | await expect(page.getByTestId("value")).toHaveText("5");
457 | });
458 |
459 | test("value API returns state after change", async ({ initTestBed, page }) => {
460 | await initTestBed(`
461 | <Fragment>
462 | <Slider id="mySlider" initialValue="1" />
463 | <Text testId="value">{mySlider.value}</Text>
464 | </Fragment>
465 | `);
466 | const slider = page.getByRole("slider");
467 | await slider.focus();
468 | await slider.press("ArrowRight");
469 | await expect(page.getByTestId("value")).toHaveText("2");
470 | });
471 |
472 | test("setValue API updates state", async ({ initTestBed, page }) => {
473 | await initTestBed(`
474 | <Fragment>
475 | <Slider id="mySlider" />
476 | <Button testId="setBtn" onClick="mySlider.setValue(5)" label="{mySlider.value}" />
477 | </Fragment>
478 | `);
479 | await page.getByTestId("setBtn").click();
480 | await expect(page.getByTestId("setBtn")).toHaveText("5");
481 | });
482 |
483 | test("setValue API triggers events", async ({ initTestBed, page }) => {
484 | const { testStateDriver } = await initTestBed(`
485 | <Fragment>
486 | <Slider id="mySlider" onDidChange="testState = 'api-changed'" />
487 | <Button testId="setBtn" onClick="mySlider.setValue(75)" />
488 | </Fragment>
489 | `);
490 | await page.getByTestId("setBtn").click();
491 | await expect.poll(testStateDriver.testState).toEqual("api-changed");
492 | });
493 |
494 | test("focus API focuses the slider", async ({ initTestBed, page }) => {
495 | await initTestBed(`
496 | <Fragment>
497 | <Slider id="mySlider" />
498 | <Button testId="focusBtn" onClick="mySlider.focus()" />
499 | </Fragment>
500 | `);
501 | const slider = page.getByRole("slider");
502 | await expect(slider).not.toBeFocused();
503 |
504 | await page.getByTestId("focusBtn").click();
505 | await expect(slider).toBeFocused();
506 | });
507 |
508 | test("focus API does nothing when disabled", async ({ initTestBed, page }) => {
509 | await initTestBed(`
510 | <Fragment>
511 | <Slider id="mySlider" enabled="false" />
512 | <Button testId="focusBtn" onClick="mySlider.focus()" />
513 | </Fragment>
514 | `);
515 | await page.getByTestId("focusBtn").click();
516 | await expect(page.getByRole("slider")).not.toBeFocused();
517 | });
518 |
519 | test("setValue does not update when disabled", async ({ initTestBed, page }) => {
520 | await initTestBed(`
521 | <Fragment>
522 | <Slider id="mySlider" enabled="false" initialValue="5" />
523 | <Button testId="setBtn" onClick="mySlider.setValue(10)" label="{mySlider.value}" />
524 | </Fragment>
525 | `);
526 | await page.getByTestId("setBtn").click();
527 | await expect(page.getByTestId("setBtn")).toHaveText("5");
528 | });
529 |
530 | test("setValue handles invalid values gracefully", async ({ initTestBed, page }) => {
531 | await initTestBed(`
532 | <Fragment>
533 | <Slider id="mySlider" initialValue="5" minValue="0" />
534 | <Button testId="setBtn" onClick="mySlider.setValue('invalid')" label="{mySlider.value}" />
535 | </Fragment>
536 | `);
537 | await page.getByTestId("setBtn").click();
538 | await expect(page.getByTestId("setBtn")).toHaveText("0");
539 | });
540 | });
541 |
542 | // =============================================================================
543 | // THEME VARIABLE TESTS
544 | // =============================================================================
545 |
546 | test.describe("Theme Variables", () => {
547 | test("backgroundColor-track applies correctly", async ({ initTestBed, page }) => {
548 | await initTestBed(`<Slider testId="slider" />`, {
549 | testThemeVars: {
550 | "backgroundColor-track-Slider": "rgb(255, 0, 0)",
551 | },
552 | });
553 | const track = page.locator("[data-track]");
554 | await expect(track).toHaveCSS("background-color", "rgb(255, 0, 0)");
555 | });
556 |
557 | test("backgroundColor-range applies correctly", async ({ initTestBed, page }) => {
558 | await initTestBed(`<Slider testId="slider" initialValue="5" />`, {
559 | testThemeVars: {
560 | "backgroundColor-range-Slider": "rgb(0, 255, 0)",
561 | },
562 | });
563 | const range = page.locator("[data-range]");
564 | await expect(range).toHaveCSS("background-color", "rgb(0, 255, 0)");
565 | });
566 |
567 | test("backgroundColor-thumb applies correctly", async ({ initTestBed, page }) => {
568 | await initTestBed(`<Slider testId="slider" />`, {
569 | testThemeVars: {
570 | "backgroundColor-thumb-Slider": "rgb(0, 0, 255)",
571 | },
572 | });
573 | const thumb = page.getByRole("slider");
574 | await expect(thumb).toHaveCSS("background-color", "rgb(0, 0, 255)");
575 | });
576 |
577 | test("disabled theme variables apply when disabled", async ({ initTestBed, page }) => {
578 | await initTestBed(`<Slider testId="slider" enabled="false" />`, {
579 | testThemeVars: {
580 | "backgroundColor-track-Slider--disabled": "rgb(200, 200, 200)",
581 | },
582 | });
583 | const track = page.locator("[data-track]");
584 | await expect(track).toHaveCSS("background-color", "rgb(200, 200, 200)");
585 | });
586 |
587 | test("focus theme variables apply on focus", async ({ initTestBed, page }) => {
588 | await initTestBed(`<Slider testId="slider" />`, {
589 | testThemeVars: {
590 | "boxShadow-thumb-Slider--focus": "rgb(0, 123, 255) 0px 0px 10px 0px",
591 | },
592 | });
593 | const slider = page.getByRole("slider");
594 | await slider.focus();
595 | await expect(slider).toHaveCSS("box-shadow", "rgb(0, 123, 255) 0px 0px 10px 0px");
596 | });
597 |
598 | test("hover theme variables apply on hover", async ({ initTestBed, page }) => {
599 | await initTestBed(`<Slider testId="slider" />`, {
600 | testThemeVars: {
601 | "boxShadow-thumb-Slider--hover": "rgb(0, 0, 0) 0px 0px 5px 0px",
602 | },
603 | });
604 | const slider = page.getByRole("slider");
605 | await slider.hover();
606 | await expect(slider).toHaveCSS("box-shadow", "rgb(0, 0, 0) 0px 0px 5px 0px");
607 | });
608 | });
609 |
610 | // =============================================================================
611 | // VALIDATION TESTS
612 | // =============================================================================
613 |
614 | test.describe("Validation", () => {
615 | test("handles invalid validationStatus gracefully", async ({ initTestBed, page }) => {
616 | await initTestBed(`<Slider validationStatus="invalid" />`);
617 | await expect(page.getByRole("slider")).toBeVisible();
618 | });
619 |
620 | [
621 | { value: "--default", prop: "" },
622 | { value: "--warning", prop: 'validationStatus="warning"' },
623 | { value: "--error", prop: 'validationStatus="error"' },
624 | { value: "--success", prop: 'validationStatus="valid"' },
625 | ].forEach((variant) => {
626 | test(`applies correct borderRadius ${variant.value}`, async ({ initTestBed, page }) => {
627 | await initTestBed(`<Slider ${variant.prop} />`, {
628 | testThemeVars: { [`borderRadius-Slider${variant.value}`]: "12px" },
629 | });
630 | const sliderTrack = page.locator("[data-track]");
631 | await expect(sliderTrack).toHaveCSS("border-radius", "12px");
632 | });
633 |
634 | test(`applies correct borderColor ${variant.value}`, async ({ initTestBed, page }) => {
635 | await initTestBed(`<Slider ${variant.prop} />`, {
636 | testThemeVars: { [`borderColor-Slider${variant.value}`]: "rgb(255, 0, 0)" },
637 | });
638 | const sliderTrack = page.locator("[data-track]");
639 | await expect(sliderTrack).toHaveCSS("border-color", "rgb(255, 0, 0)");
640 | });
641 |
642 | test(`applies correct borderWidth ${variant.value}`, async ({ initTestBed, page }) => {
643 | await initTestBed(`<Slider testId="test" ${variant.prop} />`, {
644 | testThemeVars: { [`borderWidth-Slider${variant.value}`]: "1px" },
645 | });
646 | const sliderTrack = page.locator("[data-track]");
647 | await expect(sliderTrack).toHaveCSS("border-width", "1px");
648 | });
649 |
650 | test(`applies correct borderStyle ${variant.value}`, async ({ initTestBed, page }) => {
651 | await initTestBed(`<Slider ${variant.prop} />`, {
652 | testThemeVars: { [`borderStyle-Slider${variant.value}`]: "dashed" },
653 | });
654 | const sliderTrack = page.locator("[data-track]");
655 | await expect(sliderTrack).toHaveCSS("border-style", "dashed");
656 | });
657 |
658 | test(`applies correct boxShadow ${variant.value}`, async ({ initTestBed, page }) => {
659 | await initTestBed(`<Slider ${variant.prop} />`, {
660 | testThemeVars: {
661 | [`boxShadow-Slider${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
662 | },
663 | });
664 | const sliderTrack = page.locator("[data-track]");
665 | await expect(sliderTrack).toHaveCSS(
666 | "box-shadow",
667 | "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px",
668 | );
669 | });
670 |
671 | test(`applies correct borderColor on hover ${variant.value}`, async ({ initTestBed, page }) => {
672 | await initTestBed(`<Slider ${variant.prop} />`, {
673 | testThemeVars: { [`borderColor-Slider${variant.value}--hover`]: "rgb(0, 0, 0)" },
674 | });
675 | const sliderTrack = page.locator("[data-track]");
676 | await sliderTrack.hover();
677 | await expect(sliderTrack).toHaveCSS("border-color", "rgb(0, 0, 0)");
678 | });
679 |
680 | test(`applies correct boxShadow on hover ${variant.value}`, async ({ initTestBed, page }) => {
681 | await initTestBed(`<Slider ${variant.prop} />`, {
682 | testThemeVars: {
683 | [`boxShadow-Slider${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
684 | },
685 | });
686 | const sliderTrack = page.locator("[data-track]");
687 | await sliderTrack.hover();
688 | await expect(sliderTrack).toHaveCSS(
689 | "box-shadow",
690 | "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px",
691 | );
692 | });
693 | });
694 | });
695 |
696 | // =============================================================================
697 | // EDGE CASE TESTS
698 | // =============================================================================
699 |
700 | test.describe("Edge Cases", () => {
701 | test("handles extremely large values", async ({ initTestBed, page }) => {
702 | await initTestBed(`
703 | <Fragment>
704 | <Slider id="mySlider" initialValue="${Number.MAX_SAFE_INTEGER}" maxValue="${Number.MAX_SAFE_INTEGER}" />
705 | <Text testId="slider-value" value="{mySlider.value}" />
706 | </Fragment>`);
707 | await expect(page.getByTestId("slider-value")).toHaveText(Number.MAX_SAFE_INTEGER.toString());
708 | });
709 |
710 | test("handles negative values", async ({ initTestBed, page }) => {
711 | await initTestBed(`
712 | <Fragment>
713 | <Slider id="mySlider" minValue="-100" maxValue="0" initialValue="-50" />
714 | <Text testId="slider-value" value="{mySlider.value}" />
715 | </Fragment>`);
716 | await expect(page.getByTestId("slider-value")).toHaveText("-50");
717 | });
718 |
719 | test("handles very small step values", async ({ initTestBed, page }) => {
720 | await initTestBed(`
721 | <Fragment>
722 | <Slider id="mySlider" step="0.000000001" initialValue="0" />
723 | <Text testId="slider-value" value="{mySlider.value}" />
724 | </Fragment>`);
725 | const slider = page.getByRole("slider");
726 | await slider.focus();
727 | await slider.press("ArrowRight");
728 | await expect(page.getByTestId("slider-value")).toHaveText((0.000000001).toExponential());
729 | });
730 |
731 | test("handles conflicting min/max values", async ({ initTestBed, page }) => {
732 | await initTestBed(`<Slider minValue="100" maxValue="50" />`);
733 | await expect(page.getByRole("slider")).toBeVisible();
734 | });
735 |
736 | test("handles zero step value", async ({ initTestBed, page }) => {
737 | await initTestBed(`<Slider step="0" />`);
738 | await expect(page.getByRole("slider")).toBeVisible();
739 | });
740 |
741 | test("handles range with identical values", async ({ initTestBed, page }) => {
742 | await initTestBed(`<Slider initialValue="{[50, 50]}" />`);
743 | const sliders = page.getByRole("slider");
744 | await expect(sliders).toHaveCount(2);
745 | });
746 | });
747 |
748 | // =============================================================================
749 | // VISUAL STATE TESTS
750 | // =============================================================================
751 |
752 | test("input has correct width in px", async ({ page, initTestBed }) => {
753 | await initTestBed(`<Slider width="200px" testId="test"/>`, {});
754 |
755 | const input = page.getByTestId("test");
756 | const { width } = await input.boundingBox();
757 | expect(width).toBe(200);
758 | });
759 |
760 | test("input with label has correct width in px", async ({ page, initTestBed }) => {
761 | await initTestBed(`<Slider width="200px" label="test" testId="test"/>`, {});
762 |
763 | const input = page.getByTestId("test");
764 | const { width } = await input.boundingBox();
765 | expect(width).toBe(200);
766 | });
767 |
768 | test("input has correct width in %", async ({ page, initTestBed }) => {
769 | await page.setViewportSize({ width: 400, height: 300});
770 | await initTestBed(`<Slider width="50%" testId="test"/>`, {});
771 |
772 | const input = page.getByTestId("test");
773 | const { width } = await input.boundingBox();
774 | expect(width).toBe(200);
775 | });
776 |
777 | test("input with label has correct width in %", async ({ page, initTestBed }) => {
778 | await page.setViewportSize({ width: 400, height: 300});
779 | await initTestBed(`<Slider width="50%" label="test" testId="test"/>`, {});
780 |
781 | const input = page.getByTestId("test");
782 | const { width } = await input.boundingBox();
783 | expect(width).toBe(200);
784 | });
```
--------------------------------------------------------------------------------
/docs/content/components/Text.md:
--------------------------------------------------------------------------------
```markdown
1 | # Text [#text]
2 |
3 | The `Text` component displays textual information in a number of optional styles and variants.
4 |
5 | You can learn more about this component in the [Working with Text](/working-with-text) article.
6 |
7 | Also note that variants of the `Text` component are also mapped to HtmlTag components.
8 | See the [variant](#variant) section to check which variant maps to which HtmlTag.
9 |
10 | ## Custom Variants [#custom-variants]
11 |
12 | In addition to the predefined variants, the `Text` component supports **custom variant names** that can be styled using theme variables. This allows you to create application-specific text styles without modifying the component itself.
13 |
14 | When you use a custom variant name (one not in the predefined list), the component automatically applies theme variables following the naming pattern: `{cssProperty}-Text-{variantName}`.
15 |
16 | ```xmlui-pg display name="Example: custom variants"
17 | <App>
18 | <Theme
19 | textColor-Text-brandTitle="rgb(41, 128, 185)"
20 | fontSize-Text-brandTitle="28px"
21 | fontWeight-Text-brandTitle="bold"
22 | letterSpacing-Text-brandTitle="2px"
23 | >
24 | <Text variant="brandTitle">
25 | Welcome to Our Application
26 | </Text>
27 | </Theme>
28 | </App>
29 | ```
30 |
31 | In this example, the custom variant `brandTitle` is styled using theme variables. Any CSS text property can be configured, including `textColor`, `fontSize`, `fontWeight`, `fontFamily`, `textDecoration*`, `lineHeight`, `backgroundColor`, `textTransform`, `letterSpacing`, `wordSpacing`, `textShadow`, and more.
32 |
33 | ## Properties [#properties]
34 |
35 | ### `breakMode` (default: "normal") [#breakmode-default-normal]
36 |
37 | This property controls how text breaks into multiple lines. `normal` uses standard word boundaries, `word` breaks long words to prevent overflow, `anywhere` breaks at any character, `keep` prevents word breaking, and `hyphenate` uses automatic hyphenation. When not specified, uses the default browser behavior or theme variables.
38 |
39 | Available values:
40 |
41 | | Value | Description |
42 | | --- | --- |
43 | | `normal` | Uses standard word boundaries for breaking **(default)** |
44 | | `word` | Breaks long words when necessary to prevent overflow |
45 | | `anywhere` | Breaks at any character if needed to fit content |
46 | | `keep` | Prevents breaking within words entirely |
47 | | `hyphenate` | Uses automatic hyphenation when breaking words |
48 |
49 | ```xmlui-pg copy display name="Example: breakMode"
50 | <App>
51 | <VStack gap="16px">
52 | <VStack gap="8px">
53 | <Text variant="strong">breakMode="normal" (default)</Text>
54 | <Text
55 | width="150px"
56 | backgroundColor="lightblue"
57 | padding="8px"
58 | breakMode="normal">
59 | This text uses standardwordbreaking at natural boundaries
60 | like spaces and hyphens.
61 | </Text>
62 | </VStack>
63 |
64 | <VStack gap="8px">
65 | <Text variant="strong">breakMode="word"</Text>
66 | <Text
67 | width="150px"
68 | backgroundColor="lightgreen"
69 | padding="8px"
70 | breakMode="word">
71 | This text will breakverylongwordswhenneeded to prevent
72 | overflow while preserving readability.
73 | </Text>
74 | </VStack>
75 |
76 | <VStack gap="8px">
77 | <Text variant="strong">breakMode="anywhere"</Text>
78 | <Text
79 | width="150px"
80 | backgroundColor="lightyellow"
81 | padding="8px"
82 | breakMode="anywhere">
83 | Thistext willbreakanywhereif neededtofit thecontainer
84 | eveninthe middleofwords.
85 | </Text>
86 | </VStack>
87 |
88 | <VStack gap="8px">
89 | <Text variant="strong">breakMode="keep"</Text>
90 | <Text
91 | width="150px"
92 | backgroundColor="lightcoral"
93 | padding="8px"
94 | breakMode="keep">
95 | This text will keep verylongwords intact and prevent
96 | breaking within words entirely.
97 | </Text>
98 | </VStack>
99 |
100 | <VStack gap="8px">
101 | <Text variant="strong">breakMode="hyphenate"</Text>
102 | <Text
103 | width="150px"
104 | backgroundColor="lavender"
105 | padding="8px"
106 | breakMode="hyphenate"
107 | lang="en">
108 | This text uses automatic hyphenation for
109 | supercalifragilisticexpialidocious words.
110 | </Text>
111 | </VStack>
112 | </VStack>
113 | </App>
114 | ```
115 |
116 | ### `ellipses` (default: true) [#ellipses-default-true]
117 |
118 | This property indicates whether ellipses should be displayed when the text is cropped (`true`) or not (`false`).
119 |
120 | ```xmlui-pg copy display name="Example: ellipses"
121 | <App>
122 | <VStack width="120px">
123 | <Text
124 | backgroundColor="cyan"
125 | color="black"
126 | maxLines="1"
127 | ellipses="false">
128 | Though this long text does is about to crop!
129 | </Text>
130 | <Text
131 | backgroundColor="cyan"
132 | color="black"
133 | maxLines="1">
134 | Though this long text does is about to crop!
135 | </Text>
136 | </VStack>
137 | </App>
138 | ```
139 |
140 | ### `maxLines` [#maxlines]
141 |
142 | This property determines the maximum number of lines the component can wrap to. If there is no space to display all the contents, the component displays up to as many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines.
143 |
144 | ```xmlui-pg copy display name="Example: maxLines"
145 | <App>
146 | <Text
147 | maxWidth="120px"
148 | backgroundColor="cyan"
149 | color="black"
150 | value="A long text that will likely overflow"
151 | maxLines="2" />
152 | </App>
153 | ```
154 |
155 | ### `overflowMode` (default: "not specified") [#overflowmode-default-not-specified]
156 |
157 | This property controls how text overflow is handled. `none` prevents wrapping and shows no overflow indicator, `ellipsis` shows ellipses when text is truncated, `scroll` forces single line with horizontal scrolling, and `flow` allows multi-line wrapping with vertical scrolling when needed (ignores maxLines). When not specified, uses the default text behavior.
158 |
159 | Available values:
160 |
161 | | Value | Description |
162 | | --- | --- |
163 | | `none` | No wrapping, text stays on a single line with no overflow indicator |
164 | | `ellipsis` | Truncates with an ellipsis (default) |
165 | | `scroll` | Forces single line with horizontal scrolling when content overflows |
166 | | `flow` | Allows text to wrap into multiple lines with vertical scrolling when container height is constrained (ignores maxLines) |
167 |
168 | ```xmlui-pg copy display name="Example: overflowMode"
169 | <App>
170 | <VStack gap="16px">
171 | <VStack gap="8px">
172 | <Text variant="strong">overflowMode="none"</Text>
173 | <Text
174 | width="200px"
175 | backgroundColor="lightcoral"
176 | padding="8px"
177 | overflowMode="none"
178 | maxLines="2">
179 | This is a very long text that will be clipped cleanly without
180 | any overflow indicator when it exceeds the specified lines.
181 | </Text>
182 | </VStack>
183 |
184 | <VStack gap="8px">
185 | <Text variant="strong">overflowMode="ellipsis" (default)</Text>
186 | <Text
187 | width="200px"
188 | backgroundColor="lightblue"
189 | padding="8px"
190 | overflowMode="ellipsis"
191 | maxLines="1">
192 | This is a very long text that will show ellipsis when it
193 | overflows the container width.
194 | </Text>
195 | </VStack>
196 |
197 | <VStack gap="8px">
198 | <Text variant="strong">overflowMode="scroll"</Text>
199 | <Text
200 | width="200px"
201 | backgroundColor="lightgreen"
202 | padding="8px"
203 | overflowMode="scroll">
204 | This is a very long text that will enable horizontal scrolling
205 | when it overflows the container width.
206 | </Text>
207 | </VStack>
208 |
209 | <VStack gap="8px">
210 | <Text variant="strong">overflowMode="flow"</Text>
211 | <Text
212 | width="200px"
213 | height="100px"
214 | backgroundColor="lightyellow"
215 | padding="8px"
216 | overflowMode="flow">
217 | This is a very long text that will wrap to multiple lines and show
218 | a vertical scrollbar when the content exceeds the container height.
219 | This mode ignores maxLines and allows unlimited text wrapping with
220 | vertical scrolling when needed.
221 | </Text>
222 | </VStack>
223 |
224 | <VStack gap="8px">
225 | <Text variant="strong">overflowMode="flow" (no height constraint)</Text>
226 | <Text
227 | width="200px"
228 | backgroundColor="lightpink"
229 | padding="8px"
230 | overflowMode="flow">
231 | This is a very long text that demonstrates flow mode without a
232 | height constraint. The text will wrap to multiple lines naturally
233 | and the container will grow to accommodate all the content. No
234 | scrollbar will appear since there's no height limitation - the text
235 | flows freely across as many lines as needed.
236 | </Text>
237 | </VStack>
238 | </VStack>
239 | </App>
240 | ```
241 |
242 | ### `preserveLinebreaks` (default: false) [#preservelinebreaks-default-false]
243 |
244 | This property indicates if linebreaks should be preserved when displaying text.
245 |
246 | ```xmlui-pg copy {7} display name="Example: preserveLinebreaks"
247 | <App>
248 | <HStack>
249 | <Text
250 | width="250px"
251 | backgroundColor="cyan"
252 | color="black"
253 | preserveLinebreaks="true"
254 | value="(preserve) This long text
255 |
256 | with several line breaks
257 |
258 | does not fit into a viewport with a 200-pixel width." />
259 | <Text
260 | width="250px"
261 | backgroundColor="cyan"
262 | color="black"
263 | preserveLinebreaks="false"
264 | value="(don't preserve) This long text
265 |
266 | with several line breaks
267 |
268 | does not fit into a viewport with a 200-pixel width." />
269 | </HStack>
270 | </App>
271 | ```
272 |
273 | > **Note**: Remember to use the `value` property of the `Text`.
274 | > Linebreaks are converted to spaces when nesting the text inside the `Text` component.
275 |
276 | ### `value` [#value]
277 |
278 | The text to be displayed. This value can also be set via nesting the text into the `Text` component.
279 |
280 | ```xmlui-pg copy display name="Example: value"
281 | <App>
282 | <Text value="An example text" />
283 | <Text>An example text</Text>
284 | </App>
285 | ```
286 |
287 | ### `variant` [#variant]
288 |
289 | An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context. In addition to predefined variants, you can specify custom variant names and style them using theme variables with the pattern `{cssProperty}-Text-{variantName}` (e.g., `textColor-Text-brandTitle`, `fontSize-Text-highlight`). See the documentation for a complete list of supported CSS properties.
290 |
291 | Available values:
292 |
293 | | Value | Description |
294 | | --- | --- |
295 | | `abbr` | Represents an abbreviation or acronym |
296 | | `caption` | Represents the caption (or title) of a table |
297 | | `cite` | Is used to mark up the title of a cited work |
298 | | `code` | Represents a line of code |
299 | | `deleted` | Represents text that has been deleted |
300 | | `em` | Marks text to stress emphasis |
301 | | `inherit` | Represents text that inherits the style from its parent element |
302 | | `inserted` | Represents a range of text that has been added to a document |
303 | | `keyboard` | Represents a span of text denoting textual user input from a keyboard or voice input |
304 | | `marked` | Represents text which is marked or highlighted for reference or notation |
305 | | `mono` | Text using a mono style font family |
306 | | `paragraph` | Represents a paragraph |
307 | | `placeholder` | Text that is mostly used as the placeholder style in input controls |
308 | | `sample` | Represents sample (or quoted) output from a computer program |
309 | | `secondary` | Represents a bit dimmed secondary text |
310 | | `small` | Represents side-comments and small print |
311 | | `sub` | Specifies inline text as subscript |
312 | | `strong` | Contents have strong importance |
313 | | `subheading` | Indicates that the text is the subtitle in a heading |
314 | | `subtitle` | Indicates that the text is the subtitle of some other content |
315 | | `sup` | Specifies inline text as superscript |
316 | | `tableheading` | Indicates that the text is a table heading |
317 | | `title` | Indicates that the text is the title of some other content |
318 | | `var` | Represents the name of a variable in a mathematical expression |
319 |
320 | ```xmlui-pg name="Example: variant"
321 | <App>
322 | <HStack>
323 | <Text width="150px">default:</Text>
324 | <Text>This is an example text</Text>
325 | </HStack>
326 | <HStack>
327 | <Text width="150px">paragraph:</Text>
328 | <Text variant="paragraph">This is an example paragraph</Text>
329 | </HStack>
330 | <HStack>
331 | <Text width="150px">abbr:</Text>
332 | <Text variant="abbr">
333 | This is an example text
334 | </Text>
335 | </HStack>
336 | <HStack>
337 | <Text width="150px">cite:</Text>
338 | <Text variant="cite">
339 | This is an example text
340 | </Text>
341 | </HStack>
342 | <HStack>
343 | <Text width="150px">code:</Text>
344 | <Text variant="code">
345 | This is an example text
346 | </Text>
347 | </HStack>
348 | <HStack>
349 | <Text width="150px">deleted:</Text>
350 | <Text variant="deleted">
351 | This is an example text
352 | </Text>
353 | </HStack>
354 | <HStack>
355 | <Text width="150px">inserted:</Text>
356 | <Text variant="inserted">
357 | This is an example text
358 | </Text>
359 | </HStack>
360 | <HStack>
361 | <Text width="150px">keyboard:</Text>
362 | <Text variant="keyboard">
363 | This is an example text
364 | </Text>
365 | </HStack>
366 | <HStack>
367 | <Text width="150px">marked:</Text>
368 | <Text variant="marked">
369 | This is an example text
370 | </Text>
371 | </HStack>
372 | <HStack>
373 | <Text width="150px">sample:</Text>
374 | <Text variant="sample">
375 | This is an example text
376 | </Text>
377 | </HStack>
378 | <HStack>
379 | <Text width="150px">sup:</Text>
380 | <Text>
381 | This is an example text
382 | <Text variant="sup">(with some additional text)</Text>
383 | </Text>
384 | </HStack>
385 | <HStack>
386 | <Text width="150px">sub:</Text>
387 | <Text>
388 | This is an example text
389 | <Text variant="sub">(with some additional text)</Text>
390 | </Text>
391 | </HStack>
392 | <HStack>
393 | <Text width="150px">var:</Text>
394 | <Text variant="var">
395 | This is an example text
396 | </Text>
397 | </HStack>
398 | <HStack>
399 | <Text width="150px">mono:</Text>
400 | <Text variant="mono">
401 | This is an example text
402 | </Text>
403 | </HStack>
404 | <HStack>
405 | <Text width="150px">strong:</Text>
406 | <Text variant="strong">
407 | This is an example text
408 | </Text>
409 | </HStack>
410 | <HStack>
411 | <Text width="150px">em:</Text>
412 | <Text variant="em">
413 | This is an example text
414 | </Text>
415 | </HStack>
416 | <HStack>
417 | <Text width="150px">title:</Text>
418 | <Text variant="title">
419 | This is an example text
420 | </Text>
421 | </HStack>
422 | <HStack>
423 | <Text width="150px">subtitle:</Text>
424 | <Text variant="subtitle">
425 | This is an example text
426 | </Text>
427 | </HStack>
428 | <HStack>
429 | <Text width="150px">small:</Text>
430 | <Text variant="small">
431 | This is an example text
432 | </Text>
433 | </HStack>
434 | <HStack>
435 | <Text width="150px">caption:</Text>
436 | <Text variant="caption">
437 | This is an example text
438 | </Text>
439 | </HStack>
440 | <HStack>
441 | <Text width="150px">placeholder:</Text>
442 | <Text variant="placeholder">
443 | This is an example text
444 | </Text>
445 | </HStack>
446 | <HStack>
447 | <Text width="150px">subheading:</Text>
448 | <Text variant="subheading">
449 | This is an example text
450 | </Text>
451 | </HStack>
452 | <HStack>
453 | <Text width="150px">tableheading:</Text>
454 | <Text variant="tableheading">
455 | This is an example text
456 | </Text>
457 | </HStack>
458 | <HStack>
459 | <Text width="150px">secondary:</Text>
460 | <Text variant="secondary">
461 | This is an example text
462 | </Text>
463 | </HStack>
464 | </App>
465 | ```
466 |
467 | **HtmlTag Mappings**
468 |
469 | The table below indicates which Text `variant` maps to which HtmlTag component.
470 |
471 | | Variant | Component |
472 | | ----------- | --------- |
473 | | `abbr` | abbr |
474 | | `cite` | cite |
475 | | `code` | code |
476 | | `deleted` | del |
477 | | `inserted` | ins |
478 | | `keyboard` | kbd |
479 | | `marked` | mark |
480 | | `sample` | samp |
481 | | `sub` | sub |
482 | | `sup` | sup |
483 | | `var` | var |
484 | | `strong` | strong |
485 | | `em` | em |
486 | | `paragraph` | p |
487 |
488 | ## Events [#events]
489 |
490 | This component does not have any events.
491 |
492 | ## Exposed Methods [#exposed-methods]
493 |
494 | ### `hasOverflow` [#hasoverflow]
495 |
496 | Returns true when the displayed text overflows its container boundaries.
497 |
498 | **Signature**: `hasOverflow(): boolean`
499 |
500 | ## Styling [#styling]
501 |
502 | ### Custom Variant Theme Variables [#custom-variant-theme-variables]
503 |
504 | When using custom variants, you can style them using theme variables with the naming pattern `{propertyName}-Text-{variantName}`. The following CSS properties are supported:
505 |
506 | | Theme Variable Name | Description | Example Value |
507 | |---------------------|-------------|---------------|
508 | | `textColor-Text-{variant}` | Text color | `rgb(255, 0, 0)`, `#ff0000`, `red` |
509 | | `fontFamily-Text-{variant}` | Font family | `"Arial, sans-serif"`, `monospace` |
510 | | `fontSize-Text-{variant}` | Font size | `16px`, `1.5rem`, `large` |
511 | | `fontStyle-Text-{variant}` | Font style | `normal`, `italic`, `oblique` |
512 | | `fontWeight-Text-{variant}` | Font weight | `normal`, `bold`, `700` |
513 | | `fontStretch-Text-{variant}` | Font stretch | `normal`, `expanded`, `condensed` |
514 | | `textDecorationLine-Text-{variant}` | Decoration line type | `none`, `underline`, `overline`, `line-through` |
515 | | `textDecorationColor-Text-{variant}` | Decoration color | `rgb(255, 0, 0)`, `currentColor` |
516 | | `textDecorationStyle-Text-{variant}` | Decoration style | `solid`, `dashed`, `dotted`, `wavy` |
517 | | `textDecorationThickness-Text-{variant}` | Decoration thickness | `2px`, `from-font`, `auto` |
518 | | `textUnderlineOffset-Text-{variant}` | Underline offset | `5px`, `0.2em`, `auto` |
519 | | `lineHeight-Text-{variant}` | Line height | `1.5`, `24px`, `normal` |
520 | | `backgroundColor-Text-{variant}` | Background color | `rgb(255, 255, 0)`, `transparent` |
521 | | `textTransform-Text-{variant}` | Text transformation | `none`, `uppercase`, `lowercase`, `capitalize` |
522 | | `letterSpacing-Text-{variant}` | Space between letters | `1px`, `0.1em`, `normal` |
523 | | `wordSpacing-Text-{variant}` | Space between words | `5px`, `0.2em`, `normal` |
524 | | `textShadow-Text-{variant}` | Text shadow | `2px 2px 4px rgba(0,0,0,0.5)` |
525 | | `textIndent-Text-{variant}` | First line indentation | `20px`, `2em`, `0` |
526 | | `textAlign-Text-{variant}` | Horizontal alignment | `left`, `center`, `right`, `justify` |
527 | | `textAlignLast-Text-{variant}` | Last line alignment | `left`, `center`, `right`, `justify` |
528 | | `wordBreak-Text-{variant}` | Word breaking behavior | `normal`, `break-all`, `keep-all` |
529 | | `wordWrap-Text-{variant}` | Word wrapping | `normal`, `break-word` |
530 | | `direction-Text-{variant}` | Text direction | `ltr`, `rtl` |
531 | | `writingMode-Text-{variant}` | Writing mode | `horizontal-tb`, `vertical-rl`, `vertical-lr` |
532 | | `lineBreak-Text-{variant}` | Line breaking rules | `auto`, `normal`, `strict`, `loose` |
533 |
534 | ```xmlui-pg display name="Example: custom variant styles" /highlight/
535 | <App>
536 | <Theme
537 | textColor-Text-highlight="rgb(255, 193, 7)"
538 | fontWeight-Text-highlight="bold"
539 | backgroundColor-Text-highlight="rgba(0, 0, 0, 0.8)"
540 | padding-Text-highlight="4px 8px"
541 | textShadow-Text-highlight="0 2px 4px rgba(0,0,0,0.5)"
542 | >
543 | <Text variant="highlight">Important Notice</Text>
544 | <Text variant="highlight">This is Important Too</Text>
545 | </Theme>
546 | </App>
547 | ```
548 |
549 | ### Theme Variables [#theme-variables]
550 |
551 | | Variable | Default Value (Light) | Default Value (Dark) |
552 | | --- | --- | --- |
553 | | [backgroundColor](../styles-and-themes/common-units/#color)-Text | *none* | *none* |
554 | | [backgroundColor](../styles-and-themes/common-units/#color)-Text-code | rgb(from $color-surface-100 r g b / 0.4) | rgb(from $color-surface-100 r g b / 0.4) |
555 | | [backgroundColor](../styles-and-themes/common-units/#color)-Text-keyboard | rgb(from $color-surface-100 r g b / 0.4) | rgb(from $color-surface-100 r g b / 0.4) |
556 | | [backgroundColor](../styles-and-themes/common-units/#color)-Text-marked | rgb(from $color-primary-200 r g b / 0.4) | rgb(from $color-primary-400 r g b / 0.4) |
557 | | [borderColor](../styles-and-themes/common-units/#color)-Text-code | $color-surface-100 | $color-surface-100 |
558 | | [borderColor](../styles-and-themes/common-units/#color)-Text-keyboard | $color-surface-300 | $color-surface-300 |
559 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Text | $borderRadius | $borderRadius |
560 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Text-code | 4px | 4px |
561 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Text-keyboard | *none* | *none* |
562 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Text | solid | solid |
563 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Text-code | solid | solid |
564 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Text-keyboard | *none* | *none* |
565 | | [borderWidth](../styles-and-themes/common-units/#size)-Text | $space-0 | $space-0 |
566 | | [borderWidth](../styles-and-themes/common-units/#size)-Text-code | 1px | 1px |
567 | | [borderWidth](../styles-and-themes/common-units/#size)-Text-keyboard | 1px | 1px |
568 | | [direction](../styles-and-themes/layout-props#direction)-Text | *none* | *none* |
569 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text | $fontFamily | $fontFamily |
570 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-code | $fontFamily-monospace | $fontFamily-monospace |
571 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-codefence | $fontFamily-monospace | $fontFamily-monospace |
572 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-keyboard | $fontFamily-monospace | $fontFamily-monospace |
573 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-mono | $fontFamily-monospace | $fontFamily-monospace |
574 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-sample | $fontFamily-monospace | $fontFamily-monospace |
575 | | [fontSize](../styles-and-themes/common-units/#size)-Text | $fontSize-sm | $fontSize-sm |
576 | | [fontSize](../styles-and-themes/common-units/#size)-Text-code | $fontSize-sm | $fontSize-sm |
577 | | [fontSize](../styles-and-themes/common-units/#size)-Text-codefence | $fontSize-code | $fontSize-code |
578 | | [fontSize](../styles-and-themes/common-units/#size)-Text-keyboard | $fontSize-sm | $fontSize-sm |
579 | | [fontSize](../styles-and-themes/common-units/#size)-Text-paragraph | *none* | *none* |
580 | | [fontSize](../styles-and-themes/common-units/#size)-Text-placeholder | $fontSize-xs | $fontSize-xs |
581 | | [fontSize](../styles-and-themes/common-units/#size)-Text-sample | $fontSize-sm | $fontSize-sm |
582 | | [fontSize](../styles-and-themes/common-units/#size)-Text-secondary | $fontSize-sm | $fontSize-sm |
583 | | [fontSize](../styles-and-themes/common-units/#size)-Text-small | $fontSize-sm | $fontSize-sm |
584 | | [fontSize](../styles-and-themes/common-units/#size)-Text-sub | $fontSize-xs | $fontSize-xs |
585 | | [fontSize](../styles-and-themes/common-units/#size)-Text-subheading | $fontSize-H6 | $fontSize-H6 |
586 | | [fontSize](../styles-and-themes/common-units/#size)-Text-subtitle | $fontSize-xl | $fontSize-xl |
587 | | [fontSize](../styles-and-themes/common-units/#size)-Text-sup | $fontSize-xs | $fontSize-xs |
588 | | [fontSize](../styles-and-themes/common-units/#size)-Text-tableheading | $fontSize-H6 | $fontSize-H6 |
589 | | [fontSize](../styles-and-themes/common-units/#size)-Text-title | $fontSize-2xl | $fontSize-2xl |
590 | | [fontStretch](../styles-and-themes/common-units/#fontStretch)-Text | *none* | *none* |
591 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text | *none* | *none* |
592 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-cite | italic | italic |
593 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-em | italic | italic |
594 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-marked | *none* | *none* |
595 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-placeholder | *none* | *none* |
596 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-subheading | *none* | *none* |
597 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-var | italic | italic |
598 | | [fontVariant](../styles-and-themes/common-units/#font-variant)-Text | *none* | *none* |
599 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text | $fontWeight-normal | $fontWeight-normal |
600 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-abbr | $fontWeight-bold | $fontWeight-bold |
601 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-keyboard | $fontWeight-bold | $fontWeight-bold |
602 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-marked | *none* | *none* |
603 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-placeholder | *none* | *none* |
604 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-strong | $fontWeight-bold | $fontWeight-bold |
605 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-subheading | $fontWeight-bold | $fontWeight-bold |
606 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-tableheading | $fontWeight-bold | $fontWeight-bold |
607 | | [letterSpacing](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
608 | | [letterSpacing](../styles-and-themes/common-units/#size)-Text-caption | 0.05rem | 0.05rem |
609 | | [letterSpacing](../styles-and-themes/common-units/#size)-Text-subheading | 0.04em | 0.04em |
610 | | [lineBreak](../styles-and-themes/common-units/#line-break)-Text | *none* | *none* |
611 | | [lineHeight](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
612 | | [lineHeight](../styles-and-themes/common-units/#size)-Text-codefence | 1.5 | 1.5 |
613 | | [lineHeight](../styles-and-themes/common-units/#size)-Text-marked | *none* | *none* |
614 | | [marginBottom](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
615 | | [marginBottom](../styles-and-themes/common-units/#size)-Text-code | *none* | *none* |
616 | | [marginBottom](../styles-and-themes/common-units/#size)-Text-small | *none* | *none* |
617 | | [marginBottom](../styles-and-themes/common-units/#size)-Text-tableheading | $space-4 | $space-4 |
618 | | [marginLeft](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
619 | | [marginLeft](../styles-and-themes/common-units/#size)-Text-code | *none* | *none* |
620 | | [marginLeft](../styles-and-themes/common-units/#size)-Text-small | *none* | *none* |
621 | | [marginRight](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
622 | | [marginRight](../styles-and-themes/common-units/#size)-Text-code | *none* | *none* |
623 | | [marginRight](../styles-and-themes/common-units/#size)-Text-small | *none* | *none* |
624 | | [marginTop](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
625 | | [marginTop](../styles-and-themes/common-units/#size)-Text-code | *none* | *none* |
626 | | [marginTop](../styles-and-themes/common-units/#size)-Text-small | *none* | *none* |
627 | | [marginTop](../styles-and-themes/common-units/#size)-Text-tableheading | $space-1 | $space-1 |
628 | | [paddingBottom](../styles-and-themes/common-units/#size)-Text-code | 2px | 2px |
629 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Text-code | $space-0_5 | $space-0_5 |
630 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Text-codefence | $space-4 | $space-4 |
631 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Text-keyboard | $space-1 | $space-1 |
632 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Text-tableheading | $space-1 | $space-1 |
633 | | [paddingVertical](../styles-and-themes/common-units/#size)-Text-codefence | $space-3 | $space-3 |
634 | | [paddingVertical](../styles-and-themes/common-units/#size)-Text-paragraph | $space-1 | $space-1 |
635 | | [textAlign](../styles-and-themes/common-units/#text-align)-Text | *none* | *none* |
636 | | [textAlignLast](../styles-and-themes/common-units/#text-align)-Text | *none* | *none* |
637 | | [textColor](../styles-and-themes/common-units/#color)-Text | $textColor-primary | $textColor-primary |
638 | | [textColor](../styles-and-themes/common-units/#color)-Text--hover | *none* | *none* |
639 | | [textColor](../styles-and-themes/common-units/#color)-Text-code--hover | *none* | *none* |
640 | | [textColor](../styles-and-themes/common-units/#color)-Text-codefence | $color-surface-900 | $color-surface-900 |
641 | | [textColor](../styles-and-themes/common-units/#color)-Text-marked | *none* | *none* |
642 | | [textColor](../styles-and-themes/common-units/#color)-Text-placeholder | $color-surface-500 | $color-surface-500 |
643 | | [textColor](../styles-and-themes/common-units/#color)-Text-secondary | $textColor-secondary | $textColor-secondary |
644 | | [textColor](../styles-and-themes/common-units/#color)-Text-small--hover | *none* | *none* |
645 | | [textColor](../styles-and-themes/common-units/#color)-Text-subheading | $textColor-secondary | $textColor-secondary |
646 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Text | *none* | *none* |
647 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Text-deleted | *none* | *none* |
648 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Text-inserted | *none* | *none* |
649 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-Text | *none* | *none* |
650 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-Text-deleted | line-through | line-through |
651 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-Text-inserted | underline | underline |
652 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-Text | *none* | *none* |
653 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-Text-deleted | *none* | *none* |
654 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-Text-inserted | *none* | *none* |
655 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-Text | *none* | *none* |
656 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-Text-deleted | *none* | *none* |
657 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-Text-inserted | *none* | *none* |
658 | | [textIndent](../styles-and-themes/common-units/#text-indent)-Text | *none* | *none* |
659 | | [textShadow](../styles-and-themes/common-units/#text-shadow)-Text | *none* | *none* |
660 | | [textTransform](../styles-and-themes/common-units/#textTransform)-Text | *none* | *none* |
661 | | [textTransform](../styles-and-themes/common-units/#textTransform)-Text-abbr | uppercase | uppercase |
662 | | [textTransform](../styles-and-themes/common-units/#textTransform)-Text-subheading | uppercase | uppercase |
663 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
664 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text | *none* | *none* |
665 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text-code | *none* | *none* |
666 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text-small | *none* | *none* |
667 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text-sub | sub | sub |
668 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text-sup | super | super |
669 | | [wordBreak](../styles-and-themes/common-units/#word-break)-Text | *none* | *none* |
670 | | [wordSpacing](../styles-and-themes/common-units/#word-spacing)-Text | *none* | *none* |
671 | | [wordWrap](../styles-and-themes/common-units/#word-wrap)-Text | *none* | *none* |
672 | | [writingMode](../styles-and-themes/common-units/#writing-mode)-Text | *none* | *none* |
673 |
```
