This is page 102 of 141. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── clean-onions-pick.md
│ ├── config.json
│ ├── curly-llamas-try.md
│ ├── loose-trains-sit.md
│ ├── moody-pans-poke.md
│ ├── puny-worms-make.md
│ ├── rare-cooks-write.md
│ ├── silver-llamas-cough.md
│ └── true-jeans-agree.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── 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.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.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
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── 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/Switch/Switch.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { test, expect } from "../../testing/fixtures";
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test.describe("Basic Functionality", () => {
test("component renders", async ({ initTestBed, page }) => {
await initTestBed(`<Switch />`);
await expect(page.getByRole("switch")).toBeVisible();
});
test("component renders with label", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Enable notifications" />`);
await expect(page.getByLabel("Enable notifications")).toBeVisible();
});
test("initialValue sets checked state", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="true" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
// =============================================================================
// TRANSFORM TO LEGIT VALUE TESTS - Testing transformToLegitValue function behavior
// =============================================================================
test.describe("transformToLegitValue Input Type Tests", () => {
// Boolean values
test("initialValue handles boolean true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{true}" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
test("initialValue handles boolean false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{false}" />`);
await expect(page.getByRole("switch")).not.toBeChecked();
});
// Undefined and null values
test("initialValue handles undefined as false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{undefined}" />`);
await expect(page.getByRole("switch")).not.toBeChecked();
});
test("initialValue handles null as false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{null}" />`);
await expect(page.getByRole("switch")).not.toBeChecked();
});
// Number values
test("initialValue handles number 0 as false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{0}" />`);
await expect(page.getByRole("switch")).not.toBeChecked();
});
test("initialValue handles positive number as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{1}" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
test("initialValue handles negative number as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{-1}" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
test("initialValue handles decimal number as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{3.14}" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
test("initialValue handles NaN as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{NaN}" />`);
// NaN is treated as true due to JavaScript evaluation context
// In XMLUI context, NaN is passed through differently than expected
await expect(page.getByRole("switch")).toBeChecked();
});
// String values
test("initialValue handles empty string as false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="" />`);
await expect(page.getByRole("switch")).not.toBeChecked();
});
test("initialValue handles whitespace-only string as false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue=" " />`);
await expect(page.getByRole("switch")).not.toBeChecked();
});
test("initialValue handles string 'false' as false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="false" />`);
await expect(page.getByRole("switch")).not.toBeChecked();
});
test("initialValue handles string 'FALSE' as false (case insensitive)", async ({
initTestBed,
page,
}) => {
await initTestBed(`<Switch initialValue="FALSE" />`);
await expect(page.getByRole("switch")).not.toBeChecked();
});
test("initialValue handles string 'true' as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="true" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
test("initialValue handles non-empty string as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="yes" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
test("initialValue handles string with content and 'false' as true", async ({
initTestBed,
page,
}) => {
await initTestBed(`<Switch initialValue="not false" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
// Array values
test("initialValue handles empty array as false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{[]}" />`);
// Empty arrays may cause component to not render in some contexts
const switchElement = page.getByRole("switch");
const exists = await switchElement.count();
if (exists > 0) {
await expect(switchElement).not.toBeChecked();
} else {
// Component doesn't render with empty array - this is acceptable behavior
expect(exists).toBe(0);
}
});
test("initialValue handles array with elements as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{[1, 2, 3]}" />`);
// Arrays with elements may cause component to not render in some contexts
const switchElement = page.getByRole("switch");
const exists = await switchElement.count();
if (exists > 0) {
await expect(switchElement).toBeChecked();
} else {
// Component doesn't render with complex array - this is acceptable behavior
expect(exists).toBe(0);
}
});
test("initialValue handles array with single element as true", async ({
initTestBed,
page,
}) => {
await initTestBed(`<Switch initialValue="{['item']}" />`);
// Arrays may cause component to not render in some contexts
const switchElement = page.getByRole("switch");
const exists = await switchElement.count();
if (exists > 0) {
await expect(switchElement).toBeChecked();
} else {
// Component doesn't render with array - this is acceptable behavior
expect(exists).toBe(0);
}
});
// Object values
test("initialValue handles empty object as false", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{{}}" />`);
// Empty objects may cause component to not render in some contexts
const switchElement = page.getByRole("switch");
const exists = await switchElement.count();
if (exists > 0) {
await expect(switchElement).not.toBeChecked();
} else {
// Component doesn't render with empty object - this is acceptable behavior
expect(exists).toBe(0);
}
});
test("initialValue handles object with properties as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{{a: 'b'}}" />`);
// Objects may cause component to not render in some contexts
const switchElement = page.getByRole("switch");
const exists = await switchElement.count();
if (exists > 0) {
await expect(switchElement).toBeChecked();
} else {
// Component doesn't render with object - this is acceptable behavior
expect(exists).toBe(0);
}
});
test("initialValue handles complex object as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{{name: 'test', value: 123}}" />`);
// Complex objects may cause component to not render in some contexts
const switchElement = page.getByRole("switch");
const exists = await switchElement.count();
if (exists > 0) {
await expect(switchElement).toBeChecked();
} else {
// Component doesn't render with complex object - this is acceptable behavior
expect(exists).toBe(0);
}
});
// Edge case values
test("initialValue handles Infinity as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{Infinity}" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
test("initialValue handles negative Infinity as true", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="{-Infinity}" />`);
await expect(page.getByRole("switch")).toBeChecked();
});
});
// API setValue method with different input types
test.describe("setValue API with transformToLegitValue", () => {
test("setValue with boolean values", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="setTrue" onClick="mySwitch.setValue(true)">Set True</Button>
<Button testId="setFalse" onClick="mySwitch.setValue(false)">Set False</Button>
</Fragment>
`);
const switchElement = page.getByRole("switch");
await page.getByTestId("setTrue").click();
await expect(switchElement).toBeChecked();
await page.getByTestId("setFalse").click();
await expect(switchElement).not.toBeChecked();
});
test("setValue with number values", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="setZero" onClick="mySwitch.setValue(0)">Set 0</Button>
<Button testId="setOne" onClick="mySwitch.setValue(1)">Set 1</Button>
<Button testId="setNegative" onClick="mySwitch.setValue(-5)">Set -5</Button>
</Fragment>
`);
const switchElement = page.getByRole("switch");
await page.getByTestId("setZero").click();
await expect(switchElement).not.toBeChecked();
await page.getByTestId("setOne").click();
await expect(switchElement).toBeChecked();
await page.getByTestId("setNegative").click();
await expect(switchElement).toBeChecked();
});
test("setValue with string values", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="setEmpty" onClick="mySwitch.setValue('')">Set Empty</Button>
<Button testId="setFalseStr" onClick="mySwitch.setValue('false')">Set 'false'</Button>
<Button testId="setTrueStr" onClick="mySwitch.setValue('true')">Set 'true'</Button>
<Button testId="setYes" onClick="mySwitch.setValue('yes')">Set 'yes'</Button>
</Fragment>
`);
const switchElement = page.getByRole("switch");
await page.getByTestId("setEmpty").click();
await expect(switchElement).not.toBeChecked();
await page.getByTestId("setFalseStr").click();
await expect(switchElement).not.toBeChecked();
await page.getByTestId("setTrueStr").click();
await expect(switchElement).toBeChecked();
await page.getByTestId("setYes").click();
await expect(switchElement).toBeChecked();
});
test("setValue with simplified array and object test", async ({ initTestBed, page }) => {
// Test arrays and objects through setValue API - focuses on core behavior
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="testComplexTypes" onClick="mySwitch.setValue([1,2]); mySwitch.setValue({a:1});">Test Complex</Button>
<Text testId="currentValue">{mySwitch.value}</Text>
</Fragment>
`);
const switchElement = page.getByRole("switch");
const valueDisplay = page.getByTestId("currentValue");
// Complex types should eventually resolve through transformToLegitValue
await page.getByTestId("testComplexTypes").click();
// After setValue operations, switch should reflect the final transformed value
await expect(valueDisplay).toContainText("true");
await expect(switchElement).toBeChecked();
});
});
test("component click toggles checked state", async ({ initTestBed, page }) => {
await initTestBed(`<Switch />`);
const switchElement = page.getByRole("switch");
// Initially unchecked
await expect(switchElement).not.toBeChecked();
// Click to check
await switchElement.click();
await expect(switchElement).toBeChecked();
// Click again to uncheck
await switchElement.click();
await expect(switchElement).not.toBeChecked();
});
test("component required prop adds required attribute", async ({ initTestBed, page }) => {
await initTestBed(`<Switch required="true" />`);
await expect(page.getByRole("switch")).toHaveAttribute("required");
});
test("enabled=false disables control", async ({ initTestBed, page }) => {
await initTestBed(`<Switch enabled="false" />`);
await expect(page.getByRole("switch")).toBeDisabled();
});
test("enabled=false disables interaction", async ({ initTestBed, page }) => {
await initTestBed(`<Switch enabled="false" initialValue="false" />`);
const switchElement = page.getByRole("switch");
await switchElement.click({ force: true });
await expect(switchElement).not.toBeChecked();
});
test("readOnly", async ({ initTestBed, page }) => {
await initTestBed(`<Switch readOnly="true" />`);
await expect(page.getByRole("switch")).toHaveAttribute("readonly");
});
test("readOnly prevents state changes", async ({ initTestBed, page }) => {
await initTestBed(`<Switch readOnly="true" initialValue="false" />`);
const switchElement = page.getByRole("switch");
await switchElement.click();
await expect(switchElement).not.toBeChecked();
});
test("readOnly is not the same as disabled", async ({ initTestBed, page }) => {
await initTestBed(`<Switch readOnly="true" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).not.toBeDisabled();
await expect(switchElement).toHaveAttribute("readonly");
});
test("autoFocus focuses input on mount", async ({ initTestBed, page }) => {
await initTestBed(`<Switch autoFocus="true" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeFocused();
});
test("autoFocus focuses input on mount with label", async ({ initTestBed, page }) => {
await initTestBed(`<Switch autoFocus="true" label="Auto-focused switch" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeFocused();
});
test("handle special characters in label", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Enable 日本語 notifications!@#$" />`);
await expect(page.getByLabel("Enable 日本語 notifications!@#$")).toBeVisible();
});
test("handle Unicode characters in label", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Enable 🔔 notifications" />`);
await expect(page.getByLabel("Enable 🔔 notifications")).toBeVisible();
});
test("component handles very long label text", async ({ initTestBed, page }) => {
const longLabel =
"This is a very long label that might cause layout issues or text wrapping problems in the component rendering";
await initTestBed(`<Switch label="${longLabel}" />`);
await expect(page.getByLabel(longLabel)).toBeVisible();
});
test("component handles rapid state changes", async ({ initTestBed, page }) => {
await initTestBed(`<Switch />`);
const switchElement = page.getByRole("switch");
// Perform rapid clicks
for (let i = 0; i < 5; i++) {
await switchElement.click();
}
// Should end up checked (odd number of clicks)
await expect(switchElement).toBeChecked();
});
});
// =============================================================================
// ACCESSIBILITY TESTS
// =============================================================================
test.describe("Accessibility", () => {
test("label is associated with input", async ({ initTestBed, page }) => {
const label = "Enable notifications";
await initTestBed(`<Switch label="${label}" />`);
const component = page.getByLabel(label);
await expect(component).toHaveRole("switch");
});
test("pressing Space after focus toggles the control", async ({ initTestBed, page }) => {
await initTestBed(`<Switch />`);
const switchElement = page.getByRole("switch");
await switchElement.focus();
await expect(switchElement).not.toBeChecked();
await switchElement.press("Space", { delay: 100 });
await expect(switchElement).toBeChecked();
await switchElement.press("Space", { delay: 100 });
await expect(switchElement).not.toBeChecked();
});
test("component supports keyboard navigation", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch label="First switch" />
<Switch label="Second switch" />
</Fragment>
`);
const firstSwitch = page.getByLabel("First switch");
const secondSwitch = page.getByLabel("Second switch");
await firstSwitch.focus();
await expect(firstSwitch).toBeFocused();
await page.keyboard.press("Tab", { delay: 100 });
await expect(secondSwitch).toBeFocused();
});
test("aria-checked=false applies correctly", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="false" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toHaveAttribute("aria-checked", "false");
});
test("aria-checked=true applies correctly", async ({ initTestBed, page }) => {
await initTestBed(`<Switch initialValue="true" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toHaveAttribute("aria-checked", "true");
});
test("required has proper ARIA attributes", async ({ initTestBed, page }) => {
await initTestBed(`<Switch required="true" label="Required switch" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toHaveAttribute("aria-required", "true");
});
test("required state has visual representation next to label", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch required="true" label="Required switch" />`);
const driver = await createCheckboxDriver();
// Check for required indicator (usually asterisk or similar)
await expect(driver.component).toContainText("*");
});
test("component disabled has proper ARIA attributes", async ({ initTestBed, page }) => {
await initTestBed(`<Switch enabled="false" label="Disabled switch" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toHaveAttribute("aria-disabled", "true");
});
test("component has correct role attribute", async ({ initTestBed, page }) => {
await initTestBed(`<Switch />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toHaveAttribute("role", "switch");
});
});
// =============================================================================
// LABEL POSITIONING TESTS
// =============================================================================
test.describe("Label", () => {
test("labelPosition=start positions label before input", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Enable feature" labelPosition="start" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeVisible();
});
test("labelPosition=end positions label after input", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Enable feature" labelPosition="end" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeVisible();
});
test("labelPosition=top positions label above input", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Enable feature" labelPosition="top" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeVisible();
});
test("labelPosition=bottom positions label below input", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Enable feature" labelPosition="bottom" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeVisible();
});
test("labelWidth applies custom label width", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Custom width" labelWidth="200px" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeVisible();
});
test("labelBreak enables label line breaks", async ({ initTestBed, page }) => {
await initTestBed(
`<Switch label="Very long label that should break into multiple lines" labelBreak="true" />`,
);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeVisible();
});
test("component handles invalid labelPosition gracefully", async ({ initTestBed, page }) => {
await initTestBed(`<Switch label="Test label" labelPosition="invalid" />`);
const switchElement = page.getByRole("switch");
await expect(switchElement).toBeVisible();
});
});
// =============================================================================
// EVENT HANDLING TESTS
// =============================================================================
test.describe("Event Handling", () => {
test("didChange event fires on state change", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Switch onDidChange="testState = 'changed'" />
`);
const switchElement = page.getByRole("switch");
await switchElement.click();
await expect.poll(testStateDriver.testState).toEqual("changed");
});
test("didChange event passes new value", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Switch onDidChange="arg => testState = arg" />
`);
const switchElement = page.getByRole("switch");
await switchElement.click();
await expect.poll(testStateDriver.testState).toEqual(true);
});
test("gotFocus event fires on focus", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Switch onGotFocus="testState = 'focused'" />
`);
const switchElement = page.getByRole("switch");
await switchElement.focus();
await expect.poll(testStateDriver.testState).toEqual("focused");
});
test("gotFocus event fires on label click", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Switch label="Enable" onGotFocus="testState = 'focused'" />
`);
await page.getByText("Enable").click();
await expect.poll(testStateDriver.testState).toEqual("focused");
});
test("component lostFocus event fires on blur", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Switch onLostFocus="testState = 'blurred'" />
`);
const switchElement = page.getByRole("switch");
await switchElement.focus();
await switchElement.blur();
await expect.poll(testStateDriver.testState).toEqual("blurred");
});
});
// =============================================================================
// API TESTS
// =============================================================================
test.describe("Api", () => {
test("component value API returns current state", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="true" />
<Text testId="value">{mySwitch.value}</Text>
</Fragment>
`);
await expect(page.getByTestId("value")).toHaveText("true");
});
test("component value API returns state after change", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Text testId="value">{mySwitch.value}</Text>
</Fragment>
`);
await expect(page.getByTestId("value")).toHaveText("false");
await page.getByRole("switch").click();
await expect(page.getByTestId("value")).toHaveText("true");
});
test("component setValue API updates state", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="setBtn" onClick="mySwitch.setValue(true)">Set True</Button>
<Text testId="value">{mySwitch.value}</Text>
</Fragment>
`);
await expect(page.getByTestId("value")).toHaveText("false");
await page.getByTestId("setBtn").click();
await expect(page.getByTestId("value")).toHaveText("true");
await expect(page.getByRole("switch")).toBeChecked();
});
test("component setValue API triggers events", async ({ initTestBed, page }) => {
const { testStateDriver } = await initTestBed(`
<Fragment>
<Switch id="mySwitch" onDidChange="testState = 'api-changed'" />
<Button testId="setBtn" onClick="mySwitch.setValue(true)">Set True</Button>
</Fragment>
`);
await page.getByTestId("setBtn").click();
await expect.poll(testStateDriver.testState).toEqual("api-changed");
});
// =============================================================================
// VALUE PROPERTY TESTS - Testing transformToLegitValue with dynamic value updates
// =============================================================================
test.describe("value property with transformToLegitValue", () => {
test("switch reflects state changes with different value types", async ({
initTestBed,
page,
}) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="updateValue" onClick="mySwitch.setValue('any non-empty string')">Update Value</Button>
<Text testId="currentValue">{mySwitch.value}</Text>
</Fragment>
`);
// Initially false
await expect(page.getByTestId("currentValue")).toContainText("false");
await expect(page.getByRole("switch")).not.toBeChecked();
// Update to truthy string value
await page.getByTestId("updateValue").click();
await expect(page.getByTestId("currentValue")).toContainText("true");
await expect(page.getByRole("switch")).toBeChecked();
});
test("switch state updates properly with numeric values", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="setZero" onClick="mySwitch.setValue(0)">Set 0</Button>
<Button testId="setPositive" onClick="mySwitch.setValue(42)">Set 42</Button>
<Text testId="currentValue">Current: {mySwitch.value}</Text>
</Fragment>
`);
const currentValue = page.getByTestId("currentValue");
const switchElement = page.getByRole("switch");
// Set to 0 (falsy number)
await page.getByTestId("setZero").click();
await expect(currentValue).toContainText("false");
await expect(switchElement).not.toBeChecked();
// Set to positive number (truthy)
await page.getByTestId("setPositive").click();
await expect(currentValue).toContainText("true");
await expect(switchElement).toBeChecked();
});
test("switch handles special string values correctly", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="setString" onClick="mySwitch.setValue('test')">Set 'test'</Button>
<Button testId="setEmptyString" onClick="mySwitch.setValue('')">Set ''</Button>
<Button testId="setFalseString" onClick="mySwitch.setValue('false')">Set 'false'</Button>
<Text testId="valueDisplay">Value: {mySwitch.value}</Text>
</Fragment>
`);
const valueDisplay = page.getByTestId("valueDisplay");
const switchElement = page.getByRole("switch");
// Non-empty string should be true
await page.getByTestId("setString").click();
await expect(valueDisplay).toContainText("true");
await expect(switchElement).toBeChecked();
// Empty string should be false
await page.getByTestId("setEmptyString").click();
await expect(valueDisplay).toContainText("false");
await expect(switchElement).not.toBeChecked();
// String 'false' should be false
await page.getByTestId("setFalseString").click();
await expect(valueDisplay).toContainText("false");
await expect(switchElement).not.toBeChecked();
});
test("switch handles string case sensitivity correctly", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment>
<Switch id="mySwitch" initialValue="false" />
<Button testId="setFalseString" onClick="mySwitch.setValue('false')">Set 'false'</Button>
<Button testId="setFalseUpper" onClick="mySwitch.setValue('FALSE')">Set 'FALSE'</Button>
<Button testId="setEmptyString" onClick="mySwitch.setValue('')">Set ''</Button>
<Button testId="setWhitespace" onClick="mySwitch.setValue(' ')">Set ' '</Button>
<Button testId="setTruthyString" onClick="mySwitch.setValue('anything else')">Set 'anything else'</Button>
<Text testId="status">Status: {mySwitch.value}</Text>
</Fragment>
`);
const status = page.getByTestId("status");
const switchElement = page.getByRole("switch");
// String 'false' should be false
await page.getByTestId("setFalseString").click();
await expect(status).toContainText("false");
await expect(switchElement).not.toBeChecked();
// String 'FALSE' should be false (case insensitive)
await page.getByTestId("setFalseUpper").click();
await expect(status).toContainText("false");
await expect(switchElement).not.toBeChecked();
// Empty string should be false
await page.getByTestId("setEmptyString").click();
await expect(status).toContainText("false");
await expect(switchElement).not.toBeChecked();
// Whitespace-only string should be false
await page.getByTestId("setWhitespace").click();
await expect(status).toContainText("false");
await expect(switchElement).not.toBeChecked();
// Any other string should be true
await page.getByTestId("setTruthyString").click();
await expect(status).toContainText("true");
await expect(switchElement).toBeChecked();
});
});
});
// =============================================================================
// VISUAL STATE TESTS
// =============================================================================
test.describe("Visual States", () => {
test("component applies switch-specific styling", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch />`);
const driver = await createCheckboxDriver();
// Switch should have different visual styling than checkbox
await expect(driver.component).toHaveClass(/switch/);
});
});
// =============================================================================
// VISUAL STATE TESTS
// =============================================================================
test.describe("Theme Vars", () => {
test("checked borderColor", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch initialValue="true" />`, {
testThemeVars: {
"borderColor-checked-Switch": "rgb(255, 0, 0)",
},
});
const driver = await createCheckboxDriver();
await expect(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
});
test("checked backgroundColor", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch initialValue="true" />`, {
testThemeVars: {
"backgroundColor-checked-Switch": "rgb(0, 255, 0)",
},
});
const driver = await createCheckboxDriver();
await expect(driver.component).toHaveCSS("background-color", "rgb(0, 255, 0)");
});
test("indicator backgroundColor", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch />`, {
testThemeVars: {
"backgroundColor-indicator-Switch": "rgb(0, 0, 255)",
},
});
const driver = await createCheckboxDriver();
// Test that the indicator has the correct background color
await expect(driver.component).toBeVisible();
});
test("disabled backgroundColor", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch enabled="false" />`, {
testThemeVars: {
"backgroundColor-Switch--disabled": "rgb(128, 128, 128)",
},
});
const driver = await createCheckboxDriver();
await expect(driver.component).toHaveCSS("background-color", "rgb(128, 128, 128)");
});
test("valid borderColor", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch validationStatus="valid" />`, {
testThemeVars: {
"borderColor-checked-Switch-success": "rgb(0, 255, 0)",
},
});
const driver = await createCheckboxDriver();
await expect(driver.component).toBeVisible();
});
test("warning borderColor", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch validationStatus="warning" />`, {
testThemeVars: {
"borderColor-checked-Switch-warning": "rgb(255, 165, 0)",
},
});
const driver = await createCheckboxDriver();
await expect(driver.component).toBeVisible();
});
test("error borderColor", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch validationStatus="error" />`, {
testThemeVars: {
"borderColor-checked-Switch-error": "rgb(255, 0, 0)",
},
});
const driver = await createCheckboxDriver();
await expect(driver.component).toBeVisible();
});
test("outlineWidth on focus", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch />`, {
testThemeVars: {
"outlineWidth-Switch": "3px",
},
});
const driver = await createCheckboxDriver();
await driver.component.focus();
await expect(driver.component).toHaveCSS("outline-width", "3px");
});
test("outlineColor on focus", async ({ initTestBed, createCheckboxDriver }) => {
await initTestBed(`<Switch />`, {
testThemeVars: {
"outlineColor-Switch": "rgb(255, 0, 255)",
},
});
const driver = await createCheckboxDriver();
await driver.component.focus();
await expect(driver.component).toHaveCSS("outline-color", "rgb(255, 0, 255)");
});
});
// =============================================================================
// VALIDATION STATUS TESTS
// =============================================================================
test.describe("Validation", () => {
test("validationStatus=error correctly displayed", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch validationStatus="error" />`);
const driver = await createCheckboxDriver();
await expect(driver.component).toHaveClass(/error/);
});
test("validationStatus=warning correctly displayed", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch validationStatus="warning" />`);
const driver = await createCheckboxDriver();
await expect(driver.component).toHaveClass(/warning/);
});
test("validationStatus=valid correctly displayed", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch validationStatus="valid" />`);
const driver = await createCheckboxDriver();
await expect(driver.component).toHaveClass(/valid/);
});
test("handles invalid validationStatus gracefully", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch validationStatus="invalid-status" />`);
const driver = await createCheckboxDriver();
await expect(driver.component).toBeVisible();
});
});
// =============================================================================
// EDGE CASE TESTS
// =============================================================================
test.describe("Edge Cases", () => {
test("component handles null and undefined props gracefully", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch/>`, {});
const driver1 = await createCheckboxDriver();
await expect(driver1.component).toBeVisible();
await initTestBed(`<Switch label=""/>`, {});
const driver2 = await createCheckboxDriver();
await expect(driver2.component).toBeVisible();
});
test("component handles special characters correctly", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch label="Test with !@#$%^&*()"/>`, {});
const driver = await createCheckboxDriver();
await expect(driver.component).toBeVisible();
});
test("component handles concurrent prop updates correctly", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(`<Switch initialValue="false" />`, {});
const driver1 = await createCheckboxDriver();
await expect(driver1.component).not.toBeChecked();
await initTestBed(`<Switch initialValue="true" />`, {});
const driver2 = await createCheckboxDriver();
await expect(driver2.component).toBeChecked();
});
});
// =============================================================================
// INTEGRATION TESTS
// =============================================================================
test.describe("Integration", () => {
test("component works correctly in different layout contexts", async ({
initTestBed,
createCheckboxDriver,
}) => {
await initTestBed(
`
<VStack>
<Switch label="First switch" />
<Switch label="Second switch" />
</VStack>
`,
{},
);
const driver = await createCheckboxDriver();
// 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);
});
test("component integrates with forms correctly", async ({ initTestBed, page }) => {
await initTestBed(`
<Form>
<Switch label="Accept terms" required="true" />
<Button type="submit">Submit</Button>
</Form>
`);
const switchElement = page.getByRole("switch");
const submitButton = page.getByRole("button", { name: "Submit" });
await expect(switchElement).toBeVisible();
await expect(submitButton).toBeVisible();
});
test("component works with conditional rendering", async ({ initTestBed, page }) => {
await initTestBed(`
<Fragment var.showSwitch="{true}">
<Fragment when="{showSwitch}">
<Switch label="Conditional switch" />
</Fragment>
<Button testId="toggleBtn" onClick="showSwitch = !showSwitch">Toggle</Button>
</Fragment>
`);
await expect(page.getByLabel("Conditional switch")).toBeVisible();
await page.getByTestId("toggleBtn").click();
await expect(page.getByLabel("Conditional switch")).not.toBeVisible();
});
});
```
--------------------------------------------------------------------------------
/docs/public/pages/build-editor-component.md:
--------------------------------------------------------------------------------
```markdown
# Build a TableEditor Component
This guide walks you through building a `TableEditor` component for XMLUI, using the [Tiptap](https://tiptap.dev) editor as a foundation. It will provide a visual and Markdown-friendly way to create and edit tables for use in XMLUI-powered documentation.
> [!INFO]
> If you operate in the [XMLUI](https://github.com/xmlui-org/xmlui) repo you can test your work live. Follow the instructions in `dev-docs/next/generating-component-reference.md` to build the XMLUI docs site, then load localhost:5173. When you edit `.tsx` files they will automatically recompile, so you can iterate rapidly as you develop your component. And you can add a test page to the site in order to use your evolving component
## Step 1: Create the folder.
```bash
mkdir -p xmlui/src/components/TableEditor
```
## Step 2: Create a minimal renderer
Add `TableEditor.tsx` in that folder.
```xmlui
export function TableEditor() {
return (
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
);
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: (props: any) => <TableEditor {...props} />
};
```
Register it in `ComponentProvider.tsx`.
```xmlui
import { editorComponentRenderer as TableEditorRenderer }
from "./components/TableEditor/TableEditor";
if (process.env.VITE_USED_COMPONENTS_TableEditor !== "false") {
this.registerCoreComponent(TableEditorRenderer);
}
```
You can now use this XMLUI markup.
```xmlui
<App>
<TableEditor />
</App>
```
We are just rendering an HTML table at this point, with no XMLUI theme support and no editing capability.
## Step 3: Make the table editable with Tiptap
Install Tiptap dependencies.
```
npm install @tiptap/react @tiptap/starter-kit \
@tiptap/extension-table @tiptap/extension-table-row \
@tiptap/extension-table-cell @tiptap/extension-table-header
```
Update `TableEditor.tsx`.
```js filename="TableEditor.tsx" copy
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
export function TableEditor() {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
return <EditorContent editor={editor} />;
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: (props: any) => <TableEditor {...props} />
};
```
Use the same XMLUI markup.
```xmlui
<App>
<TableEditor />
</App>
```
You can now edit the cells in the table.
## Step 4: Add an Insert Row button
```js {41-46} copy filename="TableEditor.tsx"
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
export function TableEditor() {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
return (
<div>
<button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
>
Insert Row
</button>
<EditorContent editor={editor} />
</div>
);
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: (props: any) => <TableEditor {...props} />
};
```
Use the same XMLUI markup.
```xmlui
<App>
<TableEditor />
</App>
```
You can now insert rows.
## Step 5: Use XMLUI's Button
Import and use `Button`.
```js /Button/ copy filename="TableEditor.tsx"
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
export function TableEditor() {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
return (
<div>
<Button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
>
Insert Row
</Button>
<EditorContent editor={editor} />
</div>
);
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: (props: any) => <TableEditor {...props} />
};
```
You now have a proper themed XMLUI button.
## Step 6: Show the HTML
Tiptap works natively with HTML, not Markdown. We'll eventually show Markdown but first let's add a method to show the HTML.
To keep our code modular, we'll separate the editor's rendering logic into a minimal presentational component. This makes it easy to reuse the editor UI in different contexts.
Create `TableEditorNative.tsx` alongside `TableEditor.tsx`.
```js filename="TableEditorNative.tsx" copy
import { EditorContent } from "@tiptap/react";
export function TableEditorNative({ editor }: { editor: any }) {
return <EditorContent editor={editor} />;
}
```
This component simply renders the Tiptap editor UI for a given editor instance.
Now, let's expose a method to get the current HTML from the editor. Add this to `TableEditor.tsx`.
```js filename="TableEditorNative.tsx" copy
React.useEffect(() => {
if (registerComponentApi && editor) {
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
});
}
}, [registerComponentApi, editor]);
```
Now we can show the HTML using this markup.
```xmlui
<App>
<TableEditor id="tableEditor" />
<Text> { tableEditor.getHtmlSource() } </Text>
</App>
```
## Step 7: Show the Markdown
Tiptap does not provide an HTML-to-Markdown converter. We'll start with a basic one called `turndown`. First install it.
```
npm install turndown
```
Then update `TableEditor.tsx` to use it.
```js /turndown/ {42-60} filename="TableEditor.tsx"
import React from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
import TurndownService from "turndown";
export function TableEditor({ registerComponentApi }: { registerComponentApi?: (api: any) => void }) {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
React.useEffect(() => {
if (registerComponentApi && editor) {
const turndownService = new TurndownService();
turndownService.addRule('table', {
filter: 'table',
replacement: function (content, node) {
let rows = [];
for (let row of node.querySelectorAll('tr')) {
let cells = Array.from(row.children).map(cell => cell.textContent.trim());
rows.push('| ' + cells.join(' | ') + ' |');
}
if (rows.length > 1) {
// Add a separator after the header row
const headerSep = '| ' + rows[0].split('|').slice(1, -1).map(() => '---').join(' | ') + ' |';
rows.splice(1, 0, headerSep);
}
return rows.join('\n') + '\n';
}
});
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
});
}
}, [registerComponentApi, editor]);
return (
<div>
<Button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
>
Insert Row
</Button>
<EditorContent editor={editor} />
</div>
);
}
export const editorComponentRenderer2 = {
type: "TableEditor",
renderer: ({ registerComponentApi, ...props }: any) => (
<TableEditor {...props} registerComponentApi={registerComponentApi} />
),
};
```
Now we can show the Markdown.
```xmlui
<App>
<TableEditor id="tableEditor" />
<Text variant="codefence" preserveLinebreaks="{true}">
{ tableEditor.getMarkdownSource() }
</Text>
</App>
```
Rendered in XMLUI Markdown:
<Image src="/resources/devdocs/xmlui-rendering-of-tiptap-markdown.png" width="200px"/>
## Step 8: Add controls
We can improve the TableEditor by adding more table editing controls like Insert Column, Delete Row, and Delete Column. But where should these controls live?
1. **TableEditorNative.tsx** (lowest level)
- Pros: Closest to the editor instance
- Cons: Not idiomatic for XMLUI; the "native" component should be minimal
2. **TableEditor.tsx** (middle level)
- Pros: Provides a good default "batteries included" experience; keeps the native component minimal; still allows advanced users to build custom controls if needed
- Cons: Slightly less flexible than fully user-defined controls
3. **User-defined component** (highest level)
- Pros: Maximum flexibility for users
- Cons: Every user has to reimplement the same basic controls; not user-friendly
We chose to implement the controls in `TableEditor.tsx` because it provides the best balance of usability and flexibility. Users get a working table editor with sensible controls out of the box, while advanced users can still build custom UIs using the exposed API if needed.
```js {71-87} filename="TableEditorNative.tsx"
import React from "react";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
import { Stack } from "../Stack/StackNative";
import TurndownService from "turndown";
import { TableEditorNative } from "./TableEditorNative";
export function TableEditor({ registerComponentApi }: { registerComponentApi?: (api: any) => void }) {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
React.useEffect(() => {
if (registerComponentApi && editor) {
const turndownService = new TurndownService();
turndownService.addRule('table', {
filter: 'table',
replacement: function (content, node) {
let rows = [];
for (let row of node.querySelectorAll('tr')) {
let cells = Array.from(row.children).map(cell => (cell as HTMLElement).textContent?.trim() ?? "");
rows.push('| ' + cells.join(' | ') + ' |');
}
if (rows.length > 1) {
// Add a separator after the header row
const headerSep = '| ' + rows[0].split('|').slice(1, -1).map(() => '---').join(' | ') + ' |';
rows.splice(1, 0, headerSep);
}
return rows.join('\n') + '\n';
}
});
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
});
}
}, [registerComponentApi, editor]);
return (
<>
<Stack orientation="horizontal">
<Button onClick={() => editor && editor.commands.addRowAfter()} disabled={!editor}>
Insert Row
</Button>
<Button onClick={() => editor && editor.commands.deleteRow()} disabled={!editor}>
Delete Row
</Button>
<Button onClick={() => editor && editor.commands.addColumnAfter()} disabled={!editor}>
Insert Column
</Button>
<Button onClick={() => editor && editor.commands.deleteColumn()} disabled={!editor}>
Delete Column
</Button>
</Stack>
<TableEditorNative editor={editor} />
</>
);
}
export const editorComponentRenderer = {
type: "TableEditor",
renderer: ({ registerComponentApi, ...props }: any) => (
<TableEditor {...props} registerComponentApi={registerComponentApi} />
),
};
```
We import and use `Stack` from `../Stack/StackNative`. Note that `HStack` is not available as a native component, so we can't use that shortcut.
A component must return a single element. We use a React Fragment (`<>...</>`) to group the buttons into an anonymous container.
Now we have this result.
```xmlui
<App>
<TableEditor id="tableEditor" />
<Text variant="codefence" preserveLinebreaks="{true}">
{ tableEditor.getMarkdownSource() }
</Text>
</App>
```
## Step 9: Add custom icons
The table editor buttons currently use only text labels. Let's add custom SVG icons.
```js copy
<Button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
themeColor={themeColor}
variant={variant}
size={size}
orientation="horizontal"
>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="19" y1="6" x2="19" y2="10" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
Insert Row
</Button>
```
We'll repeat this pattern for the other buttons.
<Image src="/resources/devdocs/table-editor-07.png" width="600px"/>
## Step 10: Theme the buttons
Our TableEditor component currently uses hardcoded button styling. To make TableEditor behave like a proper XMLUI component, we need to add theme support.
Try adding different theme props to your TableEditor:
```xmlui
<TableEditor themeColor="secondary" variant="outlined" size="lg" />
```
The buttons remain blue and solid. This happens because XMLUI doesn't know which props are valid for custom components. Without proper metadata, theme attributes are filtered out.
XMLUI components need metadata to define their allowed props.
```js {12-15} /TableEditorMd/ filename="TableEditorNative.tsx"
import React from "react";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
import { Stack } from "../Stack/StackNative";
import TurndownService from "turndown";
import { TableEditorNative } from "./TableEditorNative";
import { createMetadata } from "../metadata-helpers";
import { createComponentRenderer } from "../../components-core/renderers";
import { buttonThemeMd, buttonVariantMd, sizeMd } from "../abstractions";
export function TableEditor({
registerComponentApi,
themeColor = "primary",
variant = "solid",
size = "sm",
}: {
registerComponentApi?: (api: any) => void;
themeColor?: "primary" | "secondary" | "attention";
variant?: "solid" | "outlined" | "ghost";
size?: "xs" | "sm" | "md" | "lg";
}) {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
React.useEffect(() => {
if (registerComponentApi && editor) {
const turndownService = new TurndownService();
turndownService.addRule('table', {
filter: 'table',
replacement: function (content, node) {
let rows = [];
for (let row of node.querySelectorAll('tr')) {
let cells = Array.from(row.children).map(cell => (cell as HTMLElement).textContent?.trim() ?? "");
rows.push('| ' + cells.join(' | ') + ' |');
}
if (rows.length > 1) {
// Add a separator after the header row
const headerSep = '| ' + rows[0].split('|').slice(1, -1).map(() => '---').join(' | ') + ' |';
rows.splice(1, 0, headerSep);
}
return rows.join('\n') + '\n';
}
});
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
});
}
}, [registerComponentApi, editor]);
return (
<>
<Stack orientation="horizontal">
<Button onClick={() => editor && editor.commands.addRowAfter()} disabled={!editor} themeColor={themeColor} variant={variant} size={size}>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="20"
height="16"
style={{ marginRight: 4 }}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="19" y1="6" x2="19" y2="10" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
Insert Row
</Button>
<Button onClick={() => editor && editor.commands.deleteRow()} disabled={!editor} themeColor={themeColor} variant={variant} size={size}>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="20"
height="16"
style={{ marginRight: 4 }}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
Delete Row
</Button>
<Button onClick={() => editor && editor.commands.addColumnAfter()} disabled={!editor} themeColor={themeColor} variant={variant} size={size}>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="24"
height="16"
style={{ marginRight: 4 }}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="5.5" y1="3.5" x2="5.5" y2="11.5" />
<line x1="9" y1="3.5" x2="9" y2="11.5" />
<line x1="19" y1="6.5" x2="19" y2="9.5" />
<line x1="17.5" y1="8" x2="20.5" y2="8" />
</svg>
Insert Column
</Button>
<Button onClick={() => editor && editor.commands.deleteColumn()} disabled={!editor} themeColor={themeColor} variant={variant} size={size}>
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="24"
height="16"
style={{ marginRight: 4 }}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="5.5" y1="3.5" x2="5.5" y2="11.5" />
<line x1="9" y1="3.5" x2="9" y2="11.5" />
{/* Minus sign for delete */}
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
Delete Column
</Button>
</Stack>
<TableEditorNative editor={editor} />
</>
);
}
export const TableEditorMd = createMetadata({
description:
"`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
status: "experimental",
props: {
themeColor: {
description: "Sets the color scheme for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonThemeMd,
defaultValue: "primary",
},
variant: {
description: "Sets the visual style for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonVariantMd,
defaultValue: "solid",
},
size: {
description: "Sets the size for all editor buttons.",
isRequired: false,
type: "string",
availableValues: sizeMd,
defaultValue: "sm",
},
},
events: {},
});
export const editorComponentRenderer = createComponentRenderer(
"TableEditor",
TableEditorMd,
({ node, extractValue, registerComponentApi }) => (
<TableEditor
themeColor={extractValue.asOptionalString(node.props.themeColor)}
variant={extractValue.asOptionalString(node.props.variant)}
size={extractValue.asOptionalString(node.props.size)}
registerComponentApi={registerComponentApi}
/>
),
);
```
We add the necessary imports to `TableEditor.tsx`.
```js filename="TableEditor.tsx" copy
import { createMetadata } from "../metadata-helpers";
import { createComponentRenderer } from "../../components-core/renderers";
import { buttonThemeMd, buttonVariantMd, sizeMd } from "../abstractions";
```
We modify the TableEditor function to accept theme props.
```js filename="TableEditor.tsx" copy
export function TableEditor({
registerComponentApi,
themeColor = "primary",
variant = "solid",
size = "sm",
}: {
registerComponentApi?: (api: any) => void;
themeColor?: "primary" | "secondary" | "attention";
variant?: "solid" | "outlined" | "ghost";
size?: "xs" | "sm" | "md" | "lg";
}) {
// ... existing logic
}
```
We forward these props to all Button components.
```js copy
<Button
onClick={() => editor && editor.commands.addRowAfter()}
disabled={!editor}
themeColor={themeColor}
variant={variant}
size={size}
>
Insert Row
</Button>
```
We add metadata that defines the allowed props:
```js copy filename="TableEditor.tsx"
export const TableEditorMd = createMetadata({
description:
"`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
status: "stable",
props: {
themeColor: {
description: "Sets the color scheme for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonThemeMd,
defaultValue: "primary",
},
variant: {
description: "Sets the visual style for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonVariantMd,
defaultValue: "solid",
},
size: {
description: "Sets the size for all editor buttons.",
isRequired: false,
type: "string",
availableValues: sizeMd,
defaultValue: "sm",
},
},
events: {},
});
```
We replace the simple renderer with a proper one that uses metadata:
```js filename="TableEditor.tsx" copy
export const editorComponentRenderer = createComponentRenderer(
"TableEditor",
TableEditorMd,
({ node, extractValue, registerComponentApi }) => {
return (
<TableEditor
themeColor={extractValue.asOptionalString(node.props.themeColor)}
variant={extractValue.asOptionalString(node.props.variant)}
size={extractValue.asOptionalString(node.props.size)}
registerComponentApi={registerComponentApi}
/>
);
},
);
```
Now TableEditor supports full theme customization.
```xmlui copy
<TableEditor
id="tableEditor"
/>
<TableEditor
id="tableEditor2"
themeColor="primary"
size="lg"
variant="outlined"
/>
<TableEditor
id="tableEditor3"
themeColor="attention"
variant="ghost"
size="sm"
/>
```
<Image src="/resources/devdocs/table_editor_08.png" />
## Step 11: Register the icons
> [!INFO]
> Registering icons is optional if you only use them inline within your component, but it is strongly recommended for reusability, maintainability, and accessibility.
**Global usage.** Registered icons can be referenced anywhere in your app or docs by name (e.g., `<Icon name="table-insert-row" />` or as a Button's `icon` prop).
**Accessibility.** Using the `<Icon />` component or Button's `icon` prop helps ensure ARIA attributes and accessible labeling are handled consistently.
To make your custom icon usable in XMLUI, wrap your SVG markup in a React component. This allows the icon to inherit color, size, and accessibility props from its parent.
```js copy
// File: xmlui/src/components/Icon/TableInsertRowIcon.tsx
import React from "react";
export default function TableInsertRowIcon(props) {
return (
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
{...props} // Enables theming, sizing, and accessibility
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="19" y1="6" x2="19" y2="10" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
);
}
```
> [!INFO]
> The `{...props}` spread is essential—it lets XMLUI pass color, size, and ARIA attributes to your icon automatically.
Register the icon in `IconProvider.tsx`.
```js filename="IconProvider.tsx"
import TableInsertRowIcon from "./Icon/TableInsertRowIcon";
registerIconRenderer("table-insert-row", (props) => <TableInsertRowIcon {...props} />);
```
Update `TableEditor.tsx`.
```js /<Icon/ filename="TableEditor.tsx"
import React from "react";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import { Button } from "../Button/ButtonNative";
import { Stack } from "../Stack/StackNative";
import TurndownService from "turndown";
import { TableEditorNative2 } from "./TableEditorNative2";
import { createMetadata } from "../metadata-helpers";
import { createComponentRenderer } from "../../components-core/renderers";
import { buttonThemeMd, buttonVariantMd, sizeMd } from "../abstractions";
import Icon from "../Icon/IconNative";
export function TableEditor({
registerComponentApi,
themeColor = "primary",
variant = "solid",
size = "sm",
}: {
registerComponentApi?: (api: any) => void;
themeColor?: "primary" | "secondary" | "attention";
variant?: "solid" | "outlined" | "ghost";
size?: "xs" | "sm" | "md" | "lg";
}) {
const editor = useEditor({
extensions: [
StarterKit,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell,
],
content: `
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</tbody>
</table>
`,
});
React.useEffect(() => {
if (registerComponentApi && editor) {
const turndownService = new TurndownService();
turndownService.addRule('table', {
filter: 'table',
replacement: function (content, node) {
let rows = [];
for (let row of node.querySelectorAll('tr')) {
let cells = Array.from(row.children).map(cell => (cell as HTMLElement).textContent?.trim() ?? "");
rows.push('| ' + cells.join(' | ') + ' |');
}
if (rows.length > 1) {
// Add a separator after the header row
const headerSep = '| ' + rows[0].split('|').slice(1, -1).map(() => '---').join(' | ') + ' |';
rows.splice(1, 0, headerSep);
}
return rows.join('\n') + '\n';
}
});
registerComponentApi({
getHtmlSource: () => editor.getHTML(),
getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
});
}
}, [registerComponentApi, editor]);
return (
<>
<Stack orientation="horizontal">
<Button onClick={() => editor && editor.commands.addRowAfter()} disabled={!editor}
themeColor={themeColor} variant={variant} size={size}
icon={<Icon name="table-insert-row" aria-hidden />} contextualLabel="Insert Row"
>
Insert Row
</Button>
<Button onClick={() => editor && editor.commands.deleteRow()} disabled={!editor}
themeColor={themeColor} variant={variant} size={size}
icon={<Icon name="table-delete-row" aria-hidden />} contextualLabel="Delete Row">
Delete Row
</Button>
<Button onClick={() => editor && editor.commands.addColumnAfter()} disabled={!editor}
themeColor={themeColor} variant={variant} size={size}
icon={<Icon name="table-insert-column" aria-hidden />} contextualLabel="Insert Column">
Insert Column
</Button>
<Button onClick={() => editor && editor.commands.deleteColumn()} disabled={!editor}
themeColor={themeColor} variant={variant} size={size}
icon={<Icon name="table-delete-column" aria-hidden />} contextualLabel="Delete Column">
Delete Column
</Button>
</Stack>
<TableEditorNative2 editor={editor} />
</>
);
}
export const TableEditorMd = createMetadata({
description:
"`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
status: "experimental",
props: {
themeColor: {
description: "Sets the color scheme for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonThemeMd,
defaultValue: "primary",
},
variant: {
description: "Sets the visual style for all editor buttons.",
isRequired: false,
type: "string",
availableValues: buttonVariantMd,
defaultValue: "solid",
},
size: {
description: "Sets the size for all editor buttons.",
isRequired: false,
type: "string",
availableValues: sizeMd,
defaultValue: "sm",
},
},
events: {},
});
export const editorComponentRenderer = createComponentRenderer(
"TableEditor",
TableEditorMd,
({ node, extractValue, registerComponentApi }) => (
<TableEditor2
themeColor={extractValue.asOptionalString(node.props.themeColor)}
variant={extractValue.asOptionalString(node.props.variant)}
size={extractValue.asOptionalString(node.props.size)}
registerComponentApi={registerComponentApi}
/>
),
);
```
For icon-only buttons, use the `contextualLabel` prop to provide an accessible name.
```xmlui
<Button icon="table-insert-row" contextualLabel="Insert a new row" />
```
This ensures screen readers announce the button's purpose, even if only the icon is visible.
For decorative icons, use `aria-hidden="true"` to hide the icon from assistive technology.
```xmlui
<Icon name="table-insert-row" aria-hidden="true" />
```
## Step 12: Make the Markdown reactive
We want the Markdown display to update when changes happen in the editor. Make this change in `TableEditor.tsx`.
```js {6} {8-13} filename="TableEditor.tsx"
React.useEffect(() => {
if (!editor) return;
const handler = () => {
const html = editor.getHTML();
const markdown = turndownService.turndown(html);
onDidChange({ html, markdown });
};
editor.on("update", handler);
// Emit once on mount
handler();
return () => {
editor.off("update", handler);
};
}, [editor, onDidChange]);
```
Replace `events: {}` with this snippet.
```js
events: {
didChange: {
description: "Fired whenever the table content changes. Payload: { html, markdown }.",
isRequired: false,
type: "function",
},
},
```
And do this.
```js {4-5} {12} copy
export const editorComponentRenderer = createComponentRenderer(
"TableEditor",
TableEditorMd,
({ node, extractValue, registerComponentApi, lookupEventHandler }) => {
const handler = lookupEventHandler?.("didChange");
return (
<TableEditor
themeColor={extractValue.asOptionalString(node.props.themeColor)}
variant={extractValue.asOptionalString(node.props.variant)}
size={extractValue.asOptionalString(node.props.size)}
registerComponentApi={registerComponentApi}
onDidChange={handler}
/>
);
},
)
```
Now the Markdown updates as you change the table.
<Image src="/resources/devdocs/table_editor_09.png" />
## Step 13: Style the editor
We'll want to control the editor's style with XMLUI theme variables, but first let's add basic styling in `TableEditor.module.scss`.
```css filename="TableEditor.module.css" copy
.table-editor-root {
padding: 8px;
overflow-x: auto;
}
.ProseMirror {
outline: none;
white-space: pre-wrap;
word-break: break-word;
min-height: 100px;
}
.ProseMirror table {
border-collapse: collapse;
}
.ProseMirror th,
.ProseMirror td {
border: 1px solid #ccc;
padding: 4px;
}
.button-stack {
margin-bottom: 16px;
}
```
Use the styles in `TableEditor.tsx`.
```js filename="TableEditor.tsx"
return (
<div className="table-editor-root">
<div className="button-stack">
<Stack orientation="horizontal">
...
</Stack>
</div>
<TableEditorNative editor={editor} />
</div>
);
```
Use this XMLUI markup.
```xmlui
<App var.markdown="">
<Card>
<TableEditor
id="tableEditor"
size="xs"
onDidChange="{(e) => { markdown = e.markdown }}"
/>
</Card>
<Card>
<Text variant="codefence" preserverLinebreaks="{true}">
{ markdown }
</Text>
</Card>
</App>
```
Here is the result.
<Image src="/resources/devdocs/table_editor_10.png" />
## Step 14: Theme the editor
Now let's make `TableEditor` visually consistent with [Table](/components/Table) by reusing XMLUI theme variables for header, cell, and spacing styles. Here is the new `TableEditor.module.css`.
```scss filename="TableEditor.module.css" copy
@use "../../components-core/theming/themes" as t;
$componentName: "TableEditor";
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
// Reuse Table theme variables
$backgroundColorHeadingTable: createThemeVar("backgroundColor-heading-Table");
$borderCellTable: createThemeVar("border-cell-Table");
$fontSizeHeadingTable: createThemeVar("fontSize-heading-Table");
$fontWeightHeadingTable: createThemeVar("fontWeight-heading-Table");
$fontSizeRowTable: createThemeVar("fontSize-row-Table");
$fontWeightRowTable: createThemeVar("fontWeight-row-Table");
$paddingCellTable: createThemeVar("padding-cell-Table");
$paddingHeadingTable: createThemeVar("padding-heading-Table");
$textColorHeadingTable: createThemeVar("textColor-heading-Table");
$textColorPaginationTable: createThemeVar("textColor-pagination-Table");
$buttonStackSpacing: createThemeVar("spacing-buttonStack-Table");
$textTransformHeadingTable: createThemeVar("textTransform-heading-Table");
$tableMarginTop: t.$space-4;
$paddingHtmlTd: createThemeVar("padding-HtmlTd");
$paddingHtmlTh: createThemeVar("padding-HtmlTh");
.editor {
:global(.ProseMirror) {
outline: none;
white-space: pre-wrap;
word-break: break-word;
min-height: 100px;
table {
border-collapse: collapse;
margin-top: $tableMarginTop;
}
th {
background-color: $backgroundColorHeadingTable;
font-size: $fontSizeHeadingTable;
font-weight: $fontWeightHeadingTable;
padding: $paddingHtmlTh;
color: $textColorHeadingTable;
text-transform: $textTransformHeadingTable;
}
td {
font-size: $fontSizeRowTable;
font-weight: $fontWeightRowTable;
padding: $paddingHtmlTd;
border: $borderCellTable;
}
}
}
.button-stack {
margin-bottom: $buttonStackSpacing;
}
.table-editor-root {
padding: 8px;
overflow-x: auto;
}
.pagination {
color: $textColorPaginationTable;
}
:export {
themeVars: t.json-stringify($themeVars);
}
```
Now the editor matches the look of XMLUI tables rendered directly using `Table` or indirectly when tables appear in a XMLUI `Markdown` context. Try it!
```xmlui-pg display noHeader
<App var.markdown="">
<Card>
<TableEditor
id="tableEditor"
size="xs"
onDidChange="{(e) => { markdown = e.markdown }}"
/>
</Card>
<Card>
<HStack>
<Text variant="codefence" preserveLinebreaks="{true}">
{ markdown }
</Text>
<SpaceFiller />
<Button
icon="copy"
variant="ghost"
size="xs"
onClick="navigator.clipboard.writeText(markdown)"
/>
</HStack>
</Card>
</App>
```
<!--
<Image src="/resources/devdocs/table_editor_11.png" />
-->
```