This is page 100 of 141. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/assets/img/bg-iphone-14-pro.jpg?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.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
│ │ └── 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
│ ├── 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
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.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.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── 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/src/components/Table/Table.spec.ts:
--------------------------------------------------------------------------------
```typescript
/**
* Table Component End-to-End Tests
*
* This test suite provides comprehensive coverage for the Table component following
* XMLUI testing conventions. The tests validate all documented properties, events,
* accessibility features, and edge cases.
*
* Test Results Summary:
* - ✅ 25 tests passing
* - ⏭️ 6 tests skipped (require additional implementation investigation)
*
* Key Testing Insights:
* - Use HTML element selectors (th, td, table) rather than role-based selectors
* - Add .first() to avoid strict mode violations when multiple elements match
* - Some features like selection checkboxes exist but are hidden via CSS
* - Loading states, sorting, and pagination may use different implementations than expected
*
* Skipped Tests (for future investigation):
* 1. Loading property visual indicators
* 2. Row selection interaction (checkboxes are hidden)
* 3. Sorting functionality behavior
* 4. Pagination control identification
* 5. Theme variable CSS property testing
*/
import { expect, test } from "../../testing/fixtures";
import { SKIP_REASON } from "../../testing/component-test-helpers";
// Sample data for testing
const sampleData = [
{ id: 1, name: "Apple", quantity: 5, category: "Fruit" },
{ id: 2, name: "Banana", quantity: 3, category: "Fruit" },
{ id: 3, name: "Carrot", quantity: 10, category: "Vegetable" },
{ id: 4, name: "Spinach", quantity: 2, category: "Vegetable" },
];
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test.describe("Basic Functionality", () => {
test("renders with basic data and columns", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
<Column bindTo="category" header="Category"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
// Check for actual HTML table elements
const htmlTable = page.locator("table");
await expect(htmlTable).toBeVisible();
// Check headers are present
const headers = page.locator("th");
await expect(headers).toHaveCount(3); // Should have 3 headers
// Check header text content
await expect(headers.nth(0)).toContainText("Name");
await expect(headers.nth(1)).toContainText("Quantity");
await expect(headers.nth(2)).toContainText("Category");
// Check data content - use first() to avoid strict mode violations
await expect(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Fruit" }).first()).toBeVisible();
});
test("renders with empty data array", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{[]}' testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
// Headers should still be visible
const headers = page.locator("th");
await expect(headers.nth(0)).toContainText("Name");
await expect(headers.nth(1)).toContainText("Quantity");
});
test.describe("data property", () => {
test("displays data with different value types", async ({ initTestBed, page }) => {
const mixedData = [
{ id: 1, name: "Test", number: 42, boolean: true, nullValue: null },
{ id: 2, name: "Another", number: 0, boolean: false, nullValue: undefined },
];
await initTestBed(`
<Table data='{${JSON.stringify(mixedData)}}' testId="table">
<Column bindTo="name"/>
<Column bindTo="number"/>
<Column bindTo="boolean"/>
<Column bindTo="nullValue"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "Test" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "42" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "true" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "0" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "false" }).first()).toBeVisible();
});
test("handles null data gracefully", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{null}' testId="table">
<Column bindTo="name"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
});
test("handles undefined data gracefully", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{undefined}' testId="table">
<Column bindTo="name"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
});
});
test.describe("items property", () => {
test("items property works as alias for data", async ({ initTestBed, page }) => {
await initTestBed(`
<Table items='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
});
test("items takes priority over data when both are provided", async ({ initTestBed, page }) => {
const itemsData = [{ id: 1, name: "Items Data" }];
const dataProperty = [{ id: 1, name: "Data Property" }];
await initTestBed(`
<Table
items='{${JSON.stringify(itemsData)}}'
data='{${JSON.stringify(dataProperty)}}'
testId="table"
>
<Column bindTo="name"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "Items Data" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Data Property" })).toHaveCount(0);
});
});
test.describe("hideHeader property", () => {
test("hides header when hideHeader is true", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' hideHeader="true" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Header should not be visible
await expect(page.locator("th")).toHaveCount(0);
// Data should still be visible
await expect(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
});
test("shows header when hideHeader is false", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' hideHeader="false" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
const headers = page.locator("th");
await expect(headers.nth(0)).toContainText("Name");
await expect(headers.nth(1)).toContainText("Quantity");
});
});
test.describe("noBottomBorder property", () => {
test("removes bottom border when noBottomBorder is true", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' noBottomBorder="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
// Note: Visual border testing would require specific CSS assertions
});
});
test.describe("rowsSelectable property", () => {
test("enables row selection when rowsSelectable is true", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
// Selection checkboxes should be present - they exist but might be hidden via CSS
const checkboxes = page.locator("input[type='checkbox']");
await expect(checkboxes).toHaveCount(5); // 4 data rows + 1 header checkbox
});
test("disables row selection when rowsSelectable is false", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="false" testId="table">
<Column bindTo="name"/>
</Table>
`);
// No selection checkboxes should be present
const checkboxes = page.locator("input[type='checkbox']");
await expect(checkboxes).toHaveCount(0);
});
});
test.describe("autoFocus property", () => {
test("focuses table when autoFocus is true", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' autoFocus="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
const table = page.getByTestId("table");
await expect(table).toBeFocused();
});
});
test.describe("checkboxTolerance property", () => {
test("allows checkbox interaction within compact tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
checkboxTolerance="compact"
onSelectionDidChange="testState = 'selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get first row checkbox - checkboxes exist but are hidden via CSS
const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
// Verify checkbox exists (even if hidden)
await expect(firstRowCheckbox).toBeAttached();
// Get the first table row to interact with
const firstDataRow = page.locator("tbody tr").first();
await expect(firstDataRow).toBeVisible();
// Get row bounds for calculation
const rowBounds = await firstDataRow.boundingBox();
// Click near the left edge of the row (where checkbox would be with tolerance)
// This simulates clicking within the 8px compact tolerance of the checkbox
const clickX = rowBounds.x + 15; // Slightly to the right of where checkbox would be
const clickY = rowBounds.y + rowBounds.height / 2;
// Click within tolerance boundary should trigger selection due to checkboxTolerance="compact"
await page.mouse.click(clickX, clickY);
// Verify checkbox is now checked (using force since it's hidden)
await expect(firstRowCheckbox).toBeChecked();
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('selection changed');
});
test("allows header checkbox interaction within compact tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
checkboxTolerance="compact"
onSelectionDidChange="testState = 'header selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get header checkbox (select all checkbox)
const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
// Verify checkbox exists (even if hidden)
await expect(headerCheckbox).toBeAttached();
// Get the header row to interact with
const headerRow = page.locator("thead tr").first();
await expect(headerRow).toBeVisible();
// Get header row bounds for calculation
const headerBounds = await headerRow.boundingBox();
// Click near the left edge of the header row (where checkbox would be with tolerance)
// This simulates clicking within the 8px compact tolerance of the header checkbox
const clickX = headerBounds.x + 15; // Slightly to the right of where checkbox would be
const clickY = headerBounds.y + headerBounds.height / 2;
// Click within tolerance boundary should trigger "select all" due to checkboxTolerance="compact"
await page.mouse.click(clickX, clickY);
// Verify header checkbox is now checked (select all)
await expect(headerCheckbox).toBeChecked();
// Verify all row checkboxes are also checked (select all behavior)
const allCheckboxes = page.locator("input[type='checkbox']");
const checkboxCount = await allCheckboxes.count();
for (let i = 0; i < checkboxCount; i++) {
await expect(allCheckboxes.nth(i)).toBeChecked();
}
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('header selection changed');
});
test("allows checkbox interaction within none tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
checkboxTolerance="none"
onSelectionDidChange="testState = 'none selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get first row checkbox - checkboxes exist but are hidden via CSS
const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
// Verify checkbox exists (even if hidden)
await expect(firstRowCheckbox).toBeAttached();
// Get the first table row to interact with
const firstDataRow = page.locator("tbody tr").first();
await expect(firstDataRow).toBeVisible();
// Get row bounds for calculation
const rowBounds = await firstDataRow.boundingBox();
// For "none" tolerance, we need to click precisely on the checkbox
// Since checkboxes are hidden, click on their expected position
await firstRowCheckbox.click({ force: true });
// Verify checkbox is now checked
await expect(firstRowCheckbox).toBeChecked();
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('none selection changed');
});
test("allows header checkbox interaction within none tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
checkboxTolerance="none"
onSelectionDidChange="testState = 'header none selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get header checkbox (select all checkbox)
const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
// Verify checkbox exists (even if hidden)
await expect(headerCheckbox).toBeAttached();
// Get the header row to interact with
const headerRow = page.locator("thead tr").first();
await expect(headerRow).toBeVisible();
// Get header row bounds for calculation
const headerBounds = await headerRow.boundingBox();
// For "none" tolerance, we need to click precisely on the checkbox
// Since checkboxes are hidden, click on their expected position
await headerCheckbox.click({ force: true });
// Verify header checkbox is now checked (select all)
await expect(headerCheckbox).toBeChecked();
// Verify all row checkboxes are also checked (select all behavior)
const allCheckboxes = page.locator("input[type='checkbox']");
const checkboxCount = await allCheckboxes.count();
for (let i = 0; i < checkboxCount; i++) {
await expect(allCheckboxes.nth(i)).toBeChecked();
}
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('header none selection changed');
});
test("allows checkbox interaction within comfortable tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
checkboxTolerance="comfortable"
onSelectionDidChange="testState = 'comfortable selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get first row checkbox - checkboxes exist but are hidden via CSS
const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
// Verify checkbox exists (even if hidden)
await expect(firstRowCheckbox).toBeAttached();
// Get the first table row to interact with
const firstDataRow = page.locator("tbody tr").first();
await expect(firstDataRow).toBeVisible();
// Get row bounds for calculation
const rowBounds = await firstDataRow.boundingBox();
// Click near the left edge of the row (where checkbox would be with tolerance)
// This simulates clicking within the 12px comfortable tolerance of the checkbox
const clickX = rowBounds.x + 20; // Further right to test 12px tolerance
const clickY = rowBounds.y + rowBounds.height / 2;
// Click within tolerance boundary should trigger selection due to checkboxTolerance="comfortable"
await page.mouse.click(clickX, clickY);
// Verify checkbox is now checked
await expect(firstRowCheckbox).toBeChecked();
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('comfortable selection changed');
});
test("allows header checkbox interaction within comfortable tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
checkboxTolerance="comfortable"
onSelectionDidChange="testState = 'header comfortable selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get header checkbox (select all checkbox)
const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
// Verify checkbox exists (even if hidden)
await expect(headerCheckbox).toBeAttached();
// Get the header row to interact with
const headerRow = page.locator("thead tr").first();
await expect(headerRow).toBeVisible();
// Get header row bounds for calculation
const headerBounds = await headerRow.boundingBox();
// Click near the left edge of the header row (where checkbox would be with tolerance)
// This simulates clicking within the 12px comfortable tolerance of the header checkbox
const clickX = headerBounds.x + 20; // Further right to test 12px tolerance
const clickY = headerBounds.y + headerBounds.height / 2;
// Click within tolerance boundary should trigger "select all" due to checkboxTolerance="comfortable"
await page.mouse.click(clickX, clickY);
// Verify header checkbox is now checked (select all)
await expect(headerCheckbox).toBeChecked();
// Verify all row checkboxes are also checked (select all behavior)
const allCheckboxes = page.locator("input[type='checkbox']");
const checkboxCount = await allCheckboxes.count();
for (let i = 0; i < checkboxCount; i++) {
await expect(allCheckboxes.nth(i)).toBeChecked();
}
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('header comfortable selection changed');
});
test("allows checkbox interaction within spacious tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
checkboxTolerance="spacious"
onSelectionDidChange="testState = 'spacious selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get first row checkbox - checkboxes exist but are hidden via CSS
const firstRowCheckbox = page.locator("input[type='checkbox']").nth(1); // Skip header checkbox
// Verify checkbox exists (even if hidden)
await expect(firstRowCheckbox).toBeAttached();
// Get the first table row to interact with
const firstDataRow = page.locator("tbody tr").first();
await expect(firstDataRow).toBeVisible();
// Get row bounds for calculation
const rowBounds = await firstDataRow.boundingBox();
// Click near the left edge of the row (where checkbox would be with tolerance)
// This simulates clicking within the 16px spacious tolerance of the checkbox
const clickX = rowBounds.x + 24; // Even further right to test 16px tolerance
const clickY = rowBounds.y + rowBounds.height / 2;
// Click within tolerance boundary should trigger selection due to checkboxTolerance="spacious"
await page.mouse.click(clickX, clickY);
// Verify checkbox is now checked
await expect(firstRowCheckbox).toBeChecked();
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('spacious selection changed');
});
test("allows header checkbox interaction within spacious tolerance boundary", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
checkboxTolerance="spacious"
onSelectionDidChange="testState = 'header spacious selection changed'"
testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
// Get header checkbox (select all checkbox)
const headerCheckbox = page.locator("input[type='checkbox']").first(); // Header checkbox is first
// Verify checkbox exists (even if hidden)
await expect(headerCheckbox).toBeAttached();
// Get the header row to interact with
const headerRow = page.locator("thead tr").first();
await expect(headerRow).toBeVisible();
// Get header row bounds for calculation
const headerBounds = await headerRow.boundingBox();
// Click near the left edge of the header row (where checkbox would be with tolerance)
// This simulates clicking within the 16px spacious tolerance of the header checkbox
const clickX = headerBounds.x + 24; // Even further right to test 16px tolerance
const clickY = headerBounds.y + headerBounds.height / 2;
// Click within tolerance boundary should trigger "select all" due to checkboxTolerance="spacious"
await page.mouse.click(clickX, clickY);
// Verify header checkbox is now checked (select all)
await expect(headerCheckbox).toBeChecked();
// Verify all row checkboxes are also checked (select all behavior)
const allCheckboxes = page.locator("input[type='checkbox']");
const checkboxCount = await allCheckboxes.count();
for (let i = 0; i < checkboxCount; i++) {
await expect(allCheckboxes.nth(i)).toBeChecked();
}
// Verify selection event was fired
await expect.poll(testStateDriver.testState).toEqual('header spacious selection changed');
});
});
test.describe("noDataTemplate property", () => {
test("shows custom no data template when data is empty", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{[]}' testId="table">
<Column bindTo="name"/>
<property name="noDataTemplate">
<Text>No items found</Text>
</property>
</Table>
`);
await expect(page.getByText("No items found")).toBeVisible();
});
test("hides no data view when noDataTemplate is empty string", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{[]}' noDataTemplate="" testId="table">
<Column bindTo="name"/>
</Table>
`);
// Should not show default no data message
await expect(page.getByText(/no data/i)).not.toBeVisible();
});
test("hides no data view when noDataTemplate is null", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{[]}' noDataTemplate="{null}" testId="table">
<Column bindTo="name"/>
</Table>
`);
// Should not show default no data message
await expect(page.getByText(/no data/i)).not.toBeVisible();
});
});
});
// =============================================================================
// TESTS FOR FEATURES THAT NEED INVESTIGATION
// =============================================================================
test.describe("Features Needing Investigation", () => {
test("loading property shows loading state",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table loading="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
await expect(page.getByRole("status").and(page.getByLabel("Loading"))).toBeVisible();
}
);
test("row selection works with checkboxes",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
rowsSelectable="true"
enableMultiRowSelection="true"
testId="table"
>
<Column bindTo="name"/>
</Table>
`);
const checkboxes = page.locator("input[type='checkbox']");
await checkboxes.nth(1).check({ force: true }); // First data row
await checkboxes.nth(2).check({ force: true }); // Second data row
await expect(checkboxes.nth(1)).toBeChecked();
await expect(checkboxes.nth(2)).toBeChecked();
}
);
test("sorting works correctly with descending order",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
sortBy="name"
sortDirection="descending"
testId="table"
>
<Column bindTo="name" canSort="true"/>
</Table>
`);
const cells = page.locator("td");
// Should be sorted reverse alphabetically: Spinach, Carrot, Banana, Apple
await expect(cells.nth(0)).toHaveText("Spinach");
await expect(cells.nth(1)).toHaveText("Carrot");
}
);
test("sorting works correctly with ascending order",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
sortBy="quantity"
sortDirection="ascending"
testId="table"
>
<Column bindTo="quantity" canSort="true"/>
</Table>
`);
const cells = page.locator("td");
// Should be sorted in ascending order: 2, 3, 5, 10
await expect(cells.nth(0)).toHaveText("2");
await expect(cells.nth(1)).toHaveText("3");
await expect(cells.nth(2)).toHaveText("5");
await expect(cells.nth(3)).toHaveText("10");
}
);
test("pagination works correctly",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
isPaginated="true"
testId="table"
>
<Column bindTo="name"/>
</Table>
`);
await expect(page.locator("button[aria-label*='Previous page']")).toBeVisible();
await expect(page.locator("button[aria-label*='Next page']")).toBeVisible();
}
);
});
// =============================================================================
// ACCESSIBILITY TESTS
// =============================================================================
test.describe("Accessibility", () => {
test("has correct table structure", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check proper table semantics
await expect(page.locator("table")).toBeVisible();
await expect(page.locator("th")).toHaveCount(2); // 2 headers
await expect(page.locator("tr")).toHaveCount(5); // 1 header + 4 data rows
});
test("column headers are focusable and have proper structure", async ({
initTestBed,
page
}) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name" canSort="true"/>
<Column bindTo="quantity" header="Quantity" canSort="true"/>
</Table>
`);
const headers = page.locator("th");
await expect(headers.nth(0)).toContainText("Name");
await expect(headers.nth(1)).toContainText("Quantity");
});
test("selection checkboxes have proper accessibility when enabled", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="true" testId="table">
<Column bindTo="name"/>
</Table>
`);
const checkboxes = page.locator("input[type='checkbox']");
// All checkboxes should have proper type
await expect(checkboxes.first()).toHaveAttribute("type", "checkbox");
// Should have expected count
await expect(checkboxes).toHaveCount(5); // 4 data rows + 1 header
});
test("has proper headers for screen readers", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Product Name"/>
<Column bindTo="quantity" header="Stock Quantity"/>
</Table>
`);
// Column headers should have descriptive names
await expect(page.locator("th").filter({ hasText: "Product Name" })).toBeVisible();
await expect(page.locator("th").filter({ hasText: "Stock Quantity" })).toBeVisible();
});
});
// =============================================================================
// EDGE CASE TESTS
// =============================================================================
test.describe("Edge Cases", () => {
test("handles no props gracefully", async ({ initTestBed, page }) => {
await initTestBed(`<Table testId="table"/>`);
const table = page.getByTestId("table");
await expect(table).toBeVisible();
});
test("handles data with missing properties", async ({ initTestBed, page }) => {
const incompleteData = [
{ name: "Apple" }, // missing quantity
{ quantity: 5 }, // missing name
{}, // missing both
];
await initTestBed(`
<Table data='{${JSON.stringify(incompleteData)}}' testId="table">
<Column bindTo="name"/>
<Column bindTo="quantity"/>
</Table>
`);
await expect(page.getByTestId("table")).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
});
test("handles deeply nested object properties", async ({ initTestBed, page }) => {
const nestedData = [
{
user: {
profile: {
name: "John Doe"
}
}
},
];
await initTestBed(`
<Table data='{${JSON.stringify(nestedData)}}' testId="table">
<Column bindTo="user.profile.name" header="Name"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "John Doe" }).first()).toBeVisible();
});
test("handles special characters in data", async ({ initTestBed, page }) => {
const specialData = [
{ name: "Special: 🎉", symbol: "★" },
{ name: "Unicode: 你好", symbol: "⚡" },
{ name: "Emoji: 👨👩👧👦", symbol: "🔥" },
];
await initTestBed(`
<Table data='{${JSON.stringify(specialData)}}' testId="table">
<Column bindTo="name"/>
<Column bindTo="symbol"/>
</Table>
`);
await expect(page.locator("td").filter({ hasText: "Special: 🎉" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Unicode: 你好" }).first()).toBeVisible();
await expect(page.locator("td").filter({ hasText: "Emoji: 👨👩👧👦" }).first()).toBeVisible();
});
test("handles custom sorting icons", async ({ initTestBed, page }) => {
await initTestBed(`
<Table
data='{${JSON.stringify(sampleData)}}'
iconNoSort="sort"
iconSortAsc="sort-up"
iconSortDesc="sort-down"
testId="table"
>
<Column bindTo="name" canSort="true" header="Name"/>
</Table>
`);
const headers = page.locator("th");
await expect(headers.first()).toContainText("Name");
});
});
// =============================================================================
// THEME AND STYLING TESTS
// =============================================================================
// TODO: Need more theme variable tests!
test.describe("Theme Variables and Styling", () => {
test("applies heading background color theme variable",
async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name"/>
</Table>
`, {
testThemeVars: { "backgroundColor-heading-Table": "rgb(255, 0, 0)" },
});
const header = page.locator("th").first();
await expect(header).toHaveCSS("background-color", "rgb(255, 0, 0)");
}
);
});
// =============================================================================
// CELL VERTICAL ALIGNMENT TESTS
// =============================================================================
test.describe("Cell Vertical Alignment", () => {
test("applies center alignment by default", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check header cells have center alignment class
const headerCell = page.locator("th").first();
await expect(headerCell).toHaveClass(/alignCenter/);
// Check data cells have center alignment class
const dataCell = page.locator("td").first();
await expect(dataCell).toHaveClass(/alignCenter/);
});
test("applies top alignment when cellVerticalAlign='top'", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="top" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check header cells have top alignment class
const headerCell = page.locator("th").first();
await expect(headerCell).toHaveClass(/alignTop/);
// Check data cells have top alignment class
const dataCell = page.locator("td").first();
await expect(dataCell).toHaveClass(/alignTop/);
});
test("applies bottom alignment when cellVerticalAlign='bottom'", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="bottom" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check header cells have bottom alignment class
const headerCell = page.locator("th").first();
await expect(headerCell).toHaveClass(/alignBottom/);
// Check data cells have bottom alignment class
const dataCell = page.locator("td").first();
await expect(dataCell).toHaveClass(/alignBottom/);
});
test("applies center alignment when cellVerticalAlign='center'", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="center" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
</Table>
`);
// Check header cells have center alignment class
const headerCell = page.locator("th").first();
await expect(headerCell).toHaveClass(/alignCenter/);
// Check data cells have center alignment class
const dataCell = page.locator("td").first();
await expect(dataCell).toHaveClass(/alignCenter/);
});
test("applies alignment to all cells consistently", async ({ initTestBed, page }) => {
await initTestBed(`
<Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="top" testId="table">
<Column bindTo="name" header="Name"/>
<Column bindTo="quantity" header="Quantity"/>
<Column bindTo="category" header="Category"/>
</Table>
`);
// Check all header cells have the same alignment
const headerCells = page.locator("th");
const headerCount = await headerCells.count();
for (let i = 0; i < headerCount; i++) {
await expect(headerCells.nth(i)).toHaveClass(/alignTop/);
}
// Check all data cells have the same alignment
const dataCells = page.locator("td");
const dataCount = await dataCells.count();
for (let i = 0; i < dataCount; i++) {
await expect(dataCells.nth(i)).toHaveClass(/alignTop/);
}
});
});
```
--------------------------------------------------------------------------------
/xmlui/conventions/copilot-conventions.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Coding Conventions
## Default Values Convention
### Overview
XMLUI components follow a specific pattern for handling default values to ensure consistency between the component metadata and their React Native implementations. The convention ensures that default values are defined in a single location and referenced throughout the codebase, preventing duplication and inconsistencies.
### Convention Rules
1. **Define Default Values in Native Component**:
- Default values should be defined in a `defaultProps` object in the Native component implementation file (e.g., `ComponentNameNative.tsx`).
- The `defaultProps` object should explicitly type which properties it's defining defaults for using TypeScript's `Pick` type.
2. **Reference Default Values in Component Implementation**:
- When destructuring props in the component implementation, reference the `defaultProps` values as defaults.
- Example: `{ propName = defaultProps.propName } = props`
3. **Reference Default Values in Component Metadata**:
- In the component metadata file (e.g., `ComponentName.tsx`), import the `defaultProps` from the Native component.
- Use these default values in the component metadata's `defaultValue` fields.
- Example: `defaultValue: defaultProps.propName`
4. **Resolution of Inconsistencies**:
- If inconsistencies are found between metadata and implementation, the XMLUI (metadata) default value prevails.
- Update the implementation to match the metadata default value.
### Example Implementation
#### ComponentNameNative.tsx
```typescript
type Props = {
size?: string;
color?: string;
// other props...
};
export const defaultProps: Pick<Props, "size" | "color"> = {
size: "medium",
color: "primary",
};
export const ComponentName = forwardRef(function ComponentName(
{
size = defaultProps.size,
color = defaultProps.color,
// other props with defaults...
}: Props,
forwardedRef: ForwardedRef<HTMLDivElement>
) {
// Component implementation...
});
```
#### ComponentName.tsx
```typescript
import { createMetadata } from "../../abstractions/ComponentDefs";
import { ComponentName, defaultProps } from "./ComponentNameNative";
export const ComponentNameMd = createMetadata({
props: {
size: {
description: "The size of the component",
valueType: "string",
defaultValue: defaultProps.size,
},
color: {
description: "The color of the component",
valueType: "string",
defaultValue: defaultProps.color,
},
// other props...
},
// other metadata...
});
export const componentNameComponentRenderer = createComponentRenderer(
"ComponentName",
ComponentNameMd,
({ node, extractValue, layoutCss }) => {
return (
<ComponentName
size={extractValue(node.props.size)}
color={extractValue(node.props.color)}
style={layoutCss}
>
{/* component content */}
</ComponentName>
);
}
);
```
### Common Mistakes to Avoid
1. **Duplicate Default Definitions**:
- Don't define default values both in `defaultProps` and inline in the component.
2. **Inconsistent Types**:
- Ensure the type of default values is the same in both metadata and implementation (e.g., `"0.1"` string vs `0.1` number).
3. **Setting `defaultProps` on ComponentMetadata**:
- The `ComponentMetadata` type doesn't have a `defaultProps` property, so avoid lines like:
```typescript
// Do NOT do this as it causes TypeScript errors
ComponentNameMd.defaultProps = defaultProps;
```
4. **Incomplete Default Props Coverage**:
- Make sure all props with default values follow this convention, not just some of them.
By following these conventions, we ensure that default values are consistently defined and referenced throughout the XMLUI codebase, making maintenance easier and reducing the likelihood of bugs related to default values.
## GitHub Copilot Conventions
### Conversation Context Summary
When GitHub Copilot summarizes the conversation context for the XMLUI project, it should include the following:
1. **Include Conventions File**:
- Always read the content of the `/Users/dotneteer/source/xmlui/xmlui/conventions/copilot-conventions.md` file into the context summary.
- This ensures that all conventions are available to Copilot when continuing work on the project.
2. **Maintain Record of Components Processed**:
- Keep track of which components have been analyzed and modified.
- List the component file paths that have been worked on.
3. **Record Code Changes**:
- Summarize the nature of changes made to components.
- Include specific details about what default prop patterns were implemented or fixed.
4. **Track Inconsistencies Found**:
- Document any inconsistencies found between component metadata and implementations.
- Note how these inconsistencies were resolved.
5. **Note Pending Work**:
- Maintain a list of components or tasks still pending review or updates.
This convention ensures continuity in long-running tasks and helps maintain a consistent approach to code modifications across the XMLUI project.
## Layout Properties Convention
### Overview
XMLUI has a comprehensive system for handling layout properties that affect component styling and positioning. These properties need to be consistently defined, documented, and integrated throughout the codebase. This convention ensures that any new layout property is properly added to all relevant parts of the system.
### Convention Rules
1. **Layout Property Definition**:
- All layout properties must be added to the `layoutOptionKeys` array in `descriptorHelper.ts`.
- Properties should be added in alphabetical order within their logical grouping.
2. **Layout Resolver Integration**:
- Add the property to the `LayoutProps` type definition in `layout-resolver.ts`.
- Include the property in the `layoutPatterns` object with appropriate pattern validation.
- Group properties logically (Dimensions, Typography, Animations, etc.) with clear comments.
3. **Documentation Requirements**:
- Each layout property requires documentation in two places:
- `layout-props.md`: A concise definition with a link to detailed documentation.
- `common-units.md`: Detailed explanation of allowed values, examples, and visual demos.
4. **Theme Keyword Links**:
- Add the property to the `themeKeywordLinks` object in `MetadataProcessor.mjs`.
- Link format: `"propertyName": "[propertyName](../styles-and-themes/common-units/#anchor-name)"`.
- Ensure the anchor name exists in the common-units.md file.
### Implementation Process
When adding a new layout property, follow these steps:
1. **Update Type Definitions**:
```typescript
// In layout-resolver.ts
export type LayoutProps = {
// ...existing properties
// Add new property in appropriate section with comment
newProperty?: string | number;
};
```
2. **Update Layout Patterns**:
```typescript
// In layout-resolver.ts - layoutPatterns object
const layoutPatterns: Record<keyof LayoutProps, RegExp[]> = {
// ...existing patterns
// Add new property (with validation patterns if needed)
newProperty: [],
};
```
3. **Update Property Keys**:
```typescript
// In descriptorHelper.ts
export const layoutOptionKeys = [
// ...existing keys
"newProperty",
];
```
4. **Add Documentation in `layout-props.md`**:
```markdown
## `newProperty`
This property [describes what it does](/styles-and-themes/common-units#anchor-name).
```
5. **Add Detailed Documentation in `common-units.md`**:
```markdown
## New Property Values [#anchor-name]
This value [detailed description of what it does and how it works]...
| Value | Description |
| ----- | ----------- |
| `value1` | Description of value1 |
| `value2` | Description of value2 |
```xmlui-pg name="Example name"
<App>
// Example showing the property in use
</App>
```
```
6. **Add Theme Keyword Link**:
```javascript
// In MetadataProcessor.mjs - themeKeywordLinks object
const themeKeywordLinks = {
// ...existing links
newProperty: "[newProperty](../styles-and-themes/common-units/#anchor-name)",
};
```
### Common Patterns for Layout Properties
1. **Size Properties**:
- Support standard CSS units (`px`, `rem`, `em`, `%`, etc.)
- May support special values like `auto`, `inherit`, etc.
- Anchor: `#size`
2. **Color Properties**:
- Support color names, hex values, rgb/rgba, hsl/hsla
- May support theme variables with `$` prefix
- Anchor: `#color`
3. **Style Properties**:
- Usually support enumerated string values (`solid`, `dashed`, etc.)
- Document all possible values in a table
- Create property-specific anchor (e.g., `#border-style`)
4. **Animation Properties**:
- Document component parts (duration, timing function, etc.)
- Include examples with visual demonstrations
- Anchor: specific to property (e.g., `#transition`)
5. **Text and Typography Properties**:
- Group related properties together in documentation
- Include visual examples showing differences
- Anchors: specific to property (e.g., `#text-align`, `#word-spacing`)
### Example Implementation
#### Adding the `transition` Layout Property
1. **Update Layout Properties Type**:
```typescript
// In layout-resolver.ts
export type LayoutProps = {
// ...existing properties
// --- Animation
transition?: string;
};
```
2. **Update Layout Patterns**:
```typescript
// In layout-resolver.ts - layoutPatterns object
const layoutPatterns: Record<keyof LayoutProps, RegExp[]> = {
// ...existing patterns
// --- Animation
transition: [],
};
```
3. **Update Property Keys**:
```typescript
// In descriptorHelper.ts
export const layoutOptionKeys = [
// ...existing keys
"transition",
];
```
4. **Add Property Documentation in `layout-props.md`**:
```markdown
## `transition`
This property is a shorthand for [transition effects](/styles-and-themes/common-units#transition) that specify the CSS property to which a transition effect should be applied, the duration and timing of the transition, and any delay.
```
5. **Add Detailed Documentation in `common-units.md`** (simplified example):
```markdown
## Transition Values [#transition]
This value specifies the CSS property to animate, the duration, timing function, and delay...
| Timing Function Values | Description |
| --------------------- | ----------- |
| `ease` | Starts slow, becomes fast, then ends slowly... |
```xmlui-pg name="Transition examples"
<App>
// Examples showing transitions
</App>
```
```
6. **Add Theme Keyword Link**:
```javascript
// In MetadataProcessor.mjs - themeKeywordLinks object
const themeKeywordLinks = {
// ...existing links
transition: "[transition](../styles-and-themes/common-units/#transition)",
};
```
By following these conventions, we ensure consistent implementation and documentation of layout properties across the XMLUI codebase, making the system more maintainable and easier to extend.
## End-to-End Testing Convention
### Overview
XMLUI components require comprehensive end-to-end testing using Playwright to ensure reliability, accessibility, and performance. This convention establishes patterns for creating thorough test suites that cover all aspects of component behavior, from basic functionality to edge cases and performance optimizations.
### Component Test Location Map
| Component Type | Component Location | Test File Location |
| -------------- | ----------------- | ----------------- |
| Standard Components | `/xmlui/src/components/ComponentName/ComponentName.tsx` | `/xmlui/src/components/ComponentName/ComponentName.spec.ts` |
| Container Components | `/xmlui/src/components/Container/Container.tsx` | `/xmlui/src/components/Container/Container.spec.ts` |
| Form Components | `/xmlui/src/components/FormControl/FormControl.tsx` | `/xmlui/src/components/FormControl/FormControl.spec.ts` |
**Critical Rules for Test Creation:**
1. ✅ ALL component tests MUST be placed in the same folder as the component itself
2. ✅ ALL newly created tests MUST use the `.skip` modifier
3. ✅ Each skipped test MUST include the comment: `// TODO: review these Copilot-created tests`
4. ❌ NEVER place tests in the global test directory (`/tests/tests/`)
5. ❌ NEVER create non-skipped tests for new components
### Convention Rules
1. **Test Structure and Organization**:
- Tests should be organized into logical sections with clear comments and separators.
- Use descriptive test names that clearly indicate what behavior is being tested.
- Group related tests together (e.g., "Size Property Tests", "Edge Cases and Name Processing").
2. **Comprehensive Test Coverage**:
- **Basic Functionality**: Core component behavior and prop handling
- **Accessibility**: ARIA attributes, keyboard navigation, screen reader compatibility
- **Visual States**: Different visual configurations and state transitions
- **Edge Cases**: Null/undefined props, empty values, special characters
- **Performance**: Memoization, rapid prop changes, memory stability
- **Integration**: Component behavior in different layout contexts
3. **Test Implementation Patterns**:
- Use `initTestBed` for component setup with proper XMLUI markup
- Create driver instances for component interaction
- Use `expect.poll()` for async state verification
- Implement proper cleanup and isolation between tests
4. **Accessibility Testing Requirements**:
- Verify correct ARIA attributes (`aria-label`, `role`)
- Test keyboard navigation and focus management
- Ensure proper alt text for images
- Validate screen reader compatibility
5. **Performance Testing Patterns**:
- Test memoization behavior through functional verification
- Verify efficient prop change handling
- Test memory stability with multiple component instances
- Ensure smooth state transitions
### Test Categories and Implementation
#### 1. Basic Functionality Tests
```typescript
test("component renders with basic props", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`<ComponentName prop="value"/>`, {});
const driver = await createComponentDriver();
await expect(driver.component).toBeVisible();
await expect(driver.component).toContainText("Expected Content");
});
```
#### 2. Accessibility Tests
```typescript
test("component has correct accessibility attributes", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`<ComponentName name="Test User"/>`, {});
const driver = await createComponentDriver();
await expect(driver.component).toHaveAttribute('aria-label', 'Expected Label');
await expect(driver.component).toHaveAttribute('role', 'expected-role');
});
test("component is keyboard accessible when interactive", async ({ initTestBed, createComponentDriver }) => {
const { testStateDriver } = await initTestBed(`
<ComponentName
name="Test User"
onClick="testState = 'keyboard-activated'"
/>
`, {});
const driver = await createComponentDriver();
await driver.component.focus();
await expect(driver.component).toBeFocused();
await driver.component.press('Enter');
await expect.poll(testStateDriver.testState).toEqual('keyboard-activated');
});
```
#### 3. Visual State Tests
```typescript
test("component handles different visual states", async ({ initTestBed, createComponentDriver }) => {
// Test initial state
await initTestBed(`<ComponentName state="initial"/>`, {});
const driver1 = await createComponentDriver();
await expect(driver1.component).toHaveClass(/initial-state/);
// Test changed state
await initTestBed(`<ComponentName state="changed"/>`, {});
const driver2 = await createComponentDriver();
await expect(driver2.component).toHaveClass(/changed-state/);
});
```
#### 4. Edge Case Tests
```typescript
test("component handles null and undefined props gracefully", async ({ initTestBed, createComponentDriver }) => {
// Test with undefined props
await initTestBed(`<ComponentName/>`, {});
const driver1 = await createComponentDriver();
await expect(driver1.component).toBeVisible();
// Test with empty string props
await initTestBed(`<ComponentName prop=""/>`, {});
const driver2 = await createComponentDriver();
await expect(driver2.component).toBeVisible();
});
test("component handles special characters correctly", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`<ComponentName name="José María"/>`, {});
const driver = await createComponentDriver();
await expect(driver.component).toBeVisible();
// Test specific behavior with special characters
});
```
#### 5. Performance Tests
```typescript
test("component memoization prevents unnecessary re-renders", async ({ initTestBed, createComponentDriver }) => {
const { testStateDriver } = await initTestBed(`
<ComponentName
name="Test User"
onClick="testState = ++testState || 1"
/>
`, {});
const driver = await createComponentDriver();
// Test that memoization works through stable behavior
await driver.component.click();
await expect.poll(testStateDriver.testState).toEqual(1);
await driver.component.click();
await expect.poll(testStateDriver.testState).toEqual(2);
// Component should maintain consistent behavior
await expect(driver.component).toBeVisible();
});
test("component handles rapid prop changes efficiently", async ({ initTestBed, createComponentDriver }) => {
// Test multiple rapid prop changes
await initTestBed(`<ComponentName prop="value1"/>`, {});
const driver1 = await createComponentDriver();
await expect(driver1.component).toBeVisible();
await initTestBed(`<ComponentName prop="value2"/>`, {});
const driver2 = await createComponentDriver();
await expect(driver2.component).toBeVisible();
// Verify final state is correct
await expect(driver2.component).toContainText("Expected Final Content");
});
```
#### 6. Integration Tests
```typescript
test("component works correctly in different layout contexts", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`<ComponentName name="Layout Test"/>`, {});
const driver = await createComponentDriver();
// Test basic layout integration
await expect(driver.component).toBeVisible();
// Test bounding box and dimensions
const boundingBox = await driver.component.boundingBox();
expect(boundingBox).not.toBeNull();
expect(boundingBox!.width).toBeGreaterThan(0);
expect(boundingBox!.height).toBeGreaterThan(0);
});
```
### Component-Specific Testing Considerations
#### Container Components (like Accordion)
1. **Expansion State Testing**:
```typescript
test("component expands and collapses correctly", async ({ initTestBed, createAccordionDriver }) => {
await initTestBed(`<Accordion><AccordionItem header="Test">Content</AccordionItem></Accordion>`, {});
const driver = await createAccordionDriver();
// Test initial collapsed state
let content = driver.component.locator(".accordion-content");
await expect(content).not.toBeVisible();
// Click to expand
const header = driver.component.locator(".accordion-header");
await header.click();
// Test expanded state
await expect(content).toBeVisible();
// Click to collapse
await header.click();
// Test collapsed state again
await expect(content).not.toBeVisible();
});
```
2. **Multiple Item Testing**:
```typescript
test("multiple items can expand independently", async ({ initTestBed, createAccordionDriver }) => {
await initTestBed(`
<Accordion>
<AccordionItem header="Item 1">Content 1</AccordionItem>
<AccordionItem header="Item 2">Content 2</AccordionItem>
</Accordion>
`, {});
const driver = await createAccordionDriver();
const headers = driver.component.locator(".accordion-header").all();
// Expand first item
await (await headers)[0].click();
// Verify first expanded, second collapsed
let contents = driver.component.locator(".accordion-content").all();
await expect((await contents)[0]).toBeVisible();
await expect((await contents)[1]).not.toBeVisible();
});
```
3. **Component API Testing**:
```typescript
test("component API methods work correctly", async ({ initTestBed, createAccordionDriver, page }) => {
const { testStateDriver } = await initTestBed(`
<Accordion ref="accordionRef">
<AccordionItem header="API Test">Content</AccordionItem>
</Accordion>
<Button id="expandBtn" onClick="accordionRef.expand('0'); testState = 'expanded'">Expand</Button>
`, {});
const driver = await createAccordionDriver();
// Test API method
await page.locator("#expandBtn").click();
await expect.poll(testStateDriver.testState).toEqual('expanded');
// Verify component state changed
const content = driver.component.locator(".accordion-content");
await expect(content).toBeVisible();
});
```
4. **Icon Rendering Testing**:
```typescript
test("component displays custom icons", async ({ initTestBed, createAccordionDriver }) => {
await initTestBed(`
<Accordion collapsedIcon="plus" expandedIcon="minus">
<AccordionItem header="Custom Icons">Content</AccordionItem>
</Accordion>
`, {});
const driver = await createAccordionDriver();
// Check collapsed icon
const icon = driver.component.locator(".chevron");
await expect(icon).toHaveAttribute("data-icon-name", "plus");
// Expand and check expanded icon
const header = driver.component.locator(".accordion-header");
await header.click();
await expect(icon).toHaveAttribute("data-icon-name", "minus");
});
```
#### Components With Custom Templates
1. **Custom Template Rendering**:
```typescript
test("component renders custom templates correctly", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`
<ComponentName headerTemplate={
<div>
<Icon name="star" />
<Text fontWeight="bold">Custom Template</Text>
</div>
}>
Content
</ComponentName>
`, {});
const driver = await createComponentDriver();
// Verify template elements rendered correctly
await expect(driver.component.locator("svg[data-icon-name='star']")).toBeVisible();
await expect(driver.component.locator("text=Custom Template")).toBeVisible();
});
```
#### Testing Theme Variables
1. **Theme Variable Application Testing**:
```typescript
test("applies theme variables to specific element parts", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`<ComponentName />`, {
testThemeVars: {
"backgroundColor-header-ComponentName": "rgb(255, 0, 0)",
"color-content-ComponentName": "rgb(0, 255, 0)",
},
});
const driver = await createComponentDriver();
// Check styles applied to specific component parts
await expect(driver.component.locator(".header")).toHaveCSS("background-color", "rgb(255, 0, 0)");
await expect(driver.component.locator(".content")).toHaveCSS("color", "rgb(0, 255, 0)");
});
```
2. **Border and Padding Theme Variables**:
```typescript
test("applies border and padding theme variables correctly", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`<ComponentName />`, {
testThemeVars: {
"border-ComponentName": "1px solid rgb(255, 0, 0)",
"padding-ComponentName": "10px",
},
});
const driver = await createComponentDriver();
// Check border properties
await expect(driver.component).toHaveCSS("border-width", "1px");
await expect(driver.component).toHaveCSS("border-style", "solid");
await expect(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
// Check padding
await expect(driver.component).toHaveCSS("padding", "10px");
});
```
3. **Border Side-Specific Theme Variables**:
```typescript
test("prioritizes specific border sides over general border", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`<ComponentName />`, {
testThemeVars: {
"border-ComponentName": "1px solid rgb(0, 0, 0)",
"borderLeft-ComponentName": "2px dashed rgb(255, 0, 0)",
},
});
const driver = await createComponentDriver();
// Check general borders applied to most sides
await expect(driver.component).toHaveCSS("border-top-width", "1px");
await expect(driver.component).toHaveCSS("border-right-width", "1px");
await expect(driver.component).toHaveCSS("border-bottom-width", "1px");
// Check specific side override
await expect(driver.component).toHaveCSS("border-left-width", "2px");
await expect(driver.component).toHaveCSS("border-left-style", "dashed");
await expect(driver.component).toHaveCSS("border-left-color", "rgb(255, 0, 0)");
});
```
### Test Name and Organization Patterns
1. **Naming Components Tests by Feature**:
- Avoid: `"test component with value X"`
- Prefer: `"renders with size=small correctly"`
2. **Naming Pattern for Behavior Tests**:
- `"{verb} {feature} {when/with} {condition}"`
- Examples:
- `"expands when header is clicked"`
- `"applies red background with danger prop"`
- `"renders placeholder when value is empty"`
3. **Naming Pattern for Property Tests**:
- `"prioritizes {specific-prop} over {general-prop}"`
- `"applies {style} to {component-part} with {theme-var}"`
- Examples:
- `"prioritizes borderLeftWidth over borderWidth"`
- `"applies padding to all sides with padding theme var"`
4. **Test Organization Patterns**:
```typescript
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test("renders with basic props", async () => {});
test("updates display when props change", async () => {});
// =============================================================================
// ACCESSIBILITY TESTS
// =============================================================================
test("has correct accessibility attributes", async () => {});
test("is keyboard accessible when interactive", async () => {});
// =============================================================================
// VISUAL STATE TESTS
// =============================================================================
test("applies theme variables correctly", async () => {});
test("handles different visual states", async () => {});
// =============================================================================
// EDGE CASE TESTS
// =============================================================================
test("handles null and undefined props gracefully", async () => {});
test("handles special characters correctly", async () => {});
// =============================================================================
// PERFORMANCE TESTS
// =============================================================================
test("memoization prevents unnecessary re-renders", async () => {});
// =============================================================================
// INTEGRATION TESTS
// =============================================================================
test("works correctly in different layout contexts", async () => {});
```
By following these conventions, XMLUI components will have comprehensive, reliable, and maintainable end-to-end test suites that ensure quality and performance across all scenarios.
### Skipped Test Creation Convention
When creating skeleton tests for components, follow these guidelines to ensure consistency and maintainability across the test suite. These tests provide a roadmap for future implementation while maintaining a clear structure.
#### Convention Rules (CRITICAL)
1. **Test Structure Organization**:
- Organize existing tests into appropriate categories (Basic Functionality, Accessibility, etc.)
- Maintain clear section separators with consistent formatting
- Keep related tests grouped together within their sections
2. **Test Naming Conventions**:
- Rename existing tests to follow naming conventions (as described in Test Name and Organization Patterns)
- Use descriptive, action-oriented names that clearly indicate what's being tested
- Be specific about the behavior or prop being verified
3. **Skipped Test Creation** (MANDATORY):
- ✅ ALL newly created tests MUST be skipped using the `.skip` modifier
- ✅ ALWAYS include the standard TODO comment: `// TODO: review these Copilot-created tests`
- ✅ Implement a complete test body that follows test patterns for that category
- ❌ NEVER create non-skipped tests when adding skeleton tests to components
4. **Complete Implementation**:
- Even in skipped tests, provide a complete implementation
- Include proper assertions that verify the expected behavior
- Structure the test to provide a clear example of how it should work when enabled
#### Implementation Process
1. **Organize Tests by Category**:
```typescript
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
// (Basic tests here)
// =============================================================================
// ACCESSIBILITY TESTS
// =============================================================================
// (Accessibility tests here)
```
2. **Rename Existing Tests with Clear Patterns**:
- Before: `test("component test", async () => {...})`
- After: `test("renders with size={size} correctly", async () => {...})`
3. **Add Skipped Tests with TODO Comments**:
```typescript
test.skip("component applies correct theme variables", async ({ initTestBed, createComponentDriver }) => {
// TODO: review these Copilot-created tests
await initTestBed(`<ComponentName />`, {
testThemeVars: {
"backgroundColor-ComponentName": "rgb(255, 0, 0)",
},
});
const driver = await createComponentDriver();
await expect(driver.component).toHaveCSS("background-color", "rgb(255, 0, 0)");
});
```
4. **Implement Complete Test Bodies**:
```typescript
test.skip("handles keyboard navigation correctly", async ({ initTestBed, createComponentDriver }) => {
// TODO: review these Copilot-created tests
const { testStateDriver } = await initTestBed(`
<ComponentName
onKeyDown="testState = 'key-pressed'"
/>
`, {});
const driver = await createComponentDriver();
// Focus the component
await driver.component.focus();
await expect(driver.component).toBeFocused();
// Test keyboard interaction
await driver.component.press('Enter');
await expect.poll(testStateDriver.testState).toEqual('key-pressed');
});
```
#### Example Test Suite with Skipped Tests
```typescript
import { test, expect } from '@playwright/test';
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test("renders with default props", async ({ initTestBed, createComponentDriver }) => {
await initTestBed(`<ComponentName />`, {});
const driver = await createComponentDriver();
await expect(driver.component).toBeVisible();
});
test.skip("updates display when prop changes", async ({ initTestBed, createComponentDriver }) => {
// TODO: review these Copilot-created tests
// Test with initial prop
await initTestBed(`<ComponentName value="initial" />`, {});
let driver = await createComponentDriver();
await expect(driver.component).toContainText("initial");
// Test with updated prop
await initTestBed(`<ComponentName value="updated" />`, {});
driver = await createComponentDriver();
await expect(driver.component).toContainText("updated");
});
// =============================================================================
// ACCESSIBILITY TESTS
// =============================================================================
test.skip("has correct accessibility attributes", async ({ initTestBed, createComponentDriver }) => {
// TODO: review these Copilot-created tests
await initTestBed(`<ComponentName label="Accessible Component" />`, {});
const driver = await createComponentDriver();
await expect(driver.component).toHaveAttribute('role', 'button');
await expect(driver.component).toHaveAttribute('aria-label', 'Accessible Component');
await expect(driver.component).toHaveAttribute('tabindex', '0');
});
```
### Best Practices for Skipped Tests
1. **Clear Reasoning**: The skipped test should clearly indicate why it's important to implement later
2. **Full Implementation**: Implement the complete test body, not just a placeholder
3. **Readable Examples**: Make the test easy to understand for developers who will enable it later
4. **Descriptive Names**: Use clear test names that explain exactly what behavior is being tested
5. **Proper Isolation**: Each skipped test should be independent of other tests
6. **Comprehensive Coverage**: Create skipped tests for all important functionality, even if it's not implemented yet
### Common Mistakes to Avoid
1. **Empty Test Bodies**: Don't create skipped tests without implementing the test body
2. **Missing Comments**: Always include the TODO comment explaining these are Copilot-created tests
3. **Vague Names**: Avoid generic test names like "test component behavior"
4. **Untestable Assertions**: Don't make assertions that can't be tested with the current implementation
5. **Incomplete Categories**: Make sure all required test categories (accessibility, etc.) are represented
By following these conventions for skipped tests, you create a valuable roadmap for future test implementation while maintaining a clear and organized test structure. This approach helps ensure comprehensive test coverage even when all tests aren't immediately ready to run.
### Test File Location Conventions (CRITICAL)
When creating component tests, follow these location conventions:
1. **Component-Level Test Location** (MANDATORY):
- ✅ Test files MUST be located in the same directory as the component being tested
- ✅ Use the naming convention `ComponentName.spec.ts` for test files
- ✅ Example: For a component defined in `/components/Button/Button.tsx`, the test MUST be at `/components/Button/Button.spec.ts`
- ❌ NEVER place test files in the global test directory (`/tests/tests/`)
2. **Test Import Paths**:
- Import test utilities from the testing directory:
```typescript
import { expect, test } from "../../testing/fixtures";
import { getStyles } from "../../testing/component-test-helpers";
```
- Adjust import paths based on the relative location of the component and testing utilities
3. **Component Driver Parameters**:
- Use the appropriate fixture parameters based on component needs:
```typescript
test.skip("basic test", async ({ initTestBed, createComponentDriver }) => {
// For components with component drivers
});
```
4. **Test Execution Context**:
- Tests should be executed from the component's directory
- Run specific component tests with: `npx playwright test ComponentName.spec.ts`
- Test runners will automatically locate tests in the component directories
This location convention ensures tests are closely associated with their components, making the codebase easier to maintain and navigate. It also simplifies the process of finding and updating tests when component implementations change.
### Test Execution and Verification
### Proper Test File Structure Example
Below is an example of a correctly structured skeleton test file for a component. Note that ALL tests are marked with `.skip` and include the required TODO comment:
```typescript
import { test, expect } from "../../testing/fixtures";
import { getStyles } from "../../testing/component-test-helpers";
// Constants for testing
const RED = "rgb(255, 0, 0)";
const GREEN = "rgb(0, 255, 0)";
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test.skip("component renders with basic props", async ({ initTestBed, createComponentDriver }) => {
// TODO: review these Copilot-created tests
await initTestBed(`<ComponentName prop="value"/>`);
const driver = await createComponentDriver();
await expect(driver.component).toBeVisible();
await expect(driver.component).toContainText("Expected Content");
});
// =============================================================================
// ACCESSIBILITY TESTS
// =============================================================================
test.skip("component has correct accessibility attributes", async ({ initTestBed, createComponentDriver }) => {
// TODO: review these Copilot-created tests
await initTestBed(`<ComponentName label="Accessible Label"/>`);
const driver = await createComponentDriver();
await expect(driver.component).toHaveAttribute('role', 'button');
await expect(driver.component).toHaveAttribute('aria-label', 'Accessible Label');
});
// =============================================================================
// VISUAL STATE TESTS
// =============================================================================
test.skip("component applies theme variables correctly", async ({ initTestBed, createComponentDriver }) => {
// TODO: review these Copilot-created tests
await initTestBed(`<ComponentName />`, {
testThemeVars: {
"backgroundColor-ComponentName": RED,
},
});
const driver = await createComponentDriver();
await expect(driver.component).toHaveCSS("background-color", RED);
});
// All remaining test categories follow the same pattern...
```
This example shows the proper structure with:
1. Correct imports from the testing directory
2. Section separators for test categories
3. ALL tests marked with `.skip`
4. Required TODO comment in each test
5. Proper test implementation following the patterns
```
