This is page 82 of 144. Use http://codebase.md/xmlui-org/xmlui/xmlui/tools/vscode/resources/xmlui-markup-syntax-highlighting.png?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── cyan-tools-design.md
│ ├── every-moments-teach.md
│ ├── fancy-laws-drop.md
│ ├── full-symbols-accept.md
│ └── tricky-zoos-crash.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── 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
│ │ │ └── test-padding.xmlui
│ │ ├── 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/tests/components-core/theming/layout-vp-override.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { resolveLayoutProps } from "../../../src/components-core/theming/layout-resolver";
type TestDescriptor = {
category: string;
props: string[];
cssProps?: Record<string, string>;
baseValue: string;
overrideValue: string;
override2Value: string;
};
const testDescriptors: TestDescriptor[] = [
{
category: "size",
props: [
"width",
"minWidth",
"maxWidth",
"height",
"minHeight",
"maxHeight",
"top",
"right",
"bottom",
"left",
"gap",
"padding",
"paddingTop",
"paddingRight",
"paddingBottom",
"paddingLeft",
"margin",
"marginTop",
"marginRight",
"marginBottom",
"marginLeft",
"letterSpacing",
"fontSize",
"lineHeight"
],
baseValue: "12px",
overrideValue: "123px",
override2Value: "456px",
},
{
category: "border",
props: ["border", "borderTop", "borderRight", "borderBottom", "borderLeft"],
baseValue: "1px solid red",
overrideValue: "2px solid blue",
override2Value: "3px solid green",
},
{
category: "borderRadius",
props: ["borderRadius", "radiusTopLeft", "radiusTopRight", "radiusBottomRight", "radiusBottomLeft"],
cssProps: {
borderRadius: "borderRadius",
radiusTopLeft: "borderTopLeftRadius",
radiusTopRight: "borderTopRightRadius",
radiusBottomRight: "borderBottomRightRadius",
radiusBottomLeft: "borderBottomLeftRadius",
},
baseValue: "12px",
overrideValue: "123px",
override2Value: "456px",
},
{
category: "color",
props: ["backgroundColor", "background", "color"],
baseValue: "red",
overrideValue: "blue",
override2Value: "green",
},
{
category: "boxShadow",
props: ["boxShadow"],
baseValue: "1px 1px 1px 1px red",
overrideValue: "2px 2px 2px 2px blue",
override2Value: "3px 3px 3px 3px green",
},
{
category: "direction",
props: ["direction"],
baseValue: "rtl",
overrideValue: "ltr",
override2Value: "rtl",
},
{
category: "overflow",
props: ["overflowX", "overflowY"],
cssProps: {
overflowX: "overflowX",
overflowY: "overflowY",
},
baseValue: "hidden",
overrideValue: "visible",
override2Value: "scroll",
},
{
category: "zIndex",
props: ["zIndex"],
baseValue: "1",
overrideValue: "2",
override2Value: "3",
},
{
category: "opacity",
props: ["opacity"],
baseValue: "0.5",
overrideValue: "0.7",
override2Value: "0.9",
},
{
category: "fontFamily",
props: ["fontFamily"],
baseValue: "Arial",
overrideValue: "'Times New Roman'",
override2Value: "'Courier New'",
},
{
category: "fontWeight",
props: ["fontWeight"],
baseValue: "normal",
overrideValue: "bold",
override2Value: "bolder",
},
{
category: "textDecoration",
props: ["textDecoration"],
baseValue: "none",
overrideValue: "underline",
override2Value: "line-through",
},
{
category: "userSelect",
props: ["userSelect"],
baseValue: "none",
overrideValue: "text",
override2Value: "all",
},
{
category: "textTransform",
props: ["textTransform"],
baseValue: "uppercase",
overrideValue: "lowercase",
override2Value: "capitalize",
},
{
category: "textAlign",
props: ["textAlign","textAlignLast"],
baseValue: "center",
overrideValue: "left",
override2Value: "right",
},
{
category: "cursor",
props: ["cursor"],
baseValue: "pointer",
overrideValue: "default",
override2Value: "none",
}
];
testDescriptors.forEach((td) => {
describe(`Style compiler viewport (${td.category})`, () => {
// --- width
td.props.forEach((c) => {
it(`${c}, ${c}-xs (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-sm (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-sm (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
});
it(`${c}, ${c}-sm (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-sm (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-sm (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-sm (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-sm (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-md (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-md (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-md (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-md (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-md (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-md (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xl (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xl (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xl (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xl (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xl (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xl (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xxl (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xxl (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xxl (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xxl (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xxl (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xxl (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-md (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-md (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.override2Value);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-md (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.override2Value);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-md (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-md (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-md (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-xl (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-xl (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-xl (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-xl (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-xl (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.override2Value);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-xs, ${c}-xl (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.override2Value);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg, ${c}-xxl (xs)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
{ mediaSize: { sizeIndex: 0 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg, ${c}-xxl (sm)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
{ mediaSize: { sizeIndex: 1 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg, ${c}-xxl (md)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
{ mediaSize: { sizeIndex: 2 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.baseValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg, ${c}-xxl (lg)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
{ mediaSize: { sizeIndex: 3 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg, ${c}-xxl (xl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
{ mediaSize: { sizeIndex: 4 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.overrideValue);
expect(result.issues.has(propName)).toBe(false);
});
it(`${c}, ${c}-lg, ${c}-xxl (xxl)`, () => {
const result = resolveLayoutProps(
{ [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
{ mediaSize: { sizeIndex: 5 } },
);
const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
expect(result.cssProps[propName]).equal(td.override2Value);
expect(result.issues.has(propName)).toBe(false);
});
});
});
});
```
--------------------------------------------------------------------------------
/xmlui/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
# xmlui
## 0.11.5
### Patch Changes
- 10d755e: refactor: xmlui-playground - design update
- b3a4194: Fixed a case where if the data provided to a Table did not have 'id' attributes, the row selection would not work correctly.
## 0.11.4
### Patch Changes
- e384c59: Change validation status signature from having one dash to two dashes to better reflect that they are status modifiers. Ex. -default -> --default, -error -> --error
- f296904: Splitter now responds the visibility changes of its children
- f296904: Temporarily disable the "variant" behavior on Button
- be73336: fix: Select - use extractValue for controlled component value prop
## 0.11.3
### Patch Changes
- 4a311e2: improve: charts - better domain configuration
- f8a75ce: Tiny Splitter updates
- bbc421b: Text strong variant style fixed
## 0.11.2
### Patch Changes
- c1f306f: update package dependencies for tsx usage
## 0.11.1
### Patch Changes
- 7bbbb1d: Add the debounce function to globals
## 0.11.0
### Minor Changes
- 19145d2: xmlui builds with ESM
- 5109dce: Migrate from CommonJs to ESM internally. Lays the groundwork for exporting testing capabilities.
### Patch Changes
- fe503eb: Add enableSubmit to Form
- 06bb966: Fix TableOfContents styling
- e6b5810: fix: playground - app reset
- db94656: improve: bar/line chart spacing
- fe503eb: Queue now passes $queuedItems and $completedItems context variables to its event handlers
- 82ddbe7: Fix codefence first line indent style issue
- 75b701b: Extend form with hideButtonRow and FormItem with noSubmit
## 0.10.26
### Patch Changes
- e1b8d58: Heading now accepts "H1"..."H6", "1"..."6", too. Invalid values fall back to "h1".
- 1ad832c: Remove the showNavPanelIf property from AppHeader (fix NavPanel's "when" usage)
## 0.10.25
### Patch Changes
- e7c503e: refactor: Select - remove radix select
- 5fe3052: Fix the NavGroup click behavior in responsive view
- 5fe3052: Fix the $item access issue within a ModalDialog inside a Column
- 250647b: Fix the APICall becomes non-functional after first error when used with DataSource + Items + $item context issue
## 0.10.24
### Patch Changes
- 3e361c4: The xmlui-pg codefence now accepts emojies
- 3e361c4: Exend the formatDate, formatDateTime, and formatTime functions with optional format strings
## 0.10.23
### Patch Changes
- bf18444: Experiment with the "variant" behavior
- 6d3bb89: Form now has a willSubmit event (it can cancel the submit event)
- 89c69af: Fix the boolean conversion issue with showAnchor in Heading
- 4cfebf0: Fix loading code-behind files in standalone mode
- 145cd68: fix: pointer-events:none when using sibling Dialog
## 0.10.22
### Patch Changes
- 501f60a: The behavior infrastructure now uses ComponentProvider and allows adding custom behaviors
- 1020f1c: Extend Tab with the tabAlignment and accordionView properties
## 0.10.21
### Patch Changes
- 6fd4d62: Add custom Text variant styling
## 0.10.20
### Patch Changes
- 26eac90: fix: Autocomplete handles animations correctly
- f53edff: Add margin-related theme variables to ContentSeparator
- 1840916: Add applyIf property to Theme
- c6be7a3: fix: external animation is now correctly applied to ModalDialogs as well
- 6aaefaf: Added better error text when rendering FormItem outside of a Form.
- 28d2585: refactor: Select and AutoComplete components
- e29a231: The itemLabelWidth value of Form now supports theme variables ($space-\* values).
- 22162c0: AppState now uses a merge operation to set initialValue
- e90232b: fix: itemWithLabel - layout issue
## 0.10.19
### Patch Changes
- facb257: Add checkboxTolerance property to Table
- 6084c14: test: review onFocus, onBlur e2e tests
- e1fa9d7: Renamed the following properties in DatePicker: minValue -> startDate, maxValue -> endDate. Also updated component documentation.
## 0.10.18
### Patch Changes
- 202f2b2: refactor: use labelBehavior instead of ItemWithLabel
- 6650ee8: Add back removed RadioItem
- da98994: Fixed FormItem validation indicators to use a relaxed validation indication strategy.
- 8394663: fix: labelBehavior, input components - styling issue
## 0.10.17
### Patch Changes
- 07dae0b: fix: AccordionItem produces the right error outside of Accordion component
## 0.10.16
### Patch Changes
- 0ba6612: Undust and improve the Tree component
- 7b78052: Fixed Slider ranged version where only the first thumb is interactable.
- 314b429: improve: remove cmdk from autocomple, add keywords prop to option
- a1dea8f: fix: NumberBox initialValue ignores non-convertible string values, minValue and maxValue now applies to typed-in input as well as to increments / decrements with spinner buttons.
- cff754c: refactor: move behavior application earlier in ComponentAdapter render flow
## 0.10.15
### Patch Changes
- 3c8ad14: Add the data property to the Pdf component
- 5502fea: Add the "transform" layout property
- e08f0ba: Add syncWithAppState and initiallySelected properties to Table
- 5502fea: Fix MenuSeparator and SubMenuitem (forwardRef)
- db618b5: fix: NavGroup componenet's iconVertical{Expanded,Collapsed} properties now apply based on it's 'open' state. Only the Expanded one was present before the fix.
- a795b3d: Allow event handlers to use nested action components recursively
- 5851c02: feat: introducing behaviors - tooltip, animation, label
## 0.10.14
### Patch Changes
- 618049b: fix: Modal dialog scrolling issue
- 215a142: Allow image to accept binary data (and use it instead of src)
- 65b52e1: Allow user-defined components in extension packages
- 0cc2178: Fixed Slider input type, label focus, readOnly property, as well as min & max value issues.
- 53d4ed9: Fixed feature to add custom icons for the Carousel prev/next page buttons.
## 0.10.13
### Patch Changes
- 9401ee0: Added short debounce to ColorPicker to make changing color values with slider a bit smoother.
- eb62858: fix: assigning new properties to objects in xmlui script
- eb62858: fix: stricter empty body detection in RestApiProxy
- eb62858: fix: TextArea autofocus
- eb62858: fix: dropdownMenu overflow
- eb62858: fix: ability to use user defined components in triggerTemplate (dropdownMenu)
- eb62858: select: use focus-visible instead of focus for outline
- 243b7fa: fix: modal dialog/toast issue
- eb62858: form: hideButtonRowUntilDirty
## 0.10.12
### Patch Changes
- f12a042: fix: report errors in script tag
- 8731eb8: Avatar does not issue a resource URL warning when "url" is not specified
- eb6454f: refactor: change LineChart/BarChart property names
- 1210852: Fix the layout property usage of ModalDialog
## 0.10.11
### Patch Changes
- 8c76c8d: feat: style the error report colors and spaces in the browser for xmlui syntax errors
- d56c3e5: RadioGroup now correctly handles different types of initialValue property values, applies readOnly property, and places necessary ARIA tags if the required property is set. Clarified component reference description on how RadioGroup and Option handles value types.
- e42d367: Add FancyButton to xmlui-website-blocks
- f539526: feat: BarChart - add tooltip position tracking
- 19ce234: Review Option handling in Select and RadioGroup
- 455b6c0: feat: add animation support to all relevant components via animation and animationOptions props
- e90dc73: feat: add support for 'uses' property
- 819b563: Update fontSize and lineHeight themes and style (may break existing xmlui code)
- b57dfa2: Add the autoDetectTone property to App
- 9dd0f97: Update Checkbox and Switch with click event metadata
- 19ce234: Select accepts null as an option value; it converts a value to a string no longer
- 898346d: Extend Text and Heading APIs with hasOverflow
- 705dd04: Fix RestApiProxy to deliver response status when no error body specified
## 0.10.10
### Patch Changes
- fff80c5: Bump package version
## 0.10.9
### Patch Changes
- 879c09d: Component part handling and testing refactored
- 3ad8514: Added tooltip value display to Slider thumbs. Removed value display from Slider label.
- 0c69245: fix: virtualized list/table in ModalDialog
- 4ad31fc: refactor: rename dataKeys/nameKey to xKeys/yKey and layout to orientation in chart components - BarChart, LineChart
- c99f184: Fix ExpandableItem focus issue
- 5032e4a: Experimenting with HeroSection
- 2394f36: Enhance DateInput and TimeInput
## 0.10.8
### Patch Changes
- a4d62c4: Add experimental Timer component
- 7ed2918: Add the appendBlob function to the ApiInterceptor backend
## 0.10.7
### Patch Changes
- 664ea4f: Fixed BarChart hideTickY property to not remove the Y axis when set to true.
- a739a26: Fixed Checkbox and Switch visual issue. Fixed Line- and BarChart visual glitch in Table.
- bdb54dd: Small fixes for tiny bugs found during MyWorkDrive update
- 81724c6: Fixed BarChart tick labels not appearing.
## 0.10.6
### Patch Changes
- 6464ec8: fix ssr
## 0.10.5
### Patch Changes
- d38351d: fix missing dependency
## 0.10.4
### Patch Changes
- 43fd8c5: small fixes: Avatar, FileUploadDropzone, auto xsrf token handling
- 1df8e5d: Autocomplete: initiallyOpen prop
- 0d5d9d1: Reworked Pagination layout strategy. Provided props to better control layout: pageSizeSelectorPosition, pageInfoPosition, buttonRowPosition. These props are available in Table pagination as well.
- 3def673: DropdownMenu doesn't cooperate with Fragment triggerTemplate
- 428ebea: include themes.scss file in lib dist
- a12ce66: FileUploadDropZone fixes (dropPlaceholder disappeared)
## 0.10.3
### Patch Changes
- 2e512bb: Add solid overflow handling modes to Text
- 46d1d18: Remove the "codefence" Text variant
- 6bc9ed1: feat: support aligning cells in a Table row vertically
- 0b1f983: Add new, compound layout property name parsing
- a2637f3: Text is displayed as inline (you can nest Text into Text)
- eb4d592: Adding the "part" concept to native components
## 0.10.2
### Patch Changes
- ff14e15: fix: LineChart - sizing issue
- 1451a94: feat: make input padding configurable via theme variables
## 0.10.1
### Patch Changes
- 442416b: Refactor visual components to allow tooltip
- a018431: feat: add custom tooltip template support for Bar and Line charts
- 33cb547: Pagination component now handles itemCount being undefined/null. Introduced hasPrevPage and hasNextPage props to toggle button disabled state.
- b5d7537: Enhance the disabledDates property of DatePicker
## 0.10.0
### Minor Changes
- 000a311: Add tooltip behavior to visible components
- eb8b958: Rework inline styling system, prepare for responsive styling
### Patch Changes
- 6d0ce52: Added features to the Pagination component: page size selector dropdown control. Also added the following props: layout orientation and layout order reversal.
- 8c98f33: feat: add theme variable support for LineChart stroke width
- ef86593: feat: add didChange event handler to Tabs component
- da5f4e7: test: create e2e tests for chart components
- 47c7a2d: Integrated the new Pagination component with Table.
- 740f904: Add "activated" event to TabItem
- 5009c52: Add "parts" to component metadata
- 2f5ec32: Remove "from" from the list or reserved script keywords, as no longer used
## 0.9.101
### Patch Changes
- 791b0be: Experimenting with issuing release on larger GitHub machines
## 0.9.100
### Patch Changes
- 2dbf6d2: Added accessibility features, enabled prop and defaultThemeVars to Pagination. Also created E2E test cases for Pagination
## 0.9.99
### Patch Changes
- e5a09fb: Added a separate Pagination component with events and API methods for custom pagination.
- 36360f6: improve: add tickFormatterY to LineChart, create e2e tests
## 0.9.98
### Patch Changes
- ff781f3: new internal react component for integrating into existing react applications (StandaloneComponent)
- 377f0f2: Fix image animation issue in Carousel
- ce0ff76: Added hover & active styles for Slider on thumb. FileInput opens file browser on label focus.
- 208768a: Fixed input adornments not changing color on setting their respective theme variable. Spinbox buttons in NumberBox now have role=spinbutton.
## 0.9.97
### Patch Changes
- f7e8019: Implement simple IFrame APIs
## 0.9.96
### Patch Changes
- 3196156: Add IFrame component (first prototype)
- cfee78a: NumberBox tweaks: fixed missing padding theme var, fixed incorrect label association.
- f51002a: fix: Tabs - descendant button warning
- 3fa52d9: fix: Table sortBy now works as expected
## 0.9.95
### Patch Changes
- af6a7a0: fix: Tabs - fixed the inconsistency in the headerTemplate.
- 69a2a8f: Fix the useEventHaddler hook
- 29c68fe: fix: H1 ... H6 now ignores the level property
## 0.9.94
### Patch Changes
- 1d9365c: feat: Tabs component - use headerTemplate instead of labelTemplate/tabTemplate
## 0.9.93
### Patch Changes
- af17117: feat:add labelTemplate prop to TabItem component
- 44da3d9: The transformation of Checkbox and Switch values (to Booleans) are now documented and tested
- b7a6b9a: Fix formatHumanElapsedTime unit tests, make the local-independent
- bc95844: improve: Select and AutoComplete components
- 52d94a2: Fix the ComponentWrapper childrenAsTemplate issue
- 6629ce5: New end-to-end tests reviewed
- 0254471: Fixed the initialValue issue with TextArea
- 3318cfb: feat: provide context in browser error reports
## 0.9.92
### Patch Changes
- 347cda1: Review component e2e tests
## 0.9.91
### Patch Changes
- 6a7d779: Review Slot implementation
## 0.9.90
### Patch Changes
- 4b57f7e: Remove Spinner tests
## 0.9.89
### Patch Changes
- 2968eb9: fix initialValue handling in selects in forms
- 94f4eb5: safari regexp error workaround for optimized build, revert select inside form fix
- 8364c03: add new TextBox and TextArea test cases
## 0.9.88
### Patch Changes
- b79d7d8: Fix flaky Checkbox e2e tests
## 0.9.87
### Patch Changes
- 33846c2: Fix ios regex failure
## 0.9.86
### Patch Changes
- 48af60d: Temporarily suspend new checkbox e2e tests
## 0.9.85
### Patch Changes
- ee8d6ad: Fix "required" validation issue with "integer" and "number" FormItem
- 9ca7572: Extend the component API metadata with method signature and parameter descriptions
- 6944d2f: Add a scrollIntoView method to Heading
- c0c10e7: Added missing autoFocus feature and aria labels to Checkbox
- cbe1ef2: Use grammar and syntax highlight files straight form the xmlui package, instead of duplicating them in every app.
## 0.9.84
### Patch Changes
- c54abf3: update deps
## 0.9.83
### Patch Changes
- 8e3d6a3: Prevent the xmlui-optimizer to raise error on ShadowRoot
- 8644010: Add a scrollIntoView api to Bookmark
## 0.9.82
### Patch Changes
- 3bc29ae: fix: account for events with components inside them (like APICall) in a way that more syntax highlighters understand. VSCode worked fine, Shiki did not.
- 1101bf5: Fix a React warning in MarkdownNative (headingRef)
- cd8db58: Fixed ModalDialog overlay and fullScreen in nested apps. Now dialogs defined in nested apps stay inside them.
- 13beb58: Fixed ModalDialog context error when dialog is called from ApiCall or components using "confirm" in XMLUI code.
- 79c1d8a: fix: allow the playground to use the same tone as its source
## 0.9.81
### Patch Changes
- 59680b7: Allow configuring the initiallyShowCode flag in ComponentViewer
## 0.9.80
### Patch Changes
- 4598566: NumberBox and FromItem type="number" accepts numeric string as initialValue
- 14e6a7d: feat: add splitView to code inspection
- cf05bd2: Fix non-fatal StandaloneApp.tsx issue
## 0.9.79
### Patch Changes
- ad21a31: enhance treeshaking
## 0.9.78
### Patch Changes
- 94a68f0: Toggle password visibility in PasswordInput
- 94a68f0: Extend markdown to render compound headings with code spans and anchors
- 163a45c: Add ToneSwitch with icon customization
- 7ce528b: fix: BarChart - size management
- c6eb9a8: Fixed scrolling to specific Bookmarks inside nested apps.
## 0.9.77
### Patch Changes
- c867f38: Change split view startup animation
## 0.9.76
### Patch Changes
- aa08a8c: introducing ApiInterceptor->useWorker: true/false
- 15bf622: fix: add escaped \{ to textmate syntax, eliminate double extraction of props in FormItem causing bugs with escaped open curly brace being parsed as start of binding expression.
- 5761868: improve: BarChart - add tick formatter for X and Y axes
## 0.9.75
### Patch Changes
- c876be8: Turn docs deploy to standard routing
## 0.9.74
### Patch Changes
- 0043c5d: NestedApp new prop: withSplashScreen
## 0.9.73
### Patch Changes
- 88bf4f6: extend formatHumanElapsedTime with a short format flag
- fef53db: Allow specifying href targets with the markdown link tag
- 6167648: Fix the useMouseEventHandlers hook
- b2f4483: Fix missing code fence display
- e9040c6: Make the nested app's header smaller
## 0.9.72
### Patch Changes
- 4ab3b8a: add omitH1 to TableOfContents
- ac4a283: remove the AppWithCodeView component
- 38454c9: fix ApiInterceptor race conditions (inside NestedApps)
## 0.9.71
### Patch Changes
- 5774c53: fix ssr issues with Theme components
## 0.9.70
### Patch Changes
- 1da7847: Adjust CodeBlock theme variables for dark tone
## 0.9.69
### Patch Changes
- 9b36621: fix flaky Checkbox tests
## 0.9.68
### Patch Changes
- 9b1f718: change: add back the logo and the buttons to the xmlui-pg split view
- c79ced7: fix ssr hydration warn in AppWithCodeView
- d030ac2: A few theme variable defaults updated
- 21c4fd6: fix: mocked apis should work with multiple NestedApps
## 0.9.67
### Patch Changes
- 51a5b05: Small changes in a few component's metadata representation
- 9048af1: Remove the header logo and buttons from the AppWithCodeViewNative component
- 94f0e66: Accounted for some bad inputs in code fences when highlighting rows & substrings
- 3f0e6b0: fix memoization for tabs, pageInfo
## 0.9.66
### Patch Changes
- eae8145: Fixed Switch indicator positioning
- b6c64de: improve: charts - improved tick rendering
- 459bd3c: improve: Logo - add inline, alt props
- 96be435: feat: CodeBlock - add new themeVariables
## 0.9.65
### Patch Changes
- c17fc0d: fix the NestedAppNative.tsx issue introduced in #1547
## 0.9.64
### Patch Changes
- 5ad3ffc: Refactored the usage of theme variables in RadioGroup
- da3c8bc: Add a "noHeader" option to the xmlui-pg codefence
- 301cb39: Allow YAML (.yml) theme files in standalone apps
- d5d3f4d: Fixed Bar- & LineChart sizing in the Table component
## 0.9.63
### Patch Changes
- b9c0881: Fix: add a workaround to ListNative to avoid issues coming from undefined row values
## 0.9.62
### Patch Changes
- 832f31d: fix: nestedApp fills the available space in AppWithCode component
- 4f9ff06: Fix the build issue with FormSection
## 0.9.61
### Patch Changes
- 4ef5f3f: This version does not contain any real changes; it's just for bumping the version number.
## 0.9.60
### Patch Changes
- f37ed8c: Fine tune AppWithCodeView header
- 736dbc8: improve: AppWithCode - center the XML/UI buttons
- e2a6e1a: Add a popOutUrl="<url>" option to xmlui-pg to allow pop out to a custom playground location
## 0.9.59
### Patch Changes
- 2a07157: Rename Pages property 'defaultRoute' to 'fallbackPath'
- 97b3241: improve: expanding the styles of the components responsible for code display with new theme variables.
- c4abb20: Fixed RadioGroup disabled and validation indicator states. Also fixed an issue where the checked indicator was not aligned to center if the RadioGroup Option was resized in some way.
- f19720c: Added 0 min width to PieChart, Fixed focus error when one checkbox's state change depended on another
- 66c2288: Fixed NavLink indentation in horizontal App layout, if in a nested NavGroup in the NavPanel
- 2d27204: Fixed a number of color & visual state representations of the components: DatePicker, Switch, Select, TextBox, TextArea, NumberBox, AutoComplete
## 0.9.58
### Patch Changes
- dc43275: Fixed Pie- & DonutChart height property.
- f9562b5: make flowLayout auto-responsive behavior a bit smarter
- 1af11af: fix: eliminating the duplication of toast messages
- de570c2: Fixed number of small issues: Colorpicker now gets correct initial value, Options in Select now get correct keys, removed Tabs tabTemplate prop because of a bigger bug.
- 7d255a9: Changed open in new window button tooltip label for all occurrences.
- 69a7a1f: Fixed NavLink label break if overflowing available space.
- 873348c: new form properties: onSuccess, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage
- 46bfe72: default style tweaks
## 0.9.57
### Patch Changes
- 93a1e70: fix: NavPanel - use layoutCss
## 0.9.56
### Patch Changes
- 9a3c3b6: feat: xmlui-devtools - start dialog animation from the click, use exit animation as well
## 0.9.55
### Patch Changes
- d507ea8: Add AppWithCodeView component to display code and running app side-by-side
## 0.9.54
### Patch Changes
- 2688a95: Change TreeDisplay theme variable defaults
## 0.9.53
### Patch Changes
- c64fa25: Allow turning on/off heading anchors in appGlobals
- 73c2c21: wip: code inspector buttons - label change, devtools - animation update
## 0.9.52
### Patch Changes
- d079208: The Footer component no provides a themeable gap between its children.
- 2a461d8: feat: NestedApp works with ApiInterceptor
- ad6d81e: fix NestedApp apiUrl overwrite
- f5b9f15: feat: xmlui-devtools - use it in a modal dialog
- 88e4741: fix: Table columns do not allow (and indicate) sorting when bindTo is not set
- 7af4b4e: change default borderColor
- 851ae21: fix table styling
- 7872ed0: Default theme variables changed for App, NestedApp, TableOfContents, and Text
- bf00dce: enhance xmlui parser error tolerance, recovering from unclosed tags
- 38180ce: merge xmlui-charts into core
## 0.9.51
### Patch Changes
- ef7add9: Added theme variable for setting the horizontal alignment of the logo in the NavPanel.
- ba2b5cd: Moved Drawer logo position to left.
- 96273bf: fix: Slider - min/max value validation
- 1a81bcf: fix: Markdown renders inline/block images correclty
## 0.9.50
### Patch Changes
- e6c3b39: standalone usage: explicit codeBehind reference
- 85031c8: Make the "marked" Text variant have lighter background color in dark mode.
- d349036: Tweaked Search dropdown panel styles. Corrected Link component text and decoration hover and active colors
## 0.9.49
### Patch Changes
- 9afd588: fix: XmluiCodeHighlighter - update token colorizing (light/dark tone)
- Updated dependencies [3b5e820]
- [email protected]
## 0.9.48
### Patch Changes
- b5104b0: feat: Icon component now handles the click event
- 30d5c58: feat: Badge supports theme variable names in colormap
- 2e7f51f: change: the canSort property of Column defaults to true
- 4dd6d7f: feat: chart extension included by default
- f7f0571: fix theme component
## 0.9.47
### Patch Changes
- a5bef5d: feat: add "inherit" variant to Text
- ecc52d1: XMLUIExtensions namespace is optional
- 4322e1b: fix: search context scope
- 391927c: feat: add xmlui-tree codefence (displays a tree) to Markdown
## 0.9.46
### Patch Changes
- e20e867: improve: DatePicker - change chevrons, Slider - design updates, change drawer icon's padding
- 1f83bb2: Tables in Markdown scroll horizontally if there's not enough space.
- c433512: Removed close button from TextBox if type="search". Move the Search package from internal, add arrow key selection in search results and add use it in navigation drawer on small screens.
- bc68330: tweak search indexer
- ef3d208: improve: DatePicker - update chevrons
## 0.9.45
### Patch Changes
- de8d63c: Fixed small issues in CodeBlocks: adjusted row highlight length, substring highlight now works with '=' signs, corrected minor vertical positioning of code without syntax highlight, temporarily removed row numbering.
- bd6d1b4: experimental: runtime search indexing
- db5a5f4: fix: Allow APICall as an event handler
- 69b4402: improve: docs - footer logo, FormItem - labelBreak
## 0.9.44
### Patch Changes
- 3eab4a3: improve: design updates - devtools, playground, docs
- 411cd34: fix: inbound links to headers in markdown (anchor scroll slightly off)
- cdf96bb: fix: table inside flowlayout, horizontal scrollbar
- 121c55c: Changed the background color of the `marked` Text variant.
- f1092fe: Added emphasized substring highlights to CodeBlocks. Use it in markdown the following way: ```xmlui !/substr/
## 0.9.43
### Patch Changes
- e2324bb: fix prefetchedContent handling
- cacbf26: improve: AutoComplete - updating the selection logic, improved handling of readOnly and multi states, and removing unused or redundant code, improving tests
- 05c8dfe: test: DatePicker - fix e2e "disabled state prevents interaction"
- 42571db: test: create tests for the AutoComplete component, fix bugs
- 05205c7: Add diagnostics to language server
- 0a3d059: fix initial offset calculation for virtualized table/list
## 0.9.42
### Patch Changes
- 1ab3881: ssr fixes, experimental prefetchedContent
- 3d9729d: test: add tests for the DatePicker component
## 0.9.41
### Patch Changes
- 42416ba: test change for CI #2
## 0.9.40
### Patch Changes
- 34282f0: chage to test CI
## 0.9.39
### Patch Changes
- b79ca46: improve: DatePicker - design update, XmluiCodeHighlighter - use layoutCss
- bbec7a9: Added implicit code highlighter identification by Markdown if one is exposed under the name "codeHighlighter" in the appGlobals in config.
- e67762b: Replaced Admonition emojis with icons
## 0.9.38
### Patch Changes
- d314bad: msw update
## 0.9.37
### Patch Changes
- 1c33896: ssr fixes
- 8d662f3: Added anchor links for headings in markdown. Showing anchors is disabled by default, use the showHeadingAnchors prop on a Markdown component to use it.
## 0.9.36
### Patch Changes
- 6b0f2c1: fix: itemWithLabel fills the available width if no other value is specified
## 0.9.35
### Patch Changes
- ef3cd6e: Reworked NavLink & NavGroup styling: added disabled, hover & active states to button version
## 0.9.34
### Patch Changes
- bae8280: export NestedApp component
- 415aa66: Added color palette colors for CodeBlock, vertical NavPanel now has fixed scrollbar gutter, fixed vertical collapsed icon for NavGroup.
## 0.9.33
### Patch Changes
- dabeb53: Fixed NavPanel background color
## 0.9.32
### Patch Changes
- 4019d82: xmlui-playground, new exports from xmlui
- 450e1ee: feat: add aria-placeholder to Select component
## 0.9.31
### Patch Changes
- ed53215: test release
- ed53215: another testing
## 0.9.30
### Patch Changes
- b0ae113: testing
## 0.9.29
### Patch Changes
- f15c018: another testing
- f15c018: testing
## 0.9.28
### Patch Changes
- 421968b: testing
## 0.9.27
### Patch Changes
- 99bba69: testing
## 0.9.26
### Patch Changes
- bcf162c: testing changesets
```
