This is page 106 of 186. Use http://codebase.md/xmlui-org/xmlui/%7Bnode.props.src?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── cyan-tools-design.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
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/tests/components-core/theming/layout-vp-override.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 | import { resolveLayoutProps } from "../../../src/components-core/theming/layout-resolver";
3 |
4 | type TestDescriptor = {
5 | category: string;
6 | props: string[];
7 | cssProps?: Record<string, string>;
8 | baseValue: string;
9 | overrideValue: string;
10 | override2Value: string;
11 | };
12 |
13 | const testDescriptors: TestDescriptor[] = [
14 | {
15 | category: "size",
16 | props: [
17 | "width",
18 | "minWidth",
19 | "maxWidth",
20 | "height",
21 | "minHeight",
22 | "maxHeight",
23 | "top",
24 | "right",
25 | "bottom",
26 | "left",
27 | "gap",
28 | "padding",
29 | "paddingTop",
30 | "paddingRight",
31 | "paddingBottom",
32 | "paddingLeft",
33 | "margin",
34 | "marginTop",
35 | "marginRight",
36 | "marginBottom",
37 | "marginLeft",
38 | "letterSpacing",
39 | "fontSize",
40 | "lineHeight"
41 | ],
42 | baseValue: "12px",
43 | overrideValue: "123px",
44 | override2Value: "456px",
45 | },
46 | {
47 | category: "border",
48 | props: ["border", "borderTop", "borderRight", "borderBottom", "borderLeft"],
49 | baseValue: "1px solid red",
50 | overrideValue: "2px solid blue",
51 | override2Value: "3px solid green",
52 | },
53 | {
54 | category: "borderRadius",
55 | props: ["borderRadius", "radiusTopLeft", "radiusTopRight", "radiusBottomRight", "radiusBottomLeft"],
56 | cssProps: {
57 | borderRadius: "borderRadius",
58 | radiusTopLeft: "borderTopLeftRadius",
59 | radiusTopRight: "borderTopRightRadius",
60 | radiusBottomRight: "borderBottomRightRadius",
61 | radiusBottomLeft: "borderBottomLeftRadius",
62 | },
63 | baseValue: "12px",
64 | overrideValue: "123px",
65 | override2Value: "456px",
66 | },
67 | {
68 | category: "color",
69 | props: ["backgroundColor", "background", "color"],
70 | baseValue: "red",
71 | overrideValue: "blue",
72 | override2Value: "green",
73 | },
74 | {
75 | category: "boxShadow",
76 | props: ["boxShadow"],
77 | baseValue: "1px 1px 1px 1px red",
78 | overrideValue: "2px 2px 2px 2px blue",
79 | override2Value: "3px 3px 3px 3px green",
80 | },
81 | {
82 | category: "direction",
83 | props: ["direction"],
84 | baseValue: "rtl",
85 | overrideValue: "ltr",
86 | override2Value: "rtl",
87 | },
88 | {
89 | category: "overflow",
90 | props: ["overflowX", "overflowY"],
91 | cssProps: {
92 | overflowX: "overflowX",
93 | overflowY: "overflowY",
94 | },
95 | baseValue: "hidden",
96 | overrideValue: "visible",
97 | override2Value: "scroll",
98 | },
99 | {
100 | category: "zIndex",
101 | props: ["zIndex"],
102 | baseValue: "1",
103 | overrideValue: "2",
104 | override2Value: "3",
105 | },
106 | {
107 | category: "opacity",
108 | props: ["opacity"],
109 | baseValue: "0.5",
110 | overrideValue: "0.7",
111 | override2Value: "0.9",
112 | },
113 | {
114 | category: "fontFamily",
115 | props: ["fontFamily"],
116 | baseValue: "Arial",
117 | overrideValue: "'Times New Roman'",
118 | override2Value: "'Courier New'",
119 | },
120 | {
121 | category: "fontWeight",
122 | props: ["fontWeight"],
123 | baseValue: "normal",
124 | overrideValue: "bold",
125 | override2Value: "bolder",
126 | },
127 | {
128 | category: "textDecoration",
129 | props: ["textDecoration"],
130 | baseValue: "none",
131 | overrideValue: "underline",
132 | override2Value: "line-through",
133 | },
134 | {
135 | category: "userSelect",
136 | props: ["userSelect"],
137 | baseValue: "none",
138 | overrideValue: "text",
139 | override2Value: "all",
140 | },
141 | {
142 | category: "textTransform",
143 | props: ["textTransform"],
144 | baseValue: "uppercase",
145 | overrideValue: "lowercase",
146 | override2Value: "capitalize",
147 | },
148 | {
149 | category: "textAlign",
150 | props: ["textAlign","textAlignLast"],
151 | baseValue: "center",
152 | overrideValue: "left",
153 | override2Value: "right",
154 | },
155 | {
156 | category: "cursor",
157 | props: ["cursor"],
158 | baseValue: "pointer",
159 | overrideValue: "default",
160 | override2Value: "none",
161 | }
162 | ];
163 |
164 | testDescriptors.forEach((td) => {
165 | describe(`Style compiler viewport (${td.category})`, () => {
166 | // --- width
167 | td.props.forEach((c) => {
168 | it(`${c}, ${c}-xs (xs)`, () => {
169 | const result = resolveLayoutProps(
170 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
171 | { mediaSize: { sizeIndex: 0 } },
172 | );
173 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
174 | expect(result.cssProps[propName]).equal(td.overrideValue);
175 | expect(result.issues.has(propName)).toBe(false);
176 | });
177 |
178 | it(`${c}, ${c}-xs (sm)`, () => {
179 | const result = resolveLayoutProps(
180 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
181 | { mediaSize: { sizeIndex: 1 } },
182 | );
183 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
184 | expect(result.cssProps[propName]).equal(td.baseValue);
185 | expect(result.issues.has(propName)).toBe(false);
186 | });
187 |
188 | it(`${c}, ${c}-xs (md)`, () => {
189 | const result = resolveLayoutProps(
190 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
191 | { mediaSize: { sizeIndex: 2 } },
192 | );
193 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
194 | expect(result.cssProps[propName]).equal(td.baseValue);
195 | expect(result.issues.has(propName)).toBe(false);
196 | });
197 |
198 | it(`${c}, ${c}-xs (lg)`, () => {
199 | const result = resolveLayoutProps(
200 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
201 | { mediaSize: { sizeIndex: 3 } },
202 | );
203 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
204 | expect(result.cssProps[propName]).equal(td.baseValue);
205 | expect(result.issues.has(propName)).toBe(false);
206 | });
207 |
208 | it(`${c}, ${c}-xs (xl)`, () => {
209 | const result = resolveLayoutProps(
210 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
211 | { mediaSize: { sizeIndex: 4 } },
212 | );
213 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
214 | expect(result.cssProps[propName]).equal(td.baseValue);
215 | expect(result.issues.has(propName)).toBe(false);
216 | });
217 |
218 | it(`${c}, ${c}-xs (xxl)`, () => {
219 | const result = resolveLayoutProps(
220 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue },
221 | { mediaSize: { sizeIndex: 5 } },
222 | );
223 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
224 | expect(result.cssProps[propName]).equal(td.baseValue);
225 | expect(result.issues.has(propName)).toBe(false);
226 | });
227 |
228 | it(`${c}, ${c}-sm (xs)`, () => {
229 | const result = resolveLayoutProps(
230 | { [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
231 | { mediaSize: { sizeIndex: 0 } },
232 | );
233 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
234 | expect(result.cssProps[propName]).equal(td.overrideValue);
235 | expect(result.issues.has(propName)).toBe(false);
236 | });
237 |
238 | it(`${c}, ${c}-sm (sm)`, () => {
239 | const result = resolveLayoutProps(
240 | { [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
241 | { mediaSize: { sizeIndex: 1 } },
242 | );
243 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
244 | expect(result.cssProps[propName]).equal(td.overrideValue);
245 | });
246 |
247 | it(`${c}, ${c}-sm (sm)`, () => {
248 | const result = resolveLayoutProps(
249 | { [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
250 | { mediaSize: { sizeIndex: 1 } },
251 | );
252 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
253 | expect(result.cssProps[propName]).equal(td.overrideValue);
254 | expect(result.issues.has(propName)).toBe(false);
255 | });
256 |
257 | it(`${c}, ${c}-sm (md)`, () => {
258 | const result = resolveLayoutProps(
259 | { [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
260 | { mediaSize: { sizeIndex: 2 } },
261 | );
262 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
263 | expect(result.cssProps[propName]).equal(td.baseValue);
264 | expect(result.issues.has(propName)).toBe(false);
265 | });
266 |
267 | it(`${c}, ${c}-sm (lg)`, () => {
268 | const result = resolveLayoutProps(
269 | { [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
270 | { mediaSize: { sizeIndex: 3 } },
271 | );
272 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
273 | expect(result.cssProps[propName]).equal(td.baseValue);
274 | expect(result.issues.has(propName)).toBe(false);
275 | });
276 |
277 | it(`${c}, ${c}-sm (xl)`, () => {
278 | const result = resolveLayoutProps(
279 | { [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
280 | { mediaSize: { sizeIndex: 4 } },
281 | );
282 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
283 | expect(result.cssProps[propName]).equal(td.baseValue);
284 | expect(result.issues.has(propName)).toBe(false);
285 | });
286 |
287 | it(`${c}, ${c}-sm (xxl)`, () => {
288 | const result = resolveLayoutProps(
289 | { [c]: td.baseValue, [`${c}-sm`]: td.overrideValue },
290 | { mediaSize: { sizeIndex: 5 } },
291 | );
292 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
293 | expect(result.cssProps[propName]).equal(td.baseValue);
294 | expect(result.issues.has(propName)).toBe(false);
295 | });
296 |
297 | it(`${c}, ${c}-md (xs)`, () => {
298 | const result = resolveLayoutProps(
299 | { [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
300 | { mediaSize: { sizeIndex: 0 } },
301 | );
302 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
303 | expect(result.cssProps[propName]).equal(td.overrideValue);
304 | expect(result.issues.has(propName)).toBe(false);
305 | });
306 |
307 | it(`${c}, ${c}-md (sm)`, () => {
308 | const result = resolveLayoutProps(
309 | { [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
310 | { mediaSize: { sizeIndex: 1 } },
311 | );
312 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
313 | expect(result.cssProps[propName]).equal(td.overrideValue);
314 | expect(result.issues.has(propName)).toBe(false);
315 | });
316 |
317 | it(`${c}, ${c}-md (md)`, () => {
318 | const result = resolveLayoutProps(
319 | { [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
320 | { mediaSize: { sizeIndex: 2 } },
321 | );
322 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
323 | expect(result.cssProps[propName]).equal(td.overrideValue);
324 | expect(result.issues.has(propName)).toBe(false);
325 | });
326 |
327 | it(`${c}, ${c}-md (lg)`, () => {
328 | const result = resolveLayoutProps(
329 | { [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
330 | { mediaSize: { sizeIndex: 3 } },
331 | );
332 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
333 | expect(result.cssProps[propName]).equal(td.baseValue);
334 | expect(result.issues.has(propName)).toBe(false);
335 | });
336 |
337 | it(`${c}, ${c}-md (xl)`, () => {
338 | const result = resolveLayoutProps(
339 | { [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
340 | { mediaSize: { sizeIndex: 4 } },
341 | );
342 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
343 | expect(result.cssProps[propName]).equal(td.baseValue);
344 | expect(result.issues.has(propName)).toBe(false);
345 | });
346 |
347 | it(`${c}, ${c}-md (xxl)`, () => {
348 | const result = resolveLayoutProps(
349 | { [c]: td.baseValue, [`${c}-md`]: td.overrideValue },
350 | { mediaSize: { sizeIndex: 5 } },
351 | );
352 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
353 | expect(result.cssProps[propName]).equal(td.baseValue);
354 | expect(result.issues.has(propName)).toBe(false);
355 | });
356 |
357 | it(`${c}, ${c}-lg (xs)`, () => {
358 | const result = resolveLayoutProps(
359 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
360 | { mediaSize: { sizeIndex: 0 } },
361 | );
362 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
363 | expect(result.cssProps[propName]).equal(td.baseValue);
364 | expect(result.issues.has(propName)).toBe(false);
365 | });
366 |
367 | it(`${c}, ${c}-lg (sm)`, () => {
368 | const result = resolveLayoutProps(
369 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
370 | { mediaSize: { sizeIndex: 1 } },
371 | );
372 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
373 | expect(result.cssProps[propName]).equal(td.baseValue);
374 | expect(result.issues.has(propName)).toBe(false);
375 | });
376 |
377 | it(`${c}, ${c}-lg (md)`, () => {
378 | const result = resolveLayoutProps(
379 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
380 | { mediaSize: { sizeIndex: 2 } },
381 | );
382 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
383 | expect(result.cssProps[propName]).equal(td.baseValue);
384 | expect(result.issues.has(propName)).toBe(false);
385 | });
386 |
387 | it(`${c}, ${c}-lg (lg)`, () => {
388 | const result = resolveLayoutProps(
389 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
390 | { mediaSize: { sizeIndex: 3 } },
391 | );
392 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
393 | expect(result.cssProps[propName]).equal(td.overrideValue);
394 | expect(result.issues.has(propName)).toBe(false);
395 | });
396 |
397 | it(`${c}, ${c}-lg (xl)`, () => {
398 | const result = resolveLayoutProps(
399 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
400 | { mediaSize: { sizeIndex: 4 } },
401 | );
402 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
403 | expect(result.cssProps[propName]).equal(td.overrideValue);
404 | expect(result.issues.has(propName)).toBe(false);
405 | });
406 |
407 | it(`${c}, ${c}-lg (xxl)`, () => {
408 | const result = resolveLayoutProps(
409 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue },
410 | { mediaSize: { sizeIndex: 5 } },
411 | );
412 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
413 | expect(result.cssProps[propName]).equal(td.overrideValue);
414 | expect(result.issues.has(propName)).toBe(false);
415 | });
416 |
417 | it(`${c}, ${c}-xl (xs)`, () => {
418 | const result = resolveLayoutProps(
419 | { [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
420 | { mediaSize: { sizeIndex: 0 } },
421 | );
422 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
423 | expect(result.cssProps[propName]).equal(td.baseValue);
424 | expect(result.issues.has(propName)).toBe(false);
425 | });
426 |
427 | it(`${c}, ${c}-xl (sm)`, () => {
428 | const result = resolveLayoutProps(
429 | { [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
430 | { mediaSize: { sizeIndex: 1 } },
431 | );
432 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
433 | expect(result.cssProps[propName]).equal(td.baseValue);
434 | expect(result.issues.has(propName)).toBe(false);
435 | });
436 |
437 | it(`${c}, ${c}-xl (md)`, () => {
438 | const result = resolveLayoutProps(
439 | { [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
440 | { mediaSize: { sizeIndex: 2 } },
441 | );
442 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
443 | expect(result.cssProps[propName]).equal(td.baseValue);
444 | expect(result.issues.has(propName)).toBe(false);
445 | });
446 |
447 | it(`${c}, ${c}-xl (lg)`, () => {
448 | const result = resolveLayoutProps(
449 | { [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
450 | { mediaSize: { sizeIndex: 3 } },
451 | );
452 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
453 | expect(result.cssProps[propName]).equal(td.baseValue);
454 | expect(result.issues.has(propName)).toBe(false);
455 | });
456 |
457 | it(`${c}, ${c}-xl (xl)`, () => {
458 | const result = resolveLayoutProps(
459 | { [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
460 | { mediaSize: { sizeIndex: 4 } },
461 | );
462 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
463 | expect(result.cssProps[propName]).equal(td.overrideValue);
464 | expect(result.issues.has(propName)).toBe(false);
465 | });
466 |
467 | it(`${c}, ${c}-xl (xxl)`, () => {
468 | const result = resolveLayoutProps(
469 | { [c]: td.baseValue, [`${c}-xl`]: td.overrideValue },
470 | { mediaSize: { sizeIndex: 5 } },
471 | );
472 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
473 | expect(result.cssProps[propName]).equal(td.overrideValue);
474 | expect(result.issues.has(propName)).toBe(false);
475 | });
476 |
477 | it(`${c}, ${c}-xxl (xs)`, () => {
478 | const result = resolveLayoutProps(
479 | { [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
480 | { mediaSize: { sizeIndex: 0 } },
481 | );
482 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
483 | expect(result.cssProps[propName]).equal(td.baseValue);
484 | expect(result.issues.has(propName)).toBe(false);
485 | });
486 |
487 | it(`${c}, ${c}-xxl (sm)`, () => {
488 | const result = resolveLayoutProps(
489 | { [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
490 | { mediaSize: { sizeIndex: 1 } },
491 | );
492 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
493 | expect(result.cssProps[propName]).equal(td.baseValue);
494 | expect(result.issues.has(propName)).toBe(false);
495 | });
496 |
497 | it(`${c}, ${c}-xxl (md)`, () => {
498 | const result = resolveLayoutProps(
499 | { [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
500 | { mediaSize: { sizeIndex: 2 } },
501 | );
502 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
503 | expect(result.cssProps[propName]).equal(td.baseValue);
504 | expect(result.issues.has(propName)).toBe(false);
505 | });
506 |
507 | it(`${c}, ${c}-xxl (lg)`, () => {
508 | const result = resolveLayoutProps(
509 | { [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
510 | { mediaSize: { sizeIndex: 3 } },
511 | );
512 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
513 | expect(result.cssProps[propName]).equal(td.baseValue);
514 | expect(result.issues.has(propName)).toBe(false);
515 | });
516 |
517 | it(`${c}, ${c}-xxl (xl)`, () => {
518 | const result = resolveLayoutProps(
519 | { [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
520 | { mediaSize: { sizeIndex: 4 } },
521 | );
522 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
523 | expect(result.cssProps[propName]).equal(td.baseValue);
524 | expect(result.issues.has(propName)).toBe(false);
525 | });
526 |
527 | it(`${c}, ${c}-xxl (xxl)`, () => {
528 | const result = resolveLayoutProps(
529 | { [c]: td.baseValue, [`${c}-xxl`]: td.overrideValue },
530 | { mediaSize: { sizeIndex: 5 } },
531 | );
532 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
533 | expect(result.cssProps[propName]).equal(td.overrideValue);
534 | expect(result.issues.has(propName)).toBe(false);
535 | });
536 |
537 | it(`${c}, ${c}-xs, ${c}-md (xs)`, () => {
538 | const result = resolveLayoutProps(
539 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
540 | { mediaSize: { sizeIndex: 0 } },
541 | );
542 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
543 | expect(result.cssProps[propName]).equal(td.overrideValue);
544 | expect(result.issues.has(propName)).toBe(false);
545 | });
546 |
547 | it(`${c}, ${c}-xs, ${c}-md (sm)`, () => {
548 | const result = resolveLayoutProps(
549 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
550 | { mediaSize: { sizeIndex: 1 } },
551 | );
552 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
553 | expect(result.cssProps[propName]).equal(td.override2Value);
554 | expect(result.issues.has(propName)).toBe(false);
555 | });
556 |
557 | it(`${c}, ${c}-xs, ${c}-md (md)`, () => {
558 | const result = resolveLayoutProps(
559 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
560 | { mediaSize: { sizeIndex: 2 } },
561 | );
562 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
563 | expect(result.cssProps[propName]).equal(td.override2Value);
564 | expect(result.issues.has(propName)).toBe(false);
565 | });
566 |
567 | it(`${c}, ${c}-xs, ${c}-md (lg)`, () => {
568 | const result = resolveLayoutProps(
569 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
570 | { mediaSize: { sizeIndex: 3 } },
571 | );
572 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
573 | expect(result.cssProps[propName]).equal(td.baseValue);
574 | expect(result.issues.has(propName)).toBe(false);
575 | });
576 |
577 | it(`${c}, ${c}-xs, ${c}-md (xl)`, () => {
578 | const result = resolveLayoutProps(
579 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
580 | { mediaSize: { sizeIndex: 4 } },
581 | );
582 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
583 | expect(result.cssProps[propName]).equal(td.baseValue);
584 | expect(result.issues.has(propName)).toBe(false);
585 | });
586 |
587 | it(`${c}, ${c}-xs, ${c}-md (xxl)`, () => {
588 | const result = resolveLayoutProps(
589 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-md`]: td.override2Value },
590 | { mediaSize: { sizeIndex: 5 } },
591 | );
592 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
593 | expect(result.cssProps[propName]).equal(td.baseValue);
594 | expect(result.issues.has(propName)).toBe(false);
595 | });
596 |
597 | it(`${c}, ${c}-xs, ${c}-xl (xs)`, () => {
598 | const result = resolveLayoutProps(
599 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
600 | { mediaSize: { sizeIndex: 0 } },
601 | );
602 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
603 | expect(result.cssProps[propName]).equal(td.overrideValue);
604 | expect(result.issues.has(propName)).toBe(false);
605 | });
606 |
607 | it(`${c}, ${c}-xs, ${c}-xl (sm)`, () => {
608 | const result = resolveLayoutProps(
609 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
610 | { mediaSize: { sizeIndex: 1 } },
611 | );
612 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
613 | expect(result.cssProps[propName]).equal(td.baseValue);
614 | expect(result.issues.has(propName)).toBe(false);
615 | });
616 |
617 | it(`${c}, ${c}-xs, ${c}-xl (md)`, () => {
618 | const result = resolveLayoutProps(
619 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
620 | { mediaSize: { sizeIndex: 2 } },
621 | );
622 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
623 | expect(result.cssProps[propName]).equal(td.baseValue);
624 | expect(result.issues.has(propName)).toBe(false);
625 | });
626 |
627 | it(`${c}, ${c}-xs, ${c}-xl (lg)`, () => {
628 | const result = resolveLayoutProps(
629 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
630 | { mediaSize: { sizeIndex: 3 } },
631 | );
632 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
633 | expect(result.cssProps[propName]).equal(td.baseValue);
634 | expect(result.issues.has(propName)).toBe(false);
635 | });
636 |
637 | it(`${c}, ${c}-xs, ${c}-xl (xl)`, () => {
638 | const result = resolveLayoutProps(
639 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
640 | { mediaSize: { sizeIndex: 4 } },
641 | );
642 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
643 | expect(result.cssProps[propName]).equal(td.override2Value);
644 | expect(result.issues.has(propName)).toBe(false);
645 | });
646 |
647 | it(`${c}, ${c}-xs, ${c}-xl (xxl)`, () => {
648 | const result = resolveLayoutProps(
649 | { [c]: td.baseValue, [`${c}-xs`]: td.overrideValue, [`${c}-xl`]: td.override2Value },
650 | { mediaSize: { sizeIndex: 5 } },
651 | );
652 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
653 | expect(result.cssProps[propName]).equal(td.override2Value);
654 | expect(result.issues.has(propName)).toBe(false);
655 | });
656 |
657 | it(`${c}, ${c}-lg, ${c}-xxl (xs)`, () => {
658 | const result = resolveLayoutProps(
659 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
660 | { mediaSize: { sizeIndex: 0 } },
661 | );
662 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
663 | expect(result.cssProps[propName]).equal(td.baseValue);
664 | expect(result.issues.has(propName)).toBe(false);
665 | });
666 |
667 | it(`${c}, ${c}-lg, ${c}-xxl (sm)`, () => {
668 | const result = resolveLayoutProps(
669 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
670 | { mediaSize: { sizeIndex: 1 } },
671 | );
672 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
673 | expect(result.cssProps[propName]).equal(td.baseValue);
674 | expect(result.issues.has(propName)).toBe(false);
675 | });
676 |
677 | it(`${c}, ${c}-lg, ${c}-xxl (md)`, () => {
678 | const result = resolveLayoutProps(
679 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
680 | { mediaSize: { sizeIndex: 2 } },
681 | );
682 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
683 | expect(result.cssProps[propName]).equal(td.baseValue);
684 | expect(result.issues.has(propName)).toBe(false);
685 | });
686 |
687 | it(`${c}, ${c}-lg, ${c}-xxl (lg)`, () => {
688 | const result = resolveLayoutProps(
689 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
690 | { mediaSize: { sizeIndex: 3 } },
691 | );
692 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
693 | expect(result.cssProps[propName]).equal(td.overrideValue);
694 | expect(result.issues.has(propName)).toBe(false);
695 | });
696 |
697 | it(`${c}, ${c}-lg, ${c}-xxl (xl)`, () => {
698 | const result = resolveLayoutProps(
699 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
700 | { mediaSize: { sizeIndex: 4 } },
701 | );
702 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
703 | expect(result.cssProps[propName]).equal(td.overrideValue);
704 | expect(result.issues.has(propName)).toBe(false);
705 | });
706 |
707 | it(`${c}, ${c}-lg, ${c}-xxl (xxl)`, () => {
708 | const result = resolveLayoutProps(
709 | { [c]: td.baseValue, [`${c}-lg`]: td.overrideValue, [`${c}-xxl`]: td.override2Value },
710 | { mediaSize: { sizeIndex: 5 } },
711 | );
712 | const propName = td.cssProps?.[c] ? td.cssProps[c] : c;
713 | expect(result.cssProps[propName]).equal(td.override2Value);
714 | expect(result.issues.has(propName)).toBe(false);
715 | });
716 | });
717 | });
718 | });
719 |
```
--------------------------------------------------------------------------------
/xmlui/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
1 | # xmlui
2 |
3 | ## 0.11.5
4 |
5 | ### Patch Changes
6 |
7 | - 10d755e: refactor: xmlui-playground - design update
8 | - b3a4194: Fixed a case where if the data provided to a Table did not have 'id' attributes, the row selection would not work correctly.
9 |
10 | ## 0.11.4
11 |
12 | ### Patch Changes
13 |
14 | - 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
15 | - f296904: Splitter now responds the visibility changes of its children
16 | - f296904: Temporarily disable the "variant" behavior on Button
17 | - be73336: fix: Select - use extractValue for controlled component value prop
18 |
19 | ## 0.11.3
20 |
21 | ### Patch Changes
22 |
23 | - 4a311e2: improve: charts - better domain configuration
24 | - f8a75ce: Tiny Splitter updates
25 | - bbc421b: Text strong variant style fixed
26 |
27 | ## 0.11.2
28 |
29 | ### Patch Changes
30 |
31 | - c1f306f: update package dependencies for tsx usage
32 |
33 | ## 0.11.1
34 |
35 | ### Patch Changes
36 |
37 | - 7bbbb1d: Add the debounce function to globals
38 |
39 | ## 0.11.0
40 |
41 | ### Minor Changes
42 |
43 | - 19145d2: xmlui builds with ESM
44 | - 5109dce: Migrate from CommonJs to ESM internally. Lays the groundwork for exporting testing capabilities.
45 |
46 | ### Patch Changes
47 |
48 | - fe503eb: Add enableSubmit to Form
49 | - 06bb966: Fix TableOfContents styling
50 | - e6b5810: fix: playground - app reset
51 | - db94656: improve: bar/line chart spacing
52 | - fe503eb: Queue now passes $queuedItems and $completedItems context variables to its event handlers
53 | - 82ddbe7: Fix codefence first line indent style issue
54 | - 75b701b: Extend form with hideButtonRow and FormItem with noSubmit
55 |
56 | ## 0.10.26
57 |
58 | ### Patch Changes
59 |
60 | - e1b8d58: Heading now accepts "H1"..."H6", "1"..."6", too. Invalid values fall back to "h1".
61 | - 1ad832c: Remove the showNavPanelIf property from AppHeader (fix NavPanel's "when" usage)
62 |
63 | ## 0.10.25
64 |
65 | ### Patch Changes
66 |
67 | - e7c503e: refactor: Select - remove radix select
68 | - 5fe3052: Fix the NavGroup click behavior in responsive view
69 | - 5fe3052: Fix the $item access issue within a ModalDialog inside a Column
70 | - 250647b: Fix the APICall becomes non-functional after first error when used with DataSource + Items + $item context issue
71 |
72 | ## 0.10.24
73 |
74 | ### Patch Changes
75 |
76 | - 3e361c4: The xmlui-pg codefence now accepts emojies
77 | - 3e361c4: Exend the formatDate, formatDateTime, and formatTime functions with optional format strings
78 |
79 | ## 0.10.23
80 |
81 | ### Patch Changes
82 |
83 | - bf18444: Experiment with the "variant" behavior
84 | - 6d3bb89: Form now has a willSubmit event (it can cancel the submit event)
85 | - 89c69af: Fix the boolean conversion issue with showAnchor in Heading
86 | - 4cfebf0: Fix loading code-behind files in standalone mode
87 | - 145cd68: fix: pointer-events:none when using sibling Dialog
88 |
89 | ## 0.10.22
90 |
91 | ### Patch Changes
92 |
93 | - 501f60a: The behavior infrastructure now uses ComponentProvider and allows adding custom behaviors
94 | - 1020f1c: Extend Tab with the tabAlignment and accordionView properties
95 |
96 | ## 0.10.21
97 |
98 | ### Patch Changes
99 |
100 | - 6fd4d62: Add custom Text variant styling
101 |
102 | ## 0.10.20
103 |
104 | ### Patch Changes
105 |
106 | - 26eac90: fix: Autocomplete handles animations correctly
107 | - f53edff: Add margin-related theme variables to ContentSeparator
108 | - 1840916: Add applyIf property to Theme
109 | - c6be7a3: fix: external animation is now correctly applied to ModalDialogs as well
110 | - 6aaefaf: Added better error text when rendering FormItem outside of a Form.
111 | - 28d2585: refactor: Select and AutoComplete components
112 | - e29a231: The itemLabelWidth value of Form now supports theme variables ($space-\* values).
113 | - 22162c0: AppState now uses a merge operation to set initialValue
114 | - e90232b: fix: itemWithLabel - layout issue
115 |
116 | ## 0.10.19
117 |
118 | ### Patch Changes
119 |
120 | - facb257: Add checkboxTolerance property to Table
121 | - 6084c14: test: review onFocus, onBlur e2e tests
122 | - e1fa9d7: Renamed the following properties in DatePicker: minValue -> startDate, maxValue -> endDate. Also updated component documentation.
123 |
124 | ## 0.10.18
125 |
126 | ### Patch Changes
127 |
128 | - 202f2b2: refactor: use labelBehavior instead of ItemWithLabel
129 | - 6650ee8: Add back removed RadioItem
130 | - da98994: Fixed FormItem validation indicators to use a relaxed validation indication strategy.
131 | - 8394663: fix: labelBehavior, input components - styling issue
132 |
133 | ## 0.10.17
134 |
135 | ### Patch Changes
136 |
137 | - 07dae0b: fix: AccordionItem produces the right error outside of Accordion component
138 |
139 | ## 0.10.16
140 |
141 | ### Patch Changes
142 |
143 | - 0ba6612: Undust and improve the Tree component
144 | - 7b78052: Fixed Slider ranged version where only the first thumb is interactable.
145 | - 314b429: improve: remove cmdk from autocomple, add keywords prop to option
146 | - 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.
147 | - cff754c: refactor: move behavior application earlier in ComponentAdapter render flow
148 |
149 | ## 0.10.15
150 |
151 | ### Patch Changes
152 |
153 | - 3c8ad14: Add the data property to the Pdf component
154 | - 5502fea: Add the "transform" layout property
155 | - e08f0ba: Add syncWithAppState and initiallySelected properties to Table
156 | - 5502fea: Fix MenuSeparator and SubMenuitem (forwardRef)
157 | - 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.
158 | - a795b3d: Allow event handlers to use nested action components recursively
159 | - 5851c02: feat: introducing behaviors - tooltip, animation, label
160 |
161 | ## 0.10.14
162 |
163 | ### Patch Changes
164 |
165 | - 618049b: fix: Modal dialog scrolling issue
166 | - 215a142: Allow image to accept binary data (and use it instead of src)
167 | - 65b52e1: Allow user-defined components in extension packages
168 | - 0cc2178: Fixed Slider input type, label focus, readOnly property, as well as min & max value issues.
169 | - 53d4ed9: Fixed feature to add custom icons for the Carousel prev/next page buttons.
170 |
171 | ## 0.10.13
172 |
173 | ### Patch Changes
174 |
175 | - 9401ee0: Added short debounce to ColorPicker to make changing color values with slider a bit smoother.
176 | - eb62858: fix: assigning new properties to objects in xmlui script
177 | - eb62858: fix: stricter empty body detection in RestApiProxy
178 | - eb62858: fix: TextArea autofocus
179 | - eb62858: fix: dropdownMenu overflow
180 | - eb62858: fix: ability to use user defined components in triggerTemplate (dropdownMenu)
181 | - eb62858: select: use focus-visible instead of focus for outline
182 | - 243b7fa: fix: modal dialog/toast issue
183 | - eb62858: form: hideButtonRowUntilDirty
184 |
185 | ## 0.10.12
186 |
187 | ### Patch Changes
188 |
189 | - f12a042: fix: report errors in script tag
190 | - 8731eb8: Avatar does not issue a resource URL warning when "url" is not specified
191 | - eb6454f: refactor: change LineChart/BarChart property names
192 | - 1210852: Fix the layout property usage of ModalDialog
193 |
194 | ## 0.10.11
195 |
196 | ### Patch Changes
197 |
198 | - 8c76c8d: feat: style the error report colors and spaces in the browser for xmlui syntax errors
199 | - 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.
200 | - e42d367: Add FancyButton to xmlui-website-blocks
201 | - f539526: feat: BarChart - add tooltip position tracking
202 | - 19ce234: Review Option handling in Select and RadioGroup
203 | - 455b6c0: feat: add animation support to all relevant components via animation and animationOptions props
204 | - e90dc73: feat: add support for 'uses' property
205 | - 819b563: Update fontSize and lineHeight themes and style (may break existing xmlui code)
206 | - b57dfa2: Add the autoDetectTone property to App
207 | - 9dd0f97: Update Checkbox and Switch with click event metadata
208 | - 19ce234: Select accepts null as an option value; it converts a value to a string no longer
209 | - 898346d: Extend Text and Heading APIs with hasOverflow
210 | - 705dd04: Fix RestApiProxy to deliver response status when no error body specified
211 |
212 | ## 0.10.10
213 |
214 | ### Patch Changes
215 |
216 | - fff80c5: Bump package version
217 |
218 | ## 0.10.9
219 |
220 | ### Patch Changes
221 |
222 | - 879c09d: Component part handling and testing refactored
223 | - 3ad8514: Added tooltip value display to Slider thumbs. Removed value display from Slider label.
224 | - 0c69245: fix: virtualized list/table in ModalDialog
225 | - 4ad31fc: refactor: rename dataKeys/nameKey to xKeys/yKey and layout to orientation in chart components - BarChart, LineChart
226 | - c99f184: Fix ExpandableItem focus issue
227 | - 5032e4a: Experimenting with HeroSection
228 | - 2394f36: Enhance DateInput and TimeInput
229 |
230 | ## 0.10.8
231 |
232 | ### Patch Changes
233 |
234 | - a4d62c4: Add experimental Timer component
235 | - 7ed2918: Add the appendBlob function to the ApiInterceptor backend
236 |
237 | ## 0.10.7
238 |
239 | ### Patch Changes
240 |
241 | - 664ea4f: Fixed BarChart hideTickY property to not remove the Y axis when set to true.
242 | - a739a26: Fixed Checkbox and Switch visual issue. Fixed Line- and BarChart visual glitch in Table.
243 | - bdb54dd: Small fixes for tiny bugs found during MyWorkDrive update
244 | - 81724c6: Fixed BarChart tick labels not appearing.
245 |
246 | ## 0.10.6
247 |
248 | ### Patch Changes
249 |
250 | - 6464ec8: fix ssr
251 |
252 | ## 0.10.5
253 |
254 | ### Patch Changes
255 |
256 | - d38351d: fix missing dependency
257 |
258 | ## 0.10.4
259 |
260 | ### Patch Changes
261 |
262 | - 43fd8c5: small fixes: Avatar, FileUploadDropzone, auto xsrf token handling
263 | - 1df8e5d: Autocomplete: initiallyOpen prop
264 | - 0d5d9d1: Reworked Pagination layout strategy. Provided props to better control layout: pageSizeSelectorPosition, pageInfoPosition, buttonRowPosition. These props are available in Table pagination as well.
265 | - 3def673: DropdownMenu doesn't cooperate with Fragment triggerTemplate
266 | - 428ebea: include themes.scss file in lib dist
267 | - a12ce66: FileUploadDropZone fixes (dropPlaceholder disappeared)
268 |
269 | ## 0.10.3
270 |
271 | ### Patch Changes
272 |
273 | - 2e512bb: Add solid overflow handling modes to Text
274 | - 46d1d18: Remove the "codefence" Text variant
275 | - 6bc9ed1: feat: support aligning cells in a Table row vertically
276 | - 0b1f983: Add new, compound layout property name parsing
277 | - a2637f3: Text is displayed as inline (you can nest Text into Text)
278 | - eb4d592: Adding the "part" concept to native components
279 |
280 | ## 0.10.2
281 |
282 | ### Patch Changes
283 |
284 | - ff14e15: fix: LineChart - sizing issue
285 | - 1451a94: feat: make input padding configurable via theme variables
286 |
287 | ## 0.10.1
288 |
289 | ### Patch Changes
290 |
291 | - 442416b: Refactor visual components to allow tooltip
292 | - a018431: feat: add custom tooltip template support for Bar and Line charts
293 | - 33cb547: Pagination component now handles itemCount being undefined/null. Introduced hasPrevPage and hasNextPage props to toggle button disabled state.
294 | - b5d7537: Enhance the disabledDates property of DatePicker
295 |
296 | ## 0.10.0
297 |
298 | ### Minor Changes
299 |
300 | - 000a311: Add tooltip behavior to visible components
301 | - eb8b958: Rework inline styling system, prepare for responsive styling
302 |
303 | ### Patch Changes
304 |
305 | - 6d0ce52: Added features to the Pagination component: page size selector dropdown control. Also added the following props: layout orientation and layout order reversal.
306 | - 8c98f33: feat: add theme variable support for LineChart stroke width
307 | - ef86593: feat: add didChange event handler to Tabs component
308 | - da5f4e7: test: create e2e tests for chart components
309 | - 47c7a2d: Integrated the new Pagination component with Table.
310 | - 740f904: Add "activated" event to TabItem
311 | - 5009c52: Add "parts" to component metadata
312 | - 2f5ec32: Remove "from" from the list or reserved script keywords, as no longer used
313 |
314 | ## 0.9.101
315 |
316 | ### Patch Changes
317 |
318 | - 791b0be: Experimenting with issuing release on larger GitHub machines
319 |
320 | ## 0.9.100
321 |
322 | ### Patch Changes
323 |
324 | - 2dbf6d2: Added accessibility features, enabled prop and defaultThemeVars to Pagination. Also created E2E test cases for Pagination
325 |
326 | ## 0.9.99
327 |
328 | ### Patch Changes
329 |
330 | - e5a09fb: Added a separate Pagination component with events and API methods for custom pagination.
331 | - 36360f6: improve: add tickFormatterY to LineChart, create e2e tests
332 |
333 | ## 0.9.98
334 |
335 | ### Patch Changes
336 |
337 | - ff781f3: new internal react component for integrating into existing react applications (StandaloneComponent)
338 | - 377f0f2: Fix image animation issue in Carousel
339 | - ce0ff76: Added hover & active styles for Slider on thumb. FileInput opens file browser on label focus.
340 | - 208768a: Fixed input adornments not changing color on setting their respective theme variable. Spinbox buttons in NumberBox now have role=spinbutton.
341 |
342 | ## 0.9.97
343 |
344 | ### Patch Changes
345 |
346 | - f7e8019: Implement simple IFrame APIs
347 |
348 | ## 0.9.96
349 |
350 | ### Patch Changes
351 |
352 | - 3196156: Add IFrame component (first prototype)
353 | - cfee78a: NumberBox tweaks: fixed missing padding theme var, fixed incorrect label association.
354 | - f51002a: fix: Tabs - descendant button warning
355 | - 3fa52d9: fix: Table sortBy now works as expected
356 |
357 | ## 0.9.95
358 |
359 | ### Patch Changes
360 |
361 | - af6a7a0: fix: Tabs - fixed the inconsistency in the headerTemplate.
362 | - 69a2a8f: Fix the useEventHaddler hook
363 | - 29c68fe: fix: H1 ... H6 now ignores the level property
364 |
365 | ## 0.9.94
366 |
367 | ### Patch Changes
368 |
369 | - 1d9365c: feat: Tabs component - use headerTemplate instead of labelTemplate/tabTemplate
370 |
371 | ## 0.9.93
372 |
373 | ### Patch Changes
374 |
375 | - af17117: feat:add labelTemplate prop to TabItem component
376 | - 44da3d9: The transformation of Checkbox and Switch values (to Booleans) are now documented and tested
377 | - b7a6b9a: Fix formatHumanElapsedTime unit tests, make the local-independent
378 | - bc95844: improve: Select and AutoComplete components
379 | - 52d94a2: Fix the ComponentWrapper childrenAsTemplate issue
380 | - 6629ce5: New end-to-end tests reviewed
381 | - 0254471: Fixed the initialValue issue with TextArea
382 | - 3318cfb: feat: provide context in browser error reports
383 |
384 | ## 0.9.92
385 |
386 | ### Patch Changes
387 |
388 | - 347cda1: Review component e2e tests
389 |
390 | ## 0.9.91
391 |
392 | ### Patch Changes
393 |
394 | - 6a7d779: Review Slot implementation
395 |
396 | ## 0.9.90
397 |
398 | ### Patch Changes
399 |
400 | - 4b57f7e: Remove Spinner tests
401 |
402 | ## 0.9.89
403 |
404 | ### Patch Changes
405 |
406 | - 2968eb9: fix initialValue handling in selects in forms
407 | - 94f4eb5: safari regexp error workaround for optimized build, revert select inside form fix
408 | - 8364c03: add new TextBox and TextArea test cases
409 |
410 | ## 0.9.88
411 |
412 | ### Patch Changes
413 |
414 | - b79d7d8: Fix flaky Checkbox e2e tests
415 |
416 | ## 0.9.87
417 |
418 | ### Patch Changes
419 |
420 | - 33846c2: Fix ios regex failure
421 |
422 | ## 0.9.86
423 |
424 | ### Patch Changes
425 |
426 | - 48af60d: Temporarily suspend new checkbox e2e tests
427 |
428 | ## 0.9.85
429 |
430 | ### Patch Changes
431 |
432 | - ee8d6ad: Fix "required" validation issue with "integer" and "number" FormItem
433 | - 9ca7572: Extend the component API metadata with method signature and parameter descriptions
434 | - 6944d2f: Add a scrollIntoView method to Heading
435 | - c0c10e7: Added missing autoFocus feature and aria labels to Checkbox
436 | - cbe1ef2: Use grammar and syntax highlight files straight form the xmlui package, instead of duplicating them in every app.
437 |
438 | ## 0.9.84
439 |
440 | ### Patch Changes
441 |
442 | - c54abf3: update deps
443 |
444 | ## 0.9.83
445 |
446 | ### Patch Changes
447 |
448 | - 8e3d6a3: Prevent the xmlui-optimizer to raise error on ShadowRoot
449 | - 8644010: Add a scrollIntoView api to Bookmark
450 |
451 | ## 0.9.82
452 |
453 | ### Patch Changes
454 |
455 | - 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.
456 | - 1101bf5: Fix a React warning in MarkdownNative (headingRef)
457 | - cd8db58: Fixed ModalDialog overlay and fullScreen in nested apps. Now dialogs defined in nested apps stay inside them.
458 | - 13beb58: Fixed ModalDialog context error when dialog is called from ApiCall or components using "confirm" in XMLUI code.
459 | - 79c1d8a: fix: allow the playground to use the same tone as its source
460 |
461 | ## 0.9.81
462 |
463 | ### Patch Changes
464 |
465 | - 59680b7: Allow configuring the initiallyShowCode flag in ComponentViewer
466 |
467 | ## 0.9.80
468 |
469 | ### Patch Changes
470 |
471 | - 4598566: NumberBox and FromItem type="number" accepts numeric string as initialValue
472 | - 14e6a7d: feat: add splitView to code inspection
473 | - cf05bd2: Fix non-fatal StandaloneApp.tsx issue
474 |
475 | ## 0.9.79
476 |
477 | ### Patch Changes
478 |
479 | - ad21a31: enhance treeshaking
480 |
481 | ## 0.9.78
482 |
483 | ### Patch Changes
484 |
485 | - 94a68f0: Toggle password visibility in PasswordInput
486 | - 94a68f0: Extend markdown to render compound headings with code spans and anchors
487 | - 163a45c: Add ToneSwitch with icon customization
488 | - 7ce528b: fix: BarChart - size management
489 | - c6eb9a8: Fixed scrolling to specific Bookmarks inside nested apps.
490 |
491 | ## 0.9.77
492 |
493 | ### Patch Changes
494 |
495 | - c867f38: Change split view startup animation
496 |
497 | ## 0.9.76
498 |
499 | ### Patch Changes
500 |
501 | - aa08a8c: introducing ApiInterceptor->useWorker: true/false
502 | - 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.
503 | - 5761868: improve: BarChart - add tick formatter for X and Y axes
504 |
505 | ## 0.9.75
506 |
507 | ### Patch Changes
508 |
509 | - c876be8: Turn docs deploy to standard routing
510 |
511 | ## 0.9.74
512 |
513 | ### Patch Changes
514 |
515 | - 0043c5d: NestedApp new prop: withSplashScreen
516 |
517 | ## 0.9.73
518 |
519 | ### Patch Changes
520 |
521 | - 88bf4f6: extend formatHumanElapsedTime with a short format flag
522 | - fef53db: Allow specifying href targets with the markdown link tag
523 | - 6167648: Fix the useMouseEventHandlers hook
524 | - b2f4483: Fix missing code fence display
525 | - e9040c6: Make the nested app's header smaller
526 |
527 | ## 0.9.72
528 |
529 | ### Patch Changes
530 |
531 | - 4ab3b8a: add omitH1 to TableOfContents
532 | - ac4a283: remove the AppWithCodeView component
533 | - 38454c9: fix ApiInterceptor race conditions (inside NestedApps)
534 |
535 | ## 0.9.71
536 |
537 | ### Patch Changes
538 |
539 | - 5774c53: fix ssr issues with Theme components
540 |
541 | ## 0.9.70
542 |
543 | ### Patch Changes
544 |
545 | - 1da7847: Adjust CodeBlock theme variables for dark tone
546 |
547 | ## 0.9.69
548 |
549 | ### Patch Changes
550 |
551 | - 9b36621: fix flaky Checkbox tests
552 |
553 | ## 0.9.68
554 |
555 | ### Patch Changes
556 |
557 | - 9b1f718: change: add back the logo and the buttons to the xmlui-pg split view
558 | - c79ced7: fix ssr hydration warn in AppWithCodeView
559 | - d030ac2: A few theme variable defaults updated
560 | - 21c4fd6: fix: mocked apis should work with multiple NestedApps
561 |
562 | ## 0.9.67
563 |
564 | ### Patch Changes
565 |
566 | - 51a5b05: Small changes in a few component's metadata representation
567 | - 9048af1: Remove the header logo and buttons from the AppWithCodeViewNative component
568 | - 94f0e66: Accounted for some bad inputs in code fences when highlighting rows & substrings
569 | - 3f0e6b0: fix memoization for tabs, pageInfo
570 |
571 | ## 0.9.66
572 |
573 | ### Patch Changes
574 |
575 | - eae8145: Fixed Switch indicator positioning
576 | - b6c64de: improve: charts - improved tick rendering
577 | - 459bd3c: improve: Logo - add inline, alt props
578 | - 96be435: feat: CodeBlock - add new themeVariables
579 |
580 | ## 0.9.65
581 |
582 | ### Patch Changes
583 |
584 | - c17fc0d: fix the NestedAppNative.tsx issue introduced in #1547
585 |
586 | ## 0.9.64
587 |
588 | ### Patch Changes
589 |
590 | - 5ad3ffc: Refactored the usage of theme variables in RadioGroup
591 | - da3c8bc: Add a "noHeader" option to the xmlui-pg codefence
592 | - 301cb39: Allow YAML (.yml) theme files in standalone apps
593 | - d5d3f4d: Fixed Bar- & LineChart sizing in the Table component
594 |
595 | ## 0.9.63
596 |
597 | ### Patch Changes
598 |
599 | - b9c0881: Fix: add a workaround to ListNative to avoid issues coming from undefined row values
600 |
601 | ## 0.9.62
602 |
603 | ### Patch Changes
604 |
605 | - 832f31d: fix: nestedApp fills the available space in AppWithCode component
606 | - 4f9ff06: Fix the build issue with FormSection
607 |
608 | ## 0.9.61
609 |
610 | ### Patch Changes
611 |
612 | - 4ef5f3f: This version does not contain any real changes; it's just for bumping the version number.
613 |
614 | ## 0.9.60
615 |
616 | ### Patch Changes
617 |
618 | - f37ed8c: Fine tune AppWithCodeView header
619 | - 736dbc8: improve: AppWithCode - center the XML/UI buttons
620 | - e2a6e1a: Add a popOutUrl="<url>" option to xmlui-pg to allow pop out to a custom playground location
621 |
622 | ## 0.9.59
623 |
624 | ### Patch Changes
625 |
626 | - 2a07157: Rename Pages property 'defaultRoute' to 'fallbackPath'
627 | - 97b3241: improve: expanding the styles of the components responsible for code display with new theme variables.
628 | - 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.
629 | - f19720c: Added 0 min width to PieChart, Fixed focus error when one checkbox's state change depended on another
630 | - 66c2288: Fixed NavLink indentation in horizontal App layout, if in a nested NavGroup in the NavPanel
631 | - 2d27204: Fixed a number of color & visual state representations of the components: DatePicker, Switch, Select, TextBox, TextArea, NumberBox, AutoComplete
632 |
633 | ## 0.9.58
634 |
635 | ### Patch Changes
636 |
637 | - dc43275: Fixed Pie- & DonutChart height property.
638 | - f9562b5: make flowLayout auto-responsive behavior a bit smarter
639 | - 1af11af: fix: eliminating the duplication of toast messages
640 | - 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.
641 | - 7d255a9: Changed open in new window button tooltip label for all occurrences.
642 | - 69a7a1f: Fixed NavLink label break if overflowing available space.
643 | - 873348c: new form properties: onSuccess, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage
644 | - 46bfe72: default style tweaks
645 |
646 | ## 0.9.57
647 |
648 | ### Patch Changes
649 |
650 | - 93a1e70: fix: NavPanel - use layoutCss
651 |
652 | ## 0.9.56
653 |
654 | ### Patch Changes
655 |
656 | - 9a3c3b6: feat: xmlui-devtools - start dialog animation from the click, use exit animation as well
657 |
658 | ## 0.9.55
659 |
660 | ### Patch Changes
661 |
662 | - d507ea8: Add AppWithCodeView component to display code and running app side-by-side
663 |
664 | ## 0.9.54
665 |
666 | ### Patch Changes
667 |
668 | - 2688a95: Change TreeDisplay theme variable defaults
669 |
670 | ## 0.9.53
671 |
672 | ### Patch Changes
673 |
674 | - c64fa25: Allow turning on/off heading anchors in appGlobals
675 | - 73c2c21: wip: code inspector buttons - label change, devtools - animation update
676 |
677 | ## 0.9.52
678 |
679 | ### Patch Changes
680 |
681 | - d079208: The Footer component no provides a themeable gap between its children.
682 | - 2a461d8: feat: NestedApp works with ApiInterceptor
683 | - ad6d81e: fix NestedApp apiUrl overwrite
684 | - f5b9f15: feat: xmlui-devtools - use it in a modal dialog
685 | - 88e4741: fix: Table columns do not allow (and indicate) sorting when bindTo is not set
686 | - 7af4b4e: change default borderColor
687 | - 851ae21: fix table styling
688 | - 7872ed0: Default theme variables changed for App, NestedApp, TableOfContents, and Text
689 | - bf00dce: enhance xmlui parser error tolerance, recovering from unclosed tags
690 | - 38180ce: merge xmlui-charts into core
691 |
692 | ## 0.9.51
693 |
694 | ### Patch Changes
695 |
696 | - ef7add9: Added theme variable for setting the horizontal alignment of the logo in the NavPanel.
697 | - ba2b5cd: Moved Drawer logo position to left.
698 | - 96273bf: fix: Slider - min/max value validation
699 | - 1a81bcf: fix: Markdown renders inline/block images correclty
700 |
701 | ## 0.9.50
702 |
703 | ### Patch Changes
704 |
705 | - e6c3b39: standalone usage: explicit codeBehind reference
706 | - 85031c8: Make the "marked" Text variant have lighter background color in dark mode.
707 | - d349036: Tweaked Search dropdown panel styles. Corrected Link component text and decoration hover and active colors
708 |
709 | ## 0.9.49
710 |
711 | ### Patch Changes
712 |
713 | - 9afd588: fix: XmluiCodeHighlighter - update token colorizing (light/dark tone)
714 | - Updated dependencies [3b5e820]
715 | - [email protected]
716 |
717 | ## 0.9.48
718 |
719 | ### Patch Changes
720 |
721 | - b5104b0: feat: Icon component now handles the click event
722 | - 30d5c58: feat: Badge supports theme variable names in colormap
723 | - 2e7f51f: change: the canSort property of Column defaults to true
724 | - 4dd6d7f: feat: chart extension included by default
725 | - f7f0571: fix theme component
726 |
727 | ## 0.9.47
728 |
729 | ### Patch Changes
730 |
731 | - a5bef5d: feat: add "inherit" variant to Text
732 | - ecc52d1: XMLUIExtensions namespace is optional
733 | - 4322e1b: fix: search context scope
734 | - 391927c: feat: add xmlui-tree codefence (displays a tree) to Markdown
735 |
736 | ## 0.9.46
737 |
738 | ### Patch Changes
739 |
740 | - e20e867: improve: DatePicker - change chevrons, Slider - design updates, change drawer icon's padding
741 | - 1f83bb2: Tables in Markdown scroll horizontally if there's not enough space.
742 | - 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.
743 | - bc68330: tweak search indexer
744 | - ef3d208: improve: DatePicker - update chevrons
745 |
746 | ## 0.9.45
747 |
748 | ### Patch Changes
749 |
750 | - 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.
751 | - bd6d1b4: experimental: runtime search indexing
752 | - db5a5f4: fix: Allow APICall as an event handler
753 | - 69b4402: improve: docs - footer logo, FormItem - labelBreak
754 |
755 | ## 0.9.44
756 |
757 | ### Patch Changes
758 |
759 | - 3eab4a3: improve: design updates - devtools, playground, docs
760 | - 411cd34: fix: inbound links to headers in markdown (anchor scroll slightly off)
761 | - cdf96bb: fix: table inside flowlayout, horizontal scrollbar
762 | - 121c55c: Changed the background color of the `marked` Text variant.
763 | - f1092fe: Added emphasized substring highlights to CodeBlocks. Use it in markdown the following way: ```xmlui !/substr/
764 |
765 | ## 0.9.43
766 |
767 | ### Patch Changes
768 |
769 | - e2324bb: fix prefetchedContent handling
770 | - cacbf26: improve: AutoComplete - updating the selection logic, improved handling of readOnly and multi states, and removing unused or redundant code, improving tests
771 | - 05c8dfe: test: DatePicker - fix e2e "disabled state prevents interaction"
772 | - 42571db: test: create tests for the AutoComplete component, fix bugs
773 | - 05205c7: Add diagnostics to language server
774 | - 0a3d059: fix initial offset calculation for virtualized table/list
775 |
776 | ## 0.9.42
777 |
778 | ### Patch Changes
779 |
780 | - 1ab3881: ssr fixes, experimental prefetchedContent
781 | - 3d9729d: test: add tests for the DatePicker component
782 |
783 | ## 0.9.41
784 |
785 | ### Patch Changes
786 |
787 | - 42416ba: test change for CI #2
788 |
789 | ## 0.9.40
790 |
791 | ### Patch Changes
792 |
793 | - 34282f0: chage to test CI
794 |
795 | ## 0.9.39
796 |
797 | ### Patch Changes
798 |
799 | - b79ca46: improve: DatePicker - design update, XmluiCodeHighlighter - use layoutCss
800 | - bbec7a9: Added implicit code highlighter identification by Markdown if one is exposed under the name "codeHighlighter" in the appGlobals in config.
801 | - e67762b: Replaced Admonition emojis with icons
802 |
803 | ## 0.9.38
804 |
805 | ### Patch Changes
806 |
807 | - d314bad: msw update
808 |
809 | ## 0.9.37
810 |
811 | ### Patch Changes
812 |
813 | - 1c33896: ssr fixes
814 | - 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.
815 |
816 | ## 0.9.36
817 |
818 | ### Patch Changes
819 |
820 | - 6b0f2c1: fix: itemWithLabel fills the available width if no other value is specified
821 |
822 | ## 0.9.35
823 |
824 | ### Patch Changes
825 |
826 | - ef3cd6e: Reworked NavLink & NavGroup styling: added disabled, hover & active states to button version
827 |
828 | ## 0.9.34
829 |
830 | ### Patch Changes
831 |
832 | - bae8280: export NestedApp component
833 | - 415aa66: Added color palette colors for CodeBlock, vertical NavPanel now has fixed scrollbar gutter, fixed vertical collapsed icon for NavGroup.
834 |
835 | ## 0.9.33
836 |
837 | ### Patch Changes
838 |
839 | - dabeb53: Fixed NavPanel background color
840 |
841 | ## 0.9.32
842 |
843 | ### Patch Changes
844 |
845 | - 4019d82: xmlui-playground, new exports from xmlui
846 | - 450e1ee: feat: add aria-placeholder to Select component
847 |
848 | ## 0.9.31
849 |
850 | ### Patch Changes
851 |
852 | - ed53215: test release
853 | - ed53215: another testing
854 |
855 | ## 0.9.30
856 |
857 | ### Patch Changes
858 |
859 | - b0ae113: testing
860 |
861 | ## 0.9.29
862 |
863 | ### Patch Changes
864 |
865 | - f15c018: another testing
866 | - f15c018: testing
867 |
868 | ## 0.9.28
869 |
870 | ### Patch Changes
871 |
872 | - 421968b: testing
873 |
874 | ## 0.9.27
875 |
876 | ### Patch Changes
877 |
878 | - 99bba69: testing
879 |
880 | ## 0.9.26
881 |
882 | ### Patch Changes
883 |
884 | - bcf162c: testing changesets
885 |
```