This is page 107 of 186. Use http://codebase.md/xmlui-org/xmlui/xmlui-hello-world.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.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.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── 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.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── 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.4
4 |
5 | ### Patch Changes
6 |
7 | - 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
8 | - f296904: Splitter now responds the visibility changes of its children
9 | - f296904: Temporarily disable the "variant" behavior on Button
10 | - be73336: fix: Select - use extractValue for controlled component value prop
11 |
12 | ## 0.11.3
13 |
14 | ### Patch Changes
15 |
16 | - 4a311e2: improve: charts - better domain configuration
17 | - f8a75ce: Tiny Splitter updates
18 | - bbc421b: Text strong variant style fixed
19 |
20 | ## 0.11.2
21 |
22 | ### Patch Changes
23 |
24 | - c1f306f: update package dependencies for tsx usage
25 |
26 | ## 0.11.1
27 |
28 | ### Patch Changes
29 |
30 | - 7bbbb1d: Add the debounce function to globals
31 |
32 | ## 0.11.0
33 |
34 | ### Minor Changes
35 |
36 | - 19145d2: xmlui builds with ESM
37 | - 5109dce: Migrate from CommonJs to ESM internally. Lays the groundwork for exporting testing capabilities.
38 |
39 | ### Patch Changes
40 |
41 | - fe503eb: Add enableSubmit to Form
42 | - 06bb966: Fix TableOfContents styling
43 | - e6b5810: fix: playground - app reset
44 | - db94656: improve: bar/line chart spacing
45 | - fe503eb: Queue now passes $queuedItems and $completedItems context variables to its event handlers
46 | - 82ddbe7: Fix codefence first line indent style issue
47 | - 75b701b: Extend form with hideButtonRow and FormItem with noSubmit
48 |
49 | ## 0.10.26
50 |
51 | ### Patch Changes
52 |
53 | - e1b8d58: Heading now accepts "H1"..."H6", "1"..."6", too. Invalid values fall back to "h1".
54 | - 1ad832c: Remove the showNavPanelIf property from AppHeader (fix NavPanel's "when" usage)
55 |
56 | ## 0.10.25
57 |
58 | ### Patch Changes
59 |
60 | - e7c503e: refactor: Select - remove radix select
61 | - 5fe3052: Fix the NavGroup click behavior in responsive view
62 | - 5fe3052: Fix the $item access issue within a ModalDialog inside a Column
63 | - 250647b: Fix the APICall becomes non-functional after first error when used with DataSource + Items + $item context issue
64 |
65 | ## 0.10.24
66 |
67 | ### Patch Changes
68 |
69 | - 3e361c4: The xmlui-pg codefence now accepts emojies
70 | - 3e361c4: Exend the formatDate, formatDateTime, and formatTime functions with optional format strings
71 |
72 | ## 0.10.23
73 |
74 | ### Patch Changes
75 |
76 | - bf18444: Experiment with the "variant" behavior
77 | - 6d3bb89: Form now has a willSubmit event (it can cancel the submit event)
78 | - 89c69af: Fix the boolean conversion issue with showAnchor in Heading
79 | - 4cfebf0: Fix loading code-behind files in standalone mode
80 | - 145cd68: fix: pointer-events:none when using sibling Dialog
81 |
82 | ## 0.10.22
83 |
84 | ### Patch Changes
85 |
86 | - 501f60a: The behavior infrastructure now uses ComponentProvider and allows adding custom behaviors
87 | - 1020f1c: Extend Tab with the tabAlignment and accordionView properties
88 |
89 | ## 0.10.21
90 |
91 | ### Patch Changes
92 |
93 | - 6fd4d62: Add custom Text variant styling
94 |
95 | ## 0.10.20
96 |
97 | ### Patch Changes
98 |
99 | - 26eac90: fix: Autocomplete handles animations correctly
100 | - f53edff: Add margin-related theme variables to ContentSeparator
101 | - 1840916: Add applyIf property to Theme
102 | - c6be7a3: fix: external animation is now correctly applied to ModalDialogs as well
103 | - 6aaefaf: Added better error text when rendering FormItem outside of a Form.
104 | - 28d2585: refactor: Select and AutoComplete components
105 | - e29a231: The itemLabelWidth value of Form now supports theme variables ($space-\* values).
106 | - 22162c0: AppState now uses a merge operation to set initialValue
107 | - e90232b: fix: itemWithLabel - layout issue
108 |
109 | ## 0.10.19
110 |
111 | ### Patch Changes
112 |
113 | - facb257: Add checkboxTolerance property to Table
114 | - 6084c14: test: review onFocus, onBlur e2e tests
115 | - e1fa9d7: Renamed the following properties in DatePicker: minValue -> startDate, maxValue -> endDate. Also updated component documentation.
116 |
117 | ## 0.10.18
118 |
119 | ### Patch Changes
120 |
121 | - 202f2b2: refactor: use labelBehavior instead of ItemWithLabel
122 | - 6650ee8: Add back removed RadioItem
123 | - da98994: Fixed FormItem validation indicators to use a relaxed validation indication strategy.
124 | - 8394663: fix: labelBehavior, input components - styling issue
125 |
126 | ## 0.10.17
127 |
128 | ### Patch Changes
129 |
130 | - 07dae0b: fix: AccordionItem produces the right error outside of Accordion component
131 |
132 | ## 0.10.16
133 |
134 | ### Patch Changes
135 |
136 | - 0ba6612: Undust and improve the Tree component
137 | - 7b78052: Fixed Slider ranged version where only the first thumb is interactable.
138 | - 314b429: improve: remove cmdk from autocomple, add keywords prop to option
139 | - 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.
140 | - cff754c: refactor: move behavior application earlier in ComponentAdapter render flow
141 |
142 | ## 0.10.15
143 |
144 | ### Patch Changes
145 |
146 | - 3c8ad14: Add the data property to the Pdf component
147 | - 5502fea: Add the "transform" layout property
148 | - e08f0ba: Add syncWithAppState and initiallySelected properties to Table
149 | - 5502fea: Fix MenuSeparator and SubMenuitem (forwardRef)
150 | - 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.
151 | - a795b3d: Allow event handlers to use nested action components recursively
152 | - 5851c02: feat: introducing behaviors - tooltip, animation, label
153 |
154 | ## 0.10.14
155 |
156 | ### Patch Changes
157 |
158 | - 618049b: fix: Modal dialog scrolling issue
159 | - 215a142: Allow image to accept binary data (and use it instead of src)
160 | - 65b52e1: Allow user-defined components in extension packages
161 | - 0cc2178: Fixed Slider input type, label focus, readOnly property, as well as min & max value issues.
162 | - 53d4ed9: Fixed feature to add custom icons for the Carousel prev/next page buttons.
163 |
164 | ## 0.10.13
165 |
166 | ### Patch Changes
167 |
168 | - 9401ee0: Added short debounce to ColorPicker to make changing color values with slider a bit smoother.
169 | - eb62858: fix: assigning new properties to objects in xmlui script
170 | - eb62858: fix: stricter empty body detection in RestApiProxy
171 | - eb62858: fix: TextArea autofocus
172 | - eb62858: fix: dropdownMenu overflow
173 | - eb62858: fix: ability to use user defined components in triggerTemplate (dropdownMenu)
174 | - eb62858: select: use focus-visible instead of focus for outline
175 | - 243b7fa: fix: modal dialog/toast issue
176 | - eb62858: form: hideButtonRowUntilDirty
177 |
178 | ## 0.10.12
179 |
180 | ### Patch Changes
181 |
182 | - f12a042: fix: report errors in script tag
183 | - 8731eb8: Avatar does not issue a resource URL warning when "url" is not specified
184 | - eb6454f: refactor: change LineChart/BarChart property names
185 | - 1210852: Fix the layout property usage of ModalDialog
186 |
187 | ## 0.10.11
188 |
189 | ### Patch Changes
190 |
191 | - 8c76c8d: feat: style the error report colors and spaces in the browser for xmlui syntax errors
192 | - 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.
193 | - e42d367: Add FancyButton to xmlui-website-blocks
194 | - f539526: feat: BarChart - add tooltip position tracking
195 | - 19ce234: Review Option handling in Select and RadioGroup
196 | - 455b6c0: feat: add animation support to all relevant components via animation and animationOptions props
197 | - e90dc73: feat: add support for 'uses' property
198 | - 819b563: Update fontSize and lineHeight themes and style (may break existing xmlui code)
199 | - b57dfa2: Add the autoDetectTone property to App
200 | - 9dd0f97: Update Checkbox and Switch with click event metadata
201 | - 19ce234: Select accepts null as an option value; it converts a value to a string no longer
202 | - 898346d: Extend Text and Heading APIs with hasOverflow
203 | - 705dd04: Fix RestApiProxy to deliver response status when no error body specified
204 |
205 | ## 0.10.10
206 |
207 | ### Patch Changes
208 |
209 | - fff80c5: Bump package version
210 |
211 | ## 0.10.9
212 |
213 | ### Patch Changes
214 |
215 | - 879c09d: Component part handling and testing refactored
216 | - 3ad8514: Added tooltip value display to Slider thumbs. Removed value display from Slider label.
217 | - 0c69245: fix: virtualized list/table in ModalDialog
218 | - 4ad31fc: refactor: rename dataKeys/nameKey to xKeys/yKey and layout to orientation in chart components - BarChart, LineChart
219 | - c99f184: Fix ExpandableItem focus issue
220 | - 5032e4a: Experimenting with HeroSection
221 | - 2394f36: Enhance DateInput and TimeInput
222 |
223 | ## 0.10.8
224 |
225 | ### Patch Changes
226 |
227 | - a4d62c4: Add experimental Timer component
228 | - 7ed2918: Add the appendBlob function to the ApiInterceptor backend
229 |
230 | ## 0.10.7
231 |
232 | ### Patch Changes
233 |
234 | - 664ea4f: Fixed BarChart hideTickY property to not remove the Y axis when set to true.
235 | - a739a26: Fixed Checkbox and Switch visual issue. Fixed Line- and BarChart visual glitch in Table.
236 | - bdb54dd: Small fixes for tiny bugs found during MyWorkDrive update
237 | - 81724c6: Fixed BarChart tick labels not appearing.
238 |
239 | ## 0.10.6
240 |
241 | ### Patch Changes
242 |
243 | - 6464ec8: fix ssr
244 |
245 | ## 0.10.5
246 |
247 | ### Patch Changes
248 |
249 | - d38351d: fix missing dependency
250 |
251 | ## 0.10.4
252 |
253 | ### Patch Changes
254 |
255 | - 43fd8c5: small fixes: Avatar, FileUploadDropzone, auto xsrf token handling
256 | - 1df8e5d: Autocomplete: initiallyOpen prop
257 | - 0d5d9d1: Reworked Pagination layout strategy. Provided props to better control layout: pageSizeSelectorPosition, pageInfoPosition, buttonRowPosition. These props are available in Table pagination as well.
258 | - 3def673: DropdownMenu doesn't cooperate with Fragment triggerTemplate
259 | - 428ebea: include themes.scss file in lib dist
260 | - a12ce66: FileUploadDropZone fixes (dropPlaceholder disappeared)
261 |
262 | ## 0.10.3
263 |
264 | ### Patch Changes
265 |
266 | - 2e512bb: Add solid overflow handling modes to Text
267 | - 46d1d18: Remove the "codefence" Text variant
268 | - 6bc9ed1: feat: support aligning cells in a Table row vertically
269 | - 0b1f983: Add new, compound layout property name parsing
270 | - a2637f3: Text is displayed as inline (you can nest Text into Text)
271 | - eb4d592: Adding the "part" concept to native components
272 |
273 | ## 0.10.2
274 |
275 | ### Patch Changes
276 |
277 | - ff14e15: fix: LineChart - sizing issue
278 | - 1451a94: feat: make input padding configurable via theme variables
279 |
280 | ## 0.10.1
281 |
282 | ### Patch Changes
283 |
284 | - 442416b: Refactor visual components to allow tooltip
285 | - a018431: feat: add custom tooltip template support for Bar and Line charts
286 | - 33cb547: Pagination component now handles itemCount being undefined/null. Introduced hasPrevPage and hasNextPage props to toggle button disabled state.
287 | - b5d7537: Enhance the disabledDates property of DatePicker
288 |
289 | ## 0.10.0
290 |
291 | ### Minor Changes
292 |
293 | - 000a311: Add tooltip behavior to visible components
294 | - eb8b958: Rework inline styling system, prepare for responsive styling
295 |
296 | ### Patch Changes
297 |
298 | - 6d0ce52: Added features to the Pagination component: page size selector dropdown control. Also added the following props: layout orientation and layout order reversal.
299 | - 8c98f33: feat: add theme variable support for LineChart stroke width
300 | - ef86593: feat: add didChange event handler to Tabs component
301 | - da5f4e7: test: create e2e tests for chart components
302 | - 47c7a2d: Integrated the new Pagination component with Table.
303 | - 740f904: Add "activated" event to TabItem
304 | - 5009c52: Add "parts" to component metadata
305 | - 2f5ec32: Remove "from" from the list or reserved script keywords, as no longer used
306 |
307 | ## 0.9.101
308 |
309 | ### Patch Changes
310 |
311 | - 791b0be: Experimenting with issuing release on larger GitHub machines
312 |
313 | ## 0.9.100
314 |
315 | ### Patch Changes
316 |
317 | - 2dbf6d2: Added accessibility features, enabled prop and defaultThemeVars to Pagination. Also created E2E test cases for Pagination
318 |
319 | ## 0.9.99
320 |
321 | ### Patch Changes
322 |
323 | - e5a09fb: Added a separate Pagination component with events and API methods for custom pagination.
324 | - 36360f6: improve: add tickFormatterY to LineChart, create e2e tests
325 |
326 | ## 0.9.98
327 |
328 | ### Patch Changes
329 |
330 | - ff781f3: new internal react component for integrating into existing react applications (StandaloneComponent)
331 | - 377f0f2: Fix image animation issue in Carousel
332 | - ce0ff76: Added hover & active styles for Slider on thumb. FileInput opens file browser on label focus.
333 | - 208768a: Fixed input adornments not changing color on setting their respective theme variable. Spinbox buttons in NumberBox now have role=spinbutton.
334 |
335 | ## 0.9.97
336 |
337 | ### Patch Changes
338 |
339 | - f7e8019: Implement simple IFrame APIs
340 |
341 | ## 0.9.96
342 |
343 | ### Patch Changes
344 |
345 | - 3196156: Add IFrame component (first prototype)
346 | - cfee78a: NumberBox tweaks: fixed missing padding theme var, fixed incorrect label association.
347 | - f51002a: fix: Tabs - descendant button warning
348 | - 3fa52d9: fix: Table sortBy now works as expected
349 |
350 | ## 0.9.95
351 |
352 | ### Patch Changes
353 |
354 | - af6a7a0: fix: Tabs - fixed the inconsistency in the headerTemplate.
355 | - 69a2a8f: Fix the useEventHaddler hook
356 | - 29c68fe: fix: H1 ... H6 now ignores the level property
357 |
358 | ## 0.9.94
359 |
360 | ### Patch Changes
361 |
362 | - 1d9365c: feat: Tabs component - use headerTemplate instead of labelTemplate/tabTemplate
363 |
364 | ## 0.9.93
365 |
366 | ### Patch Changes
367 |
368 | - af17117: feat:add labelTemplate prop to TabItem component
369 | - 44da3d9: The transformation of Checkbox and Switch values (to Booleans) are now documented and tested
370 | - b7a6b9a: Fix formatHumanElapsedTime unit tests, make the local-independent
371 | - bc95844: improve: Select and AutoComplete components
372 | - 52d94a2: Fix the ComponentWrapper childrenAsTemplate issue
373 | - 6629ce5: New end-to-end tests reviewed
374 | - 0254471: Fixed the initialValue issue with TextArea
375 | - 3318cfb: feat: provide context in browser error reports
376 |
377 | ## 0.9.92
378 |
379 | ### Patch Changes
380 |
381 | - 347cda1: Review component e2e tests
382 |
383 | ## 0.9.91
384 |
385 | ### Patch Changes
386 |
387 | - 6a7d779: Review Slot implementation
388 |
389 | ## 0.9.90
390 |
391 | ### Patch Changes
392 |
393 | - 4b57f7e: Remove Spinner tests
394 |
395 | ## 0.9.89
396 |
397 | ### Patch Changes
398 |
399 | - 2968eb9: fix initialValue handling in selects in forms
400 | - 94f4eb5: safari regexp error workaround for optimized build, revert select inside form fix
401 | - 8364c03: add new TextBox and TextArea test cases
402 |
403 | ## 0.9.88
404 |
405 | ### Patch Changes
406 |
407 | - b79d7d8: Fix flaky Checkbox e2e tests
408 |
409 | ## 0.9.87
410 |
411 | ### Patch Changes
412 |
413 | - 33846c2: Fix ios regex failure
414 |
415 | ## 0.9.86
416 |
417 | ### Patch Changes
418 |
419 | - 48af60d: Temporarily suspend new checkbox e2e tests
420 |
421 | ## 0.9.85
422 |
423 | ### Patch Changes
424 |
425 | - ee8d6ad: Fix "required" validation issue with "integer" and "number" FormItem
426 | - 9ca7572: Extend the component API metadata with method signature and parameter descriptions
427 | - 6944d2f: Add a scrollIntoView method to Heading
428 | - c0c10e7: Added missing autoFocus feature and aria labels to Checkbox
429 | - cbe1ef2: Use grammar and syntax highlight files straight form the xmlui package, instead of duplicating them in every app.
430 |
431 | ## 0.9.84
432 |
433 | ### Patch Changes
434 |
435 | - c54abf3: update deps
436 |
437 | ## 0.9.83
438 |
439 | ### Patch Changes
440 |
441 | - 8e3d6a3: Prevent the xmlui-optimizer to raise error on ShadowRoot
442 | - 8644010: Add a scrollIntoView api to Bookmark
443 |
444 | ## 0.9.82
445 |
446 | ### Patch Changes
447 |
448 | - 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.
449 | - 1101bf5: Fix a React warning in MarkdownNative (headingRef)
450 | - cd8db58: Fixed ModalDialog overlay and fullScreen in nested apps. Now dialogs defined in nested apps stay inside them.
451 | - 13beb58: Fixed ModalDialog context error when dialog is called from ApiCall or components using "confirm" in XMLUI code.
452 | - 79c1d8a: fix: allow the playground to use the same tone as its source
453 |
454 | ## 0.9.81
455 |
456 | ### Patch Changes
457 |
458 | - 59680b7: Allow configuring the initiallyShowCode flag in ComponentViewer
459 |
460 | ## 0.9.80
461 |
462 | ### Patch Changes
463 |
464 | - 4598566: NumberBox and FromItem type="number" accepts numeric string as initialValue
465 | - 14e6a7d: feat: add splitView to code inspection
466 | - cf05bd2: Fix non-fatal StandaloneApp.tsx issue
467 |
468 | ## 0.9.79
469 |
470 | ### Patch Changes
471 |
472 | - ad21a31: enhance treeshaking
473 |
474 | ## 0.9.78
475 |
476 | ### Patch Changes
477 |
478 | - 94a68f0: Toggle password visibility in PasswordInput
479 | - 94a68f0: Extend markdown to render compound headings with code spans and anchors
480 | - 163a45c: Add ToneSwitch with icon customization
481 | - 7ce528b: fix: BarChart - size management
482 | - c6eb9a8: Fixed scrolling to specific Bookmarks inside nested apps.
483 |
484 | ## 0.9.77
485 |
486 | ### Patch Changes
487 |
488 | - c867f38: Change split view startup animation
489 |
490 | ## 0.9.76
491 |
492 | ### Patch Changes
493 |
494 | - aa08a8c: introducing ApiInterceptor->useWorker: true/false
495 | - 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.
496 | - 5761868: improve: BarChart - add tick formatter for X and Y axes
497 |
498 | ## 0.9.75
499 |
500 | ### Patch Changes
501 |
502 | - c876be8: Turn docs deploy to standard routing
503 |
504 | ## 0.9.74
505 |
506 | ### Patch Changes
507 |
508 | - 0043c5d: NestedApp new prop: withSplashScreen
509 |
510 | ## 0.9.73
511 |
512 | ### Patch Changes
513 |
514 | - 88bf4f6: extend formatHumanElapsedTime with a short format flag
515 | - fef53db: Allow specifying href targets with the markdown link tag
516 | - 6167648: Fix the useMouseEventHandlers hook
517 | - b2f4483: Fix missing code fence display
518 | - e9040c6: Make the nested app's header smaller
519 |
520 | ## 0.9.72
521 |
522 | ### Patch Changes
523 |
524 | - 4ab3b8a: add omitH1 to TableOfContents
525 | - ac4a283: remove the AppWithCodeView component
526 | - 38454c9: fix ApiInterceptor race conditions (inside NestedApps)
527 |
528 | ## 0.9.71
529 |
530 | ### Patch Changes
531 |
532 | - 5774c53: fix ssr issues with Theme components
533 |
534 | ## 0.9.70
535 |
536 | ### Patch Changes
537 |
538 | - 1da7847: Adjust CodeBlock theme variables for dark tone
539 |
540 | ## 0.9.69
541 |
542 | ### Patch Changes
543 |
544 | - 9b36621: fix flaky Checkbox tests
545 |
546 | ## 0.9.68
547 |
548 | ### Patch Changes
549 |
550 | - 9b1f718: change: add back the logo and the buttons to the xmlui-pg split view
551 | - c79ced7: fix ssr hydration warn in AppWithCodeView
552 | - d030ac2: A few theme variable defaults updated
553 | - 21c4fd6: fix: mocked apis should work with multiple NestedApps
554 |
555 | ## 0.9.67
556 |
557 | ### Patch Changes
558 |
559 | - 51a5b05: Small changes in a few component's metadata representation
560 | - 9048af1: Remove the header logo and buttons from the AppWithCodeViewNative component
561 | - 94f0e66: Accounted for some bad inputs in code fences when highlighting rows & substrings
562 | - 3f0e6b0: fix memoization for tabs, pageInfo
563 |
564 | ## 0.9.66
565 |
566 | ### Patch Changes
567 |
568 | - eae8145: Fixed Switch indicator positioning
569 | - b6c64de: improve: charts - improved tick rendering
570 | - 459bd3c: improve: Logo - add inline, alt props
571 | - 96be435: feat: CodeBlock - add new themeVariables
572 |
573 | ## 0.9.65
574 |
575 | ### Patch Changes
576 |
577 | - c17fc0d: fix the NestedAppNative.tsx issue introduced in #1547
578 |
579 | ## 0.9.64
580 |
581 | ### Patch Changes
582 |
583 | - 5ad3ffc: Refactored the usage of theme variables in RadioGroup
584 | - da3c8bc: Add a "noHeader" option to the xmlui-pg codefence
585 | - 301cb39: Allow YAML (.yml) theme files in standalone apps
586 | - d5d3f4d: Fixed Bar- & LineChart sizing in the Table component
587 |
588 | ## 0.9.63
589 |
590 | ### Patch Changes
591 |
592 | - b9c0881: Fix: add a workaround to ListNative to avoid issues coming from undefined row values
593 |
594 | ## 0.9.62
595 |
596 | ### Patch Changes
597 |
598 | - 832f31d: fix: nestedApp fills the available space in AppWithCode component
599 | - 4f9ff06: Fix the build issue with FormSection
600 |
601 | ## 0.9.61
602 |
603 | ### Patch Changes
604 |
605 | - 4ef5f3f: This version does not contain any real changes; it's just for bumping the version number.
606 |
607 | ## 0.9.60
608 |
609 | ### Patch Changes
610 |
611 | - f37ed8c: Fine tune AppWithCodeView header
612 | - 736dbc8: improve: AppWithCode - center the XML/UI buttons
613 | - e2a6e1a: Add a popOutUrl="<url>" option to xmlui-pg to allow pop out to a custom playground location
614 |
615 | ## 0.9.59
616 |
617 | ### Patch Changes
618 |
619 | - 2a07157: Rename Pages property 'defaultRoute' to 'fallbackPath'
620 | - 97b3241: improve: expanding the styles of the components responsible for code display with new theme variables.
621 | - 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.
622 | - f19720c: Added 0 min width to PieChart, Fixed focus error when one checkbox's state change depended on another
623 | - 66c2288: Fixed NavLink indentation in horizontal App layout, if in a nested NavGroup in the NavPanel
624 | - 2d27204: Fixed a number of color & visual state representations of the components: DatePicker, Switch, Select, TextBox, TextArea, NumberBox, AutoComplete
625 |
626 | ## 0.9.58
627 |
628 | ### Patch Changes
629 |
630 | - dc43275: Fixed Pie- & DonutChart height property.
631 | - f9562b5: make flowLayout auto-responsive behavior a bit smarter
632 | - 1af11af: fix: eliminating the duplication of toast messages
633 | - 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.
634 | - 7d255a9: Changed open in new window button tooltip label for all occurrences.
635 | - 69a7a1f: Fixed NavLink label break if overflowing available space.
636 | - 873348c: new form properties: onSuccess, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage
637 | - 46bfe72: default style tweaks
638 |
639 | ## 0.9.57
640 |
641 | ### Patch Changes
642 |
643 | - 93a1e70: fix: NavPanel - use layoutCss
644 |
645 | ## 0.9.56
646 |
647 | ### Patch Changes
648 |
649 | - 9a3c3b6: feat: xmlui-devtools - start dialog animation from the click, use exit animation as well
650 |
651 | ## 0.9.55
652 |
653 | ### Patch Changes
654 |
655 | - d507ea8: Add AppWithCodeView component to display code and running app side-by-side
656 |
657 | ## 0.9.54
658 |
659 | ### Patch Changes
660 |
661 | - 2688a95: Change TreeDisplay theme variable defaults
662 |
663 | ## 0.9.53
664 |
665 | ### Patch Changes
666 |
667 | - c64fa25: Allow turning on/off heading anchors in appGlobals
668 | - 73c2c21: wip: code inspector buttons - label change, devtools - animation update
669 |
670 | ## 0.9.52
671 |
672 | ### Patch Changes
673 |
674 | - d079208: The Footer component no provides a themeable gap between its children.
675 | - 2a461d8: feat: NestedApp works with ApiInterceptor
676 | - ad6d81e: fix NestedApp apiUrl overwrite
677 | - f5b9f15: feat: xmlui-devtools - use it in a modal dialog
678 | - 88e4741: fix: Table columns do not allow (and indicate) sorting when bindTo is not set
679 | - 7af4b4e: change default borderColor
680 | - 851ae21: fix table styling
681 | - 7872ed0: Default theme variables changed for App, NestedApp, TableOfContents, and Text
682 | - bf00dce: enhance xmlui parser error tolerance, recovering from unclosed tags
683 | - 38180ce: merge xmlui-charts into core
684 |
685 | ## 0.9.51
686 |
687 | ### Patch Changes
688 |
689 | - ef7add9: Added theme variable for setting the horizontal alignment of the logo in the NavPanel.
690 | - ba2b5cd: Moved Drawer logo position to left.
691 | - 96273bf: fix: Slider - min/max value validation
692 | - 1a81bcf: fix: Markdown renders inline/block images correclty
693 |
694 | ## 0.9.50
695 |
696 | ### Patch Changes
697 |
698 | - e6c3b39: standalone usage: explicit codeBehind reference
699 | - 85031c8: Make the "marked" Text variant have lighter background color in dark mode.
700 | - d349036: Tweaked Search dropdown panel styles. Corrected Link component text and decoration hover and active colors
701 |
702 | ## 0.9.49
703 |
704 | ### Patch Changes
705 |
706 | - 9afd588: fix: XmluiCodeHighlighter - update token colorizing (light/dark tone)
707 | - Updated dependencies [3b5e820]
708 | - [email protected]
709 |
710 | ## 0.9.48
711 |
712 | ### Patch Changes
713 |
714 | - b5104b0: feat: Icon component now handles the click event
715 | - 30d5c58: feat: Badge supports theme variable names in colormap
716 | - 2e7f51f: change: the canSort property of Column defaults to true
717 | - 4dd6d7f: feat: chart extension included by default
718 | - f7f0571: fix theme component
719 |
720 | ## 0.9.47
721 |
722 | ### Patch Changes
723 |
724 | - a5bef5d: feat: add "inherit" variant to Text
725 | - ecc52d1: XMLUIExtensions namespace is optional
726 | - 4322e1b: fix: search context scope
727 | - 391927c: feat: add xmlui-tree codefence (displays a tree) to Markdown
728 |
729 | ## 0.9.46
730 |
731 | ### Patch Changes
732 |
733 | - e20e867: improve: DatePicker - change chevrons, Slider - design updates, change drawer icon's padding
734 | - 1f83bb2: Tables in Markdown scroll horizontally if there's not enough space.
735 | - 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.
736 | - bc68330: tweak search indexer
737 | - ef3d208: improve: DatePicker - update chevrons
738 |
739 | ## 0.9.45
740 |
741 | ### Patch Changes
742 |
743 | - 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.
744 | - bd6d1b4: experimental: runtime search indexing
745 | - db5a5f4: fix: Allow APICall as an event handler
746 | - 69b4402: improve: docs - footer logo, FormItem - labelBreak
747 |
748 | ## 0.9.44
749 |
750 | ### Patch Changes
751 |
752 | - 3eab4a3: improve: design updates - devtools, playground, docs
753 | - 411cd34: fix: inbound links to headers in markdown (anchor scroll slightly off)
754 | - cdf96bb: fix: table inside flowlayout, horizontal scrollbar
755 | - 121c55c: Changed the background color of the `marked` Text variant.
756 | - f1092fe: Added emphasized substring highlights to CodeBlocks. Use it in markdown the following way: ```xmlui !/substr/
757 |
758 | ## 0.9.43
759 |
760 | ### Patch Changes
761 |
762 | - e2324bb: fix prefetchedContent handling
763 | - cacbf26: improve: AutoComplete - updating the selection logic, improved handling of readOnly and multi states, and removing unused or redundant code, improving tests
764 | - 05c8dfe: test: DatePicker - fix e2e "disabled state prevents interaction"
765 | - 42571db: test: create tests for the AutoComplete component, fix bugs
766 | - 05205c7: Add diagnostics to language server
767 | - 0a3d059: fix initial offset calculation for virtualized table/list
768 |
769 | ## 0.9.42
770 |
771 | ### Patch Changes
772 |
773 | - 1ab3881: ssr fixes, experimental prefetchedContent
774 | - 3d9729d: test: add tests for the DatePicker component
775 |
776 | ## 0.9.41
777 |
778 | ### Patch Changes
779 |
780 | - 42416ba: test change for CI #2
781 |
782 | ## 0.9.40
783 |
784 | ### Patch Changes
785 |
786 | - 34282f0: chage to test CI
787 |
788 | ## 0.9.39
789 |
790 | ### Patch Changes
791 |
792 | - b79ca46: improve: DatePicker - design update, XmluiCodeHighlighter - use layoutCss
793 | - bbec7a9: Added implicit code highlighter identification by Markdown if one is exposed under the name "codeHighlighter" in the appGlobals in config.
794 | - e67762b: Replaced Admonition emojis with icons
795 |
796 | ## 0.9.38
797 |
798 | ### Patch Changes
799 |
800 | - d314bad: msw update
801 |
802 | ## 0.9.37
803 |
804 | ### Patch Changes
805 |
806 | - 1c33896: ssr fixes
807 | - 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.
808 |
809 | ## 0.9.36
810 |
811 | ### Patch Changes
812 |
813 | - 6b0f2c1: fix: itemWithLabel fills the available width if no other value is specified
814 |
815 | ## 0.9.35
816 |
817 | ### Patch Changes
818 |
819 | - ef3cd6e: Reworked NavLink & NavGroup styling: added disabled, hover & active states to button version
820 |
821 | ## 0.9.34
822 |
823 | ### Patch Changes
824 |
825 | - bae8280: export NestedApp component
826 | - 415aa66: Added color palette colors for CodeBlock, vertical NavPanel now has fixed scrollbar gutter, fixed vertical collapsed icon for NavGroup.
827 |
828 | ## 0.9.33
829 |
830 | ### Patch Changes
831 |
832 | - dabeb53: Fixed NavPanel background color
833 |
834 | ## 0.9.32
835 |
836 | ### Patch Changes
837 |
838 | - 4019d82: xmlui-playground, new exports from xmlui
839 | - 450e1ee: feat: add aria-placeholder to Select component
840 |
841 | ## 0.9.31
842 |
843 | ### Patch Changes
844 |
845 | - ed53215: test release
846 | - ed53215: another testing
847 |
848 | ## 0.9.30
849 |
850 | ### Patch Changes
851 |
852 | - b0ae113: testing
853 |
854 | ## 0.9.29
855 |
856 | ### Patch Changes
857 |
858 | - f15c018: another testing
859 | - f15c018: testing
860 |
861 | ## 0.9.28
862 |
863 | ### Patch Changes
864 |
865 | - 421968b: testing
866 |
867 | ## 0.9.27
868 |
869 | ### Patch Changes
870 |
871 | - 99bba69: testing
872 |
873 | ## 0.9.26
874 |
875 | ### Patch Changes
876 |
877 | - bcf162c: testing changesets
878 |
```