This is page 45 of 143. Use http://codebase.md/xmlui-org/xmlui/xmlui-standalone.umd.js?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── loud-ducks-thank.md
│ ├── ready-bananas-lose.md
│ ├── sharp-things-knock.md
│ └── slimy-cats-beg.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Slot/Slot.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { test, expect } from "../../testing/fixtures";
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test.describe("Basic Functionality", () => {
test("renders children content in default slot", async ({ initTestBed, page }) => {
await initTestBed(`
<Custom>
<Button label="Create" />
<Button label="Edit" />
<Button label="Delete" />
</Custom>
`, {
components: [
`
<Component name="Custom">
<Card>
<H3>Use these actions</H3>
<HStack>
<Slot />
</HStack>
</Card>
</Component>
`
]
});
// Verify all passed children are rendered in the slot
await expect(page.getByRole("button", { name: "Create" })).toBeVisible();
await expect(page.getByRole("button", { name: "Edit" })).toBeVisible();
await expect(page.getByRole("button", { name: "Delete" })).toBeVisible();
// Verify they are within the card structure from the component
await expect(page.getByText("Use these actions")).toBeVisible();
});
test("renders default content when no children provided", async ({ initTestBed, page }) => {
await initTestBed(`<ActionBar />`, {
components: [
`
<Component name="ActionBar">
<Card>
<H3>Use these actions</H3>
<HStack>
<Slot>
<Button label="Default" />
</Slot>
</HStack>
</Card>
</Component>
`
]
});
// Verify default content is rendered when no children provided
await expect(page.getByRole("button", { name: "Default" })).toBeVisible();
await expect(page.getByText("Use these actions")).toBeVisible();
});
test("overrides default content with provided children", async ({ initTestBed, page }) => {
await initTestBed(`
<ActionBar>
<Button label="Custom Button" />
</ActionBar>
`, {
components: [
`
<Component name="ActionBar">
<Card>
<H3>Use these actions</H3>
<HStack>
<Slot>
<Button label="Default" />
</Slot>
</HStack>
</Card>
</Component>
`
]
});
// Verify provided children override default content
await expect(page.getByRole("button", { name: "Custom Button" })).toBeVisible();
await expect(page.getByRole("button", { name: "Default" })).not.toBeVisible();
});
test("works with named slots using property template syntax", async ({ initTestBed, page }) => {
await initTestBed(`
<ActionBar>
<property name="headerTemplate">
<H2>Click one of these actions</H2>
</property>
<property name="footerTemplate">
<Text>Footer content goes here</Text>
</property>
<Button label="Create" />
<Button label="Edit" />
<Button label="Delete" />
</ActionBar>
`, {
components: [
`
<Component name="ActionBar">
<Card>
<Slot name="headerTemplate">
<H3>Use these actions</H3>
</Slot>
<HStack>
<Slot>
<Button label="Default" />
</Slot>
</HStack>
<Slot name="footerTemplate" />
</Card>
</Component>
`
]
});
// Verify named slots render their provided content
await expect(page.getByRole("heading", { name: "Click one of these actions" })).toBeVisible();
await expect(page.getByText("Footer content goes here")).toBeVisible();
// Verify default header is not shown (overridden by headerTemplate)
await expect(page.getByRole("heading", { name: "Use these actions" })).not.toBeVisible();
// Verify default slot content (buttons)
await expect(page.getByRole("button", { name: "Create" })).toBeVisible();
await expect(page.getByRole("button", { name: "Edit" })).toBeVisible();
await expect(page.getByRole("button", { name: "Delete" })).toBeVisible();
});
test("renders default content for named slots when no template provided", async ({ initTestBed, page }) => {
await initTestBed(`
<ActionBar>
<Button label="Main Button" />
</ActionBar>
`, {
components: [
`
<Component name="ActionBar">
<Card>
<Slot name="headerTemplate">
<H3>Default header</H3>
</Slot>
<HStack>
<Slot />
</HStack>
<Slot name="footerTemplate">
<Text>Default footer</Text>
</Slot>
</Card>
</Component>
`
]
});
// Verify default content for named slots is rendered
await expect(page.getByRole("heading", { name: "Default header" })).toBeVisible();
await expect(page.getByText("Default footer")).toBeVisible();
// Verify main slot content
await expect(page.getByRole("button", { name: "Main Button" })).toBeVisible();
});
test("supports template properties with context variables", async ({ initTestBed, page }) => {
await initTestBed(`
<ActionBar header="Action Bar Example">
<property name="headerTemplate">
<Text variant="title">{$processedHeader}</Text>
</property>
<Button label="Create" />
<Button label="Edit" />
<Button label="Delete" />
</ActionBar>
`, {
components: [
`
<Component name="ActionBar">
<Card var.transformedHeader="*** {$props.header.toUpperCase()} ***">
<Slot name="headerTemplate" processedHeader="{transformedHeader}">
<H3>{transformedHeader}</H3>
</Slot>
<HStack>
<Slot>
<Button label="Default" />
</Slot>
</HStack>
</Card>
</Component>
`
]
});
// Verify template property is processed and passed to slot template
await expect(page.getByText("*** ACTION BAR EXAMPLE ***")).toBeVisible();
// Verify main slot content
await expect(page.getByRole("button", { name: "Create" })).toBeVisible();
await expect(page.getByRole("button", { name: "Edit" })).toBeVisible();
await expect(page.getByRole("button", { name: "Delete" })).toBeVisible();
});
test("works with multiple context variables in template properties", async ({ initTestBed, page }) => {
await initTestBed(`
<DataDisplay>
<property name="contentTemplate">
<Text>{$title}: {$value}</Text>
</property>
</DataDisplay>
`, {
components: [
`
<Component name="DataDisplay">
<Slot name="contentTemplate" title="Score" value="{42}">
<Text>No data available</Text>
</Slot>
</Component>
`
]
});
// Verify multiple context variables work
await expect(page.getByText("Score: 42")).toBeVisible();
await expect(page.getByText("No data available")).not.toBeVisible();
});
test("supports complex nested content in slots", async ({ initTestBed, page }) => {
await initTestBed(`
<CustomCard>
<property name="headerTemplate">
<HStack>
<Icon name="star" />
<Text fontWeight="bold">Custom Header</Text>
</HStack>
</property>
<VStack>
<Text>Line 1</Text>
<Text>Line 2</Text>
<Button label="Action" />
</VStack>
</CustomCard>
`, {
components: [
`
<Component name="CustomCard">
<Card>
<Slot name="headerTemplate">
<H3>Default Header</H3>
</Slot>
<ContentSeparator />
<Slot />
</Card>
</Component>
`
]
});
// Verify complex nested content renders correctly
await expect(page.getByText("Custom Header")).toBeVisible();
await expect(page.getByText("Line 1")).toBeVisible();
await expect(page.getByText("Line 2")).toBeVisible();
await expect(page.getByRole("button", { name: "Action" })).toBeVisible();
// Verify default header is not shown
await expect(page.getByRole("heading", { name: "Default Header" })).not.toBeVisible();
});
test("maintains proper rendering order with multiple slots", async ({ initTestBed, page }) => {
await initTestBed(`
<MultiSlotComponent>
<property name="topTemplate">
<Text testId="top">Top Content</Text>
</property>
<property name="bottomTemplate">
<Text testId="bottom">Bottom Content</Text>
</property>
<Text testId="middle">Middle Content</Text>
</MultiSlotComponent>
`, {
components: [
`
<Component name="MultiSlotComponent">
<VStack>
<Slot name="topTemplate" />
<Slot />
<Slot name="bottomTemplate" />
</VStack>
</Component>
`
]
});
// Verify all content is rendered
await expect(page.getByTestId("top")).toBeVisible();
await expect(page.getByTestId("middle")).toBeVisible();
await expect(page.getByTestId("bottom")).toBeVisible();
// Verify rendering order by checking positions
const topElement = page.getByTestId("top");
const middleElement = page.getByTestId("middle");
const bottomElement = page.getByTestId("bottom");
const topBox = await topElement.boundingBox();
const middleBox = await middleElement.boundingBox();
const bottomBox = await bottomElement.boundingBox();
expect(topBox?.y).toBeLessThan(middleBox?.y || 0);
expect(middleBox?.y).toBeLessThan(bottomBox?.y || 0);
});
test("works with dynamic context in template properties", async ({ initTestBed, page }) => {
await initTestBed(`
<ContextComponent>
<property name="messageTemplate">
<Text>{$message}</Text>
</property>
</ContextComponent>
`, {
components: [
`
<Component name="ContextComponent" var.currentMessage="Initial Message">
<VStack>
<Button label="Update Message" onClick="currentMessage = 'Updated Message'" />
<Slot name="messageTemplate" message="{currentMessage}">
<Text>No message</Text>
</Slot>
</VStack>
</Component>
`
]
});
// Verify initial context value
await expect(page.getByText("Initial Message")).toBeVisible();
// Update the context and verify template updates
await page.getByRole("button", { name: "Update Message" }).click();
await expect(page.getByText("Updated Message")).toBeVisible();
await expect(page.getByText("Initial Message")).not.toBeVisible();
});
test("handles empty slots gracefully", async ({ initTestBed, page }) => {
await initTestBed(`
<EmptySlotComponent>
</EmptySlotComponent>
`, {
components: [
`
<Component name="EmptySlotComponent">
<Card>
<Text>Before slot</Text>
<Slot />
<Text>After slot</Text>
</Card>
</Component>
`
]
});
// Verify component renders without errors when slot is empty
await expect(page.getByText("Before slot")).toBeVisible();
await expect(page.getByText("After slot")).toBeVisible();
});
test("supports slot with no default content", async ({ initTestBed, page }) => {
await initTestBed(`
<MinimalComponent>
<Text>Provided content</Text>
</MinimalComponent>
`, {
components: [
`
<Component name="MinimalComponent">
<VStack>
<Text>Component content</Text>
<Slot name="contentTemplate" />
<Slot />
</VStack>
</Component>
`
]
});
// Verify provided content renders in default slot
await expect(page.getByText("Provided content")).toBeVisible();
// Verify component structure renders without errors
await expect(page.getByText("Component content")).toBeVisible();
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/ThemeProvider.tsx:
--------------------------------------------------------------------------------
```typescript
import { useCallback, useEffect, useMemo, useState } from "react";
import {
generateBaseFontSizes,
generateBaseSpacings,
generateBaseTones,
generateBorderSegments,
generateButtonTones,
generatePaddingSegments,
generateTextFontSizes,
resolveThemeVar,
} from "./transformThemeVars";
import { normalizePath } from "../utils/misc";
import { matchThemeVar } from "../theming/hvar";
import { ThemeContext, ThemesContext } from "../theming/ThemeContext";
import themeVars, { getVarKey } from "../theming/themeVars";
import { EMPTY_ARRAY, EMPTY_OBJECT } from "../constants";
import { collectThemeChainByExtends } from "../theming/extendThemeUtils";
import { useComponentRegistry } from "../../components/ComponentRegistryContext";
import {
XmlUiCyanThemeDefinition,
XmlUiGrayThemeDefinition,
XmlUiGreenThemeDefinition,
XmlUiOrangeThemeDefinition,
XmlUiPurpleThemeDefinition,
XmlUiRedThemeDefinition,
XmlUiThemeDefinition,
} from "../theming/themes/xmlui";
import { useIsomorphicLayoutEffect } from "../utils/hooks";
import type {
AppThemes,
FontDef,
ThemeDefinition,
ThemeScope,
ThemeTone,
} from "../../abstractions/ThemingDefs";
import { omit } from "lodash-es";
import { ThemeToneKeys } from "./utils";
import { useDomRoot } from "./StyleContext";
export function useCompiledTheme(
activeTheme: ThemeDefinition | undefined,
activeTone: ThemeTone,
themes: ThemeDefinition[] = EMPTY_ARRAY,
resources: Record<string, string> = EMPTY_OBJECT,
resourceMap: Record<string, string> = EMPTY_OBJECT,
) {
const componentRegistry = useComponentRegistry();
const { componentThemeVars, componentDefaultThemeVars } = componentRegistry;
const themeDefChain = useMemo(() => {
if (activeTheme) {
return collectThemeChainByExtends(activeTheme, themes, componentDefaultThemeVars);
}
return undefined;
}, [activeTheme, componentDefaultThemeVars, themes]);
const allResources = useMemo(() => {
let mergedResources: ThemeDefinition["resources"] = {};
themeDefChain?.forEach((theme) => {
mergedResources = {
...mergedResources,
...theme.resources,
...theme.tones?.[activeTone]?.resources,
};
});
return {
...resources,
...mergedResources,
};
}, [themeDefChain, resources, activeTone]);
const allFonts = useMemo(() => {
const ret: Array<FontDef> = [];
Object.entries(allResources).forEach(([key, value]) => {
if (key.startsWith("font.")) {
ret?.push(value as FontDef);
}
});
return ret;
}, [allResources]);
const getResourceUrl = useCallback(
(resourceString?: string) => {
let resourceUrl = resourceString;
if (resourceString?.startsWith("resource:")) {
const resourceName = resourceString?.replace("resource:", "");
resourceUrl = allResources[resourceName] as string;
}
if (!resourceUrl) {
return resourceUrl;
}
if (resourceMap[resourceUrl]) {
return resourceMap[resourceUrl];
}
if (resourceUrl.startsWith("/") && resourceMap[resourceUrl.substring(1)]) {
return resourceMap[resourceUrl.substring(1)];
}
return normalizePath(resourceUrl);
},
[allResources, resourceMap],
);
const fontLinks: Array<string> = useMemo(() => {
return (allFonts?.filter((theme) => typeof theme === "string") || []) as Array<string>;
}, [allFonts]);
const themeDefChainVars = useMemo(() => {
if (!themeDefChain?.length) {
return [];
}
let mergedThemeVars = {};
themeDefChain?.forEach((theme) => {
mergedThemeVars = {
...mergedThemeVars,
...omit(theme.themeVars, "light", "dark"),
...(theme.themeVars?.[activeTone] as unknown as Record<string, string>),
...theme.tones?.[activeTone]?.themeVars,
};
});
//we put the generated theme vars before the last item in the chain
const resultedTheme = [
...themeDefChain
.map((themeDef) => ({
...omit(themeDef.themeVars, "light", "dark"),
...(themeDef.themeVars?.[activeTone] as unknown as Record<string, string>),
...themeDef.tones?.[activeTone]?.themeVars,
}))
.slice(0, themeDefChain.length - 1),
{
...generateBaseSpacings(mergedThemeVars),
...generateBaseFontSizes(mergedThemeVars),
...generatePaddingSegments(mergedThemeVars),
...generateBorderSegments(mergedThemeVars),
...generateBaseTones(mergedThemeVars),
...generateButtonTones(mergedThemeVars),
},
{
...omit(themeDefChain[themeDefChain.length - 1].themeVars, "light", "dark"),
...generateTextFontSizes(mergedThemeVars),
...(themeDefChain[themeDefChain.length - 1].themeVars?.[activeTone] as unknown as Record<
string,
string
>),
...themeDefChain[themeDefChain.length - 1].tones?.[activeTone]?.themeVars,
},
];
return resultedTheme;
}, [activeTone, themeDefChain]);
const allThemeVarsWithResolvedHierarchicalVars = useMemo(() => {
let mergedThemeVars: Record<string, string> = {};
themeDefChainVars?.forEach((theme) => {
theme = generatePaddingSegments(theme);
theme = generateBorderSegments(theme);
mergedThemeVars = { ...mergedThemeVars, ...theme };
});
const resolvedThemeVarsFromChains: Record<string, string> = {};
new Set([...Object.keys(themeVars.themeVars), ...componentThemeVars]).forEach((themeVar) => {
const result = matchThemeVar(themeVar, themeDefChainVars);
if (
result &&
result.forValue &&
result.matchedValue &&
result.forValue !== result.matchedValue
) {
resolvedThemeVarsFromChains[result.forValue] = `$${result.matchedValue}`;
}
});
return resolveThemeVarsWithCssVars({
...mergedThemeVars,
...resolvedThemeVarsFromChains,
});
}, [componentThemeVars, themeDefChainVars]);
const themeCssVars = useMemo(() => {
const ret: Record<string, string> = {};
Object.entries(allThemeVarsWithResolvedHierarchicalVars).forEach(([key, value]) => {
const themeKey = `--${themeVars.keyPrefix}-${key}`;
if (value) {
ret[themeKey] = value;
}
});
return ret;
}, [allThemeVarsWithResolvedHierarchicalVars]);
const getThemeVar = useCallback(
(varName: string) => {
return resolveThemeVar(varName, allThemeVarsWithResolvedHierarchicalVars);
},
[allThemeVarsWithResolvedHierarchicalVars],
);
useEffect(() => {
allFonts.forEach(async (font) => {
if (typeof font !== "string") {
const resolvedSrc = getResourceUrl(font.src);
let src = `url(${resolvedSrc})`;
if (font.format) {
src = `${src} format('${font.format}')`;
}
const ff = new FontFace(font.fontFamily, src, {
weight: font.fontWeight,
style: font.fontStyle,
display: font.fontDisplay as any,
});
try {
const loadedFontFace = await ff.load();
document.fonts.add(loadedFontFace);
} catch (e) {
console.error("loading fonts failed", e);
}
}
});
}, [themeDefChain, getResourceUrl, allFonts]);
return {
getResourceUrl,
fontLinks,
allThemeVarsWithResolvedHierarchicalVars,
themeCssVars,
getThemeVar,
};
}
export const builtInThemes: Array<ThemeDefinition> = [
XmlUiThemeDefinition,
XmlUiGreenThemeDefinition,
XmlUiGrayThemeDefinition,
XmlUiOrangeThemeDefinition,
XmlUiPurpleThemeDefinition,
XmlUiCyanThemeDefinition,
XmlUiRedThemeDefinition,
/*SolidThemeDefinition,*/
];
type ThemeProviderProps = {
children?: React.ReactNode;
themes?: Array<ThemeDefinition>;
defaultTheme?: string;
defaultTone?: ThemeTone;
resources?: Record<string, string>;
resourceMap?: Record<string, string>;
localThemes?: Record<string, string>;
};
// theme-overriding properties change.
function ThemeProvider({
children,
themes: custThemes = EMPTY_ARRAY,
defaultTheme = "xmlui",
defaultTone = "light",
resources = EMPTY_OBJECT,
resourceMap = EMPTY_OBJECT,
localThemes = EMPTY_OBJECT,
}: ThemeProviderProps) {
const [activeThemeTone, setActiveThemeTone] = useState<ThemeTone>(() => {
if (!defaultTone) {
return ThemeToneKeys[0];
}
return defaultTone;
});
useEffect(() => {
if (defaultTone) {
setActiveThemeTone(defaultTone);
}
}, [defaultTone]);
const themes: Array<ThemeDefinition> = useMemo(() => {
return [...custThemes, ...builtInThemes];
}, [custThemes]);
const availableThemeIds = useMemo(() => {
return [...new Set(themes.map((theme) => theme.id))];
}, [themes]);
const [activeThemeId, setActiveThemeId] = useState<string>(() => {
if (!defaultTheme) {
return availableThemeIds[0];
}
return defaultTheme;
});
useIsomorphicLayoutEffect(() => {
//we sync the activeThemeId with the default theme (mostly for HMR)
if (defaultTheme && availableThemeIds.includes(defaultTheme)) {
setActiveThemeId(defaultTheme);
} else {
setActiveThemeId(availableThemeIds[0]);
}
}, [availableThemeIds, defaultTheme]);
const activeTheme: ThemeDefinition = useMemo(() => {
let foundTheme: ThemeDefinition;
if (activeThemeId) {
foundTheme = themes.find((theme) => theme.id === activeThemeId);
}
if (!foundTheme) {
throw new Error(`Theme ${activeThemeId} not found, available themes: ${availableThemeIds}`);
}
return foundTheme;
}, [activeThemeId, availableThemeIds, themes]);
const { allThemeVarsWithResolvedHierarchicalVars, themeCssVars, getResourceUrl, getThemeVar } =
useCompiledTheme(activeTheme, activeThemeTone, themes, resources, resourceMap);
const domRoot = useDomRoot();
const [root, setRoot] = useState(null);
useIsomorphicLayoutEffect(() => {
if (typeof document !== "undefined") {
if(domRoot instanceof ShadowRoot){
setRoot(domRoot.getElementById("nested-app-root"));
} else {
setRoot(document.body);
}
}
}, [domRoot]);
const themeValue = useMemo(() => {
const themeVal: AppThemes = {
themes,
resources,
resourceMap,
activeThemeId,
activeThemeTone,
setActiveThemeId,
setActiveThemeTone,
availableThemeIds,
activeTheme,
toggleThemeTone: () => setActiveThemeTone(activeThemeTone === "light" ? "dark" : "light"),
};
return themeVal;
}, [
activeTheme,
activeThemeId,
activeThemeTone,
availableThemeIds,
resourceMap,
resources,
themes,
]);
const currentThemeContextValue = useMemo(() => {
const themeVal: ThemeScope = {
root,
setRoot,
activeThemeId,
activeThemeTone: activeThemeTone,
activeTheme,
themeStyles: themeCssVars,
themeVars: allThemeVarsWithResolvedHierarchicalVars,
getResourceUrl,
getThemeVar,
};
return themeVal;
}, [
activeTheme,
activeThemeId,
activeThemeTone,
allThemeVarsWithResolvedHierarchicalVars,
getResourceUrl,
getThemeVar,
root,
themeCssVars,
]);
return (
<ThemesContext.Provider value={themeValue}>
<ThemeContext.Provider value={currentThemeContextValue}>{children}</ThemeContext.Provider>
</ThemesContext.Provider>
);
}
function resolveThemeVarsWithCssVars(theme?: Record<string, string>) {
if (!theme) {
return {};
}
const ret: Record<string, string> = {};
Object.keys(theme).forEach((key) => {
ret[key] = resolveThemeVarToCssVars(key, theme);
});
return ret;
function resolveThemeVarToCssVars(varName: string, theme: Record<string, string>) {
const value = theme[varName];
if (typeof value === "string" && value.includes("$")) {
return replaceThemeVar(value);
}
return value;
}
function replaceThemeVar(input: string) {
const regex = /\$([a-zA-Z0-9_-]+)/gi;
const matches = input.matchAll(regex);
//we go from 1, because result[1] is the whole stuff
if (matches) {
let ret = input;
for (const match of matches) {
const varName = match[1];
if (varName) {
ret = ret.replace(match[0], `var(${getVarKey(varName)})`);
}
}
return ret;
}
return input;
}
}
export default ThemeProvider;
```
--------------------------------------------------------------------------------
/xmlui/src/components/HtmlTags/HtmlTags.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- table
$themeVarsTable: ();
@function createThemeVarTable($componentVariable) {
$themeVarsTable: t.appendThemeVar($themeVarsTable, $componentVariable) !global;
@return t.getThemeVar($themeVarsTable, $componentVariable);
}
$textColor-HtmlTable: createThemeVarTable("textColor-HtmlTable");
$backgroundColor-HtmlTable: createThemeVarTable("backgroundColor-HtmlTable");
$fontFamily-HtmlTable: createThemeVarTable("fontFamily-HtmlTable");
$fontSize-HtmlTable: createThemeVarTable("fontSize-HtmlTable");
$fontWeight-HtmlTable: createThemeVarTable("fontWeight-HtmlTable");
$textTransform-HtmlTable: createThemeVarTable("textTransform-HtmlTable");
$marginTop-HtmlTable: createThemeVarTable("marginTop-HtmlTable");
$marginBottom-HtmlTable: createThemeVarTable("marginBottom-HtmlTable");
$width-HtmlTable: createThemeVarTable("width-HtmlTable");
$themeVarsTable: t.composeBorderVars($themeVarsTable, "HtmlTable");
$themeVarsTable: t.composePaddingVars($themeVarsTable, "HtmlTable");
@layer components {
.htmlTable {
background-color: $backgroundColor-HtmlTable;
color: $textColor-HtmlTable;
font-family: $fontFamily-HtmlTable;
font-size: $fontSize-HtmlTable;
font-weight: $fontWeight-HtmlTable;
text-transform: $textTransform-HtmlTable;
margin-top: $marginTop-HtmlTable;
margin-bottom: $marginBottom-HtmlTable;
width: $width-HtmlTable;
@include t.borderVars($themeVarsTable, "HtmlTable");
@include t.paddingVars($themeVarsTable, "HtmlTable");
}
}
// --- thead
$themeVarsThead: ();
@function createThemeVarThead($componentVariable) {
$themeVarsThead: t.appendThemeVar($themeVarsThead, $componentVariable) !global;
@return t.getThemeVar($themeVarsThead, $componentVariable);
}
$backgroundColor-HtmlThead: createThemeVarThead("backgroundColor-HtmlThead");
$textColor-HtmlThead: createThemeVarThead("textColor-HtmlThead");
$fontWeight-HtmlThead: createThemeVarThead("fontWeight-HtmlThead");
$fontSize-HtmlThead: createThemeVarThead("fontSize-HtmlThead");
$textTransform-HtmlThead: createThemeVarThead("textTransform-HtmlThead");
$themeVarsThead: t.composeBorderVars($themeVarsThead, "HtmlThead");
$themeVarsThead: t.composePaddingVars($themeVarsThead, "HtmlThead");
@layer components {
.htmlThead {
background-color: $backgroundColor-HtmlThead;
color: $textColor-HtmlThead;
font-weight: $fontWeight-HtmlThead;
font-size: $fontSize-HtmlThead;
text-transform: $textTransform-HtmlThead;
@include t.borderVars($themeVarsThead, "HtmlThead");
@include t.paddingVars($themeVarsThead, "HtmlThead");
}
}
// --- tbody
$themeVarsTbody: ();
@function createThemeVarTbody($componentVariable) {
$themeVarsTbody: t.appendThemeVar($themeVarsTbody, $componentVariable) !global;
@return t.getThemeVar($themeVarsTbody, $componentVariable);
}
$backgroundColor-HtmlTbody: createThemeVarTbody("backgroundColor-HtmlTbody");
$textColor-HtmlTbody: createThemeVarTbody("textColor-HtmlTbody");
$textAlign-HtmlTbody: createThemeVarTbody("textAlign-HtmlTbody");
$verticalAlignment-HtmlTbody: createThemeVarTbody("verticalAlignment-HtmlTbody");
$textTransform-HtmlTbody: createThemeVarTbody("textTransform-HtmlTbody");
@layer components {
.htmlTbody {
background-color: $backgroundColor-HtmlTbody;
color: $textColor-HtmlTbody;
text-align: $textAlign-HtmlTbody;
vertical-align: $verticalAlignment-HtmlTbody;
text-transform: $textTransform-HtmlTbody;
}
}
// --- tfoot
$themeVarsTfoot: ();
@function createThemeVarTfoot($componentVariable) {
$themeVarsTfoot: t.appendThemeVar($themeVarsTfoot, $componentVariable) !global;
@return t.getThemeVar($themeVarsTfoot, $componentVariable);
}
$backgroundColor-HtmlTfoot: createThemeVarTfoot("backgroundColor-HtmlTfoot");
$textColor-HtmlTfoot: createThemeVarTfoot("textColor-HtmlTfoot");
@layer components {
.htmlTfoot {
background-color: $backgroundColor-HtmlTfoot;
color: $textColor-HtmlTfoot;
}
}
// --- th
$themeVarsTh: ();
@function createThemeVarTh($componentVariable) {
$themeVarsTh: t.appendThemeVar($themeVarsTh, $componentVariable) !global;
@return t.getThemeVar($themeVarsTh, $componentVariable);
}
$backgroundColor-HtmlTh: createThemeVarTh("backgroundColor-HtmlTh");
$textColor-HtmlTh: createThemeVarTh("textColor-HtmlTh");
$fontWeight-HtmlTh: createThemeVarTh("fontWeight-HtmlTh");
$fontSize-HtmlTh: createThemeVarTh("fontSize-HtmlTh");
$backgroundColor-HtmlTh--hover: createThemeVarTh("backgroundColor-HtmlTh--hover");
$themeVarsTh: t.composeBorderVars($themeVarsTh, "HtmlTh");
$themeVarsTh: t.composePaddingVars($themeVarsTh, "HtmlTh");
@layer components {
.htmlTh {
background-color: $backgroundColor-HtmlTh;
color: $textColor-HtmlTh;
font-weight: $fontWeight-HtmlTh;
font-size: $fontSize-HtmlTh;
@include t.borderVars($themeVarsTh, "HtmlTh");
@include t.paddingVars($themeVarsTh, "HtmlTh");
&:hover {
background-color: $backgroundColor-HtmlTh--hover;
}
}
}
// --- tr
$themeVarsTr: ();
@function createThemeVarTr($componentVariable) {
$themeVarsTr: t.appendThemeVar($themeVarsTr, $componentVariable) !global;
@return t.getThemeVar($themeVarsTr, $componentVariable);
}
$backgroundColor-HtmlTr: createThemeVarTr("backgroundColor-HtmlTr");
$backgroundColor-HtmlTr--hover: createThemeVarTr("backgroundColor-HtmlTr--hover");
$backgroundColor-even-HtmlTr: createThemeVarTr("backgroundColor-even-HtmlTr");
$textColor-HtmlTr: createThemeVarTr("textColor-HtmlTr");
$textColor-HtmlTr--hover: createThemeVarTr("textColor-HtmlTr--hover");
$fontSize-HtmlTr: createThemeVarTr("fontSize-HtmlTr");
$fontWeight-HtmlTr: createThemeVarTr("fontWeight-HtmlTr");
$themeVarsTr: t.composeBorderVars($themeVarsTr, "HtmlTr");
@layer components {
.htmlTr {
background-color: $backgroundColor-HtmlTr;
color: $textColor-HtmlTr;
font-weight: $fontWeight-HtmlTr;
font-size: $fontSize-HtmlTr;
@include t.borderVars($themeVarsTr, "HtmlTr");
&:nth-child(even) {
background-color: $backgroundColor-even-HtmlTr;
}
// Apply hover effect for rows with mixed th, td elements
&:hover {
background-color: $backgroundColor-HtmlTr--hover;
color: $textColor-HtmlTr--hover;
}
// Remove hover effect for rows with only th elements
&:hover:not(:has(:not(th))) {
background-color: initial;
}
}
}
// --- td
$themeVarsTd: ();
@function createThemeVarTd($componentVariable) {
$themeVarsTd: t.appendThemeVar($themeVarsTd, $componentVariable) !global;
@return t.getThemeVar($themeVarsTd, $componentVariable);
}
$backgroundColor-HtmlTd: createThemeVarTd("backgroundColor-HtmlTd");
$text-align-HtmlTd: createThemeVarTd("text-align-HtmlTd");
$verticalAlignment-HtmlTd: createThemeVarTd("verticalAlignment-HtmlTd");
$fontSize-HtmlTd: createThemeVarTd("fontSize-HtmlTd");
$fontWeight-HtmlTd: createThemeVarTd("fontWeight-HtmlTd");
$themeVarsTd: t.composeBorderVars($themeVarsTd, "HtmlTd");
$themeVarsTd: t.composePaddingVars($themeVarsTd, "HtmlTd");
@layer components {
.htmlTd {
background-color: $backgroundColor-HtmlTd;
text-align: $text-align-HtmlTd;
vertical-align: $verticalAlignment-HtmlTd;
font-size: $fontSize-HtmlTd;
font-weight: $fontWeight-HtmlTd;
@include t.borderVars($themeVarsTd, "HtmlTd");
@include t.paddingVars($themeVarsTd, "HtmlTd");
}
}
// --- List styling (for both ul and ol)
$themeVarsList: ();
@function createThemeVarList($componentVariable) {
$themeVarsList: t.appendThemeVar($themeVarsList, $componentVariable) !global;
@return t.getThemeVar($themeVarsList, $componentVariable);
}
$themeVarsList: t.composeBorderVars($themeVarsList, "HtmlOl");
$themeVarsList: t.composePaddingVars($themeVarsList, "HtmlOl");
$marginTop-HtmlOl: createThemeVarList("marginTop-HtmlOl");
$marginBottom-HtmlOl: createThemeVarList("marginBottom-HtmlOl");
$themeVarsList: t.composeBorderVars($themeVarsList, "HtmlUl");
$themeVarsList: t.composePaddingVars($themeVarsList, "HtmlUl");
$marginTop-HtmlUl: createThemeVarList("marginTop-HtmlUl");
$marginBottom-HtmlUl: createThemeVarList("marginBottom-HtmlUl");
$themeVarsList: t.composeBorderVars($themeVarsList, "HtmlLi");
$themeVarsList: t.composePaddingVars($themeVarsList, "HtmlLi");
$marginLeft-HtmlLi: createThemeVarList("marginLeft-HtmlLi");
$marginTop-HtmlLi: createThemeVarList("marginTop-HtmlLi");
$marginBottom-HtmlLi: createThemeVarList("marginBottom-HtmlLi");
$listStyleType-HtmlLi: createThemeVarList("listStyleType-HtmlLi");
@layer components {
// Apply to both ul and ol elements
.htmlUl {
margin-top: $marginTop-HtmlUl;
margin-bottom: $marginBottom-HtmlUl;
@include t.borderVars($themeVarsList, "HtmlUl");
@include t.paddingVars($themeVarsList, "HtmlUl");
}
.htmlOl {
margin-top: $marginTop-HtmlOl;
margin-bottom: $marginBottom-HtmlOl;
@include t.borderVars($themeVarsList, "HtmlOl");
@include t.paddingVars($themeVarsList, "HtmlOl");
}
.htmlLi {
margin-top: $marginTop-HtmlLi;
margin-bottom: $marginBottom-HtmlLi;
list-style-type: $listStyleType-HtmlLi;
margin-left: $marginLeft-HtmlLi;
@include t.borderVars($themeVarsList, "HtmlLi");
@include t.paddingVars($themeVarsList, "HtmlLi");
}
}
/*
// Compress when nested
li .htmlUl,
li .htmlOl {
margin-top: 0;
margin-bottom: 0;
}
*/
// --- Heading styling
$themeVarsHeading: ();
@function createThemeVarHeading($componentVariable) {
$themeVarsHeading: t.appendThemeVar($themeVarsHeading, $componentVariable) !global;
@return t.getThemeVar($themeVarsHeading, $componentVariable);
}
$marginTop-HtmlHeading: createThemeVarHeading("marginTop-HtmlHeading");
$marginBottom-HtmlHeading: createThemeVarHeading("marginBottom-HtmlHeading");
@layer components {
.htmlH1,
.htmlH2,
.htmlH3,
.htmlH4,
.htmlH5,
.htmlH6 {
margin-top: $marginTop-HtmlHeading;
margin-bottom: $marginBottom-HtmlHeading;
}
}
// --- Video
$themeVarsVideo: ();
@function createThemeVarVideo($componentVariable) {
$themeVarsVideo: t.appendThemeVar($themeVarsVideo, $componentVariable) !global;
@return t.getThemeVar($themeVarsVideo, $componentVariable);
}
$marginTop-HtmlVideo: createThemeVarVideo("marginTop-HtmlVideo");
$marginBottom-HtmlVideo: createThemeVarVideo("marginBottom-HtmlVideo");
@layer components {
.htmlVideo {
margin-top: $marginTop-HtmlVideo;
margin-bottom: $marginBottom-HtmlVideo;
}
}
// --- Details
$themeVarsDetails: ();
@function createThemeVarDetails($componentVariable) {
$themeVarsDetails: t.appendThemeVar($themeVarsDetails, $componentVariable) !global;
@return t.getThemeVar($themeVarsDetails, $componentVariable);
}
$themeVarsDetails: t.composeBorderVars($themeVarsDetails, "HtmlDetails");
$themeVarsDetails: t.composePaddingVars($themeVarsDetails, "HtmlDetails");
$marginTop-HtmlDetails: createThemeVarDetails("marginTop-HtmlDetails");
$marginBottom-HtmlDetails: createThemeVarDetails("marginBottom-HtmlDetails");
@layer components {
.htmlDetails {
margin-top: $marginTop-HtmlDetails;
margin-bottom: $marginBottom-HtmlDetails;
@include t.borderVars($themeVarsDetails, "HtmlDetails");
@include t.paddingVars($themeVarsDetails, "HtmlDetails");
}
}
// --- Details
$themeVarsDetails: ();
@function createThemeVarDetails($componentVariable) {
$themeVarsDetails: t.appendThemeVar($themeVarsDetails, $componentVariable) !global;
@return t.getThemeVar($themeVarsDetails, $componentVariable);
}
$marginTop-HtmlDetails: createThemeVarDetails("marginTop-HtmlDetails");
$marginBottom-HtmlDetails: createThemeVarDetails("marginBottom-HtmlDetails");
@layer components {
.htmlDetails {
margin-top: $marginTop-HtmlDetails;
margin-bottom: $marginBottom-HtmlDetails;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVarsTable: t.json-stringify($themeVarsTable);
themeVarsThead: t.json-stringify($themeVarsThead);
themeVarsTbody: t.json-stringify($themeVarsTbody);
themeVarsTfoot: t.json-stringify($themeVarsTfoot);
themeVarsTh: t.json-stringify($themeVarsTh);
themeVarsTr: t.json-stringify($themeVarsTr);
themeVarsTd: t.json-stringify($themeVarsTd);
themeVarsList: t.json-stringify($themeVarsList);
themeVarsHeading: t.json-stringify($themeVarsHeading);
themeVarsVideo: t.json-stringify($themeVarsVideo);
themeVarsDetails: t.json-stringify($themeVarsDetails);
}
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/ComponentDefs.ts:
--------------------------------------------------------------------------------
```typescript
import type { RenderChildFn } from "./RendererDefs";
import type { CollectedDeclarations } from "../components-core/script-runner/ScriptingSourceTree";
import type { DefaultThemeVars } from "./ThemingDefs";
/**
* This interface represents the core properties of a component definition
* (independent of component metadata).
*/
export interface ComponentDefCore {
/**
* The type discriminator field of the component; it defines the unique ID of the component type.
*/
type: string;
/**
* Unique identifier of a component-like object
*/
uid?: string;
/**
* An optional identifier we use for e2e tests; it does not influence the rendering of a component.
*/
testId?: string;
/**
* Though components manage their state internally, the app logic may require user
* state management. Components may have user *variables*, which the UI logic uses to
* manage the application state. This property holds the variables (name and value
* pairs) associated with this component definition.
*/
vars?: Record<string, any>;
/**
* Each component may have child components to constitute a hierarchy of components.
* This property holds the definition of these nested children.
*/
children?: ComponentDef[];
/**
* Components may have slots that can be filled with other components. This property
* holds the contents of the slots.
*/
slots?: Record<string, ComponentDef[]>;
/**
* This property is evaluated to a Boolean value during run time. When this value is
* `true`, the component with its children chain is rendered; otherwise, the entire
* component hierarchy is omitted from the rendered tree.
*/
when?: string | boolean;
/**
* Some components work with data obtained asynchronously. Fetching this data requires
* some state management handling the complexity (including error handling) of data
* access. A *loader* is responsible for managing this logic. This property holds the
* loaders associated with this component definition.
*/
loaders?: ComponentDef[];
/**
* Components may have functions that are used to perform some logic. This property
* holds the functions (name and function body) associated with this component
* definition.
*/
functions?: Record<string, any>;
/**
* Components managing state through variables or loaders are wrapped with containers
* responsible for this job. Just as components, containers form a hierarchy. While
* working with this hierarchy, parent components may flow state values (key and value
* pairs) to their child containers. This property holds the name of state values to
* flow down to the direct child containers.
*/
uses?: string[];
/**
* Arbitrary debug information that can be attached to a component definition.
* Current usage:
* - `debug: { source: { start: number, end: number } }` The start and end
* positions of the source belonging to the particular component definition.
*/
debug?: Record<string, any>;
}
// This interface represents the properties of a component definition.
export interface ComponentDef<TMd extends ComponentMetadata = ComponentMetadata>
extends ComponentDefCore,
Scriptable {
// Component properties
props?: Record<keyof TMd["props"], any>;
// Component events
events?: Record<keyof TMd["events"], any>;
// Components may have an API that other components can use to interact with them.
// This property holds the API methods associated with this component definition.
api?: Record<keyof TMd["apis"], any>;
// Components may provide context variables that can be used to in expressions and
// event handlers within the component.
contextVars?: Record<keyof TMd["contextVars"], string>;
}
// XMLUI allows the creation of reusable components assembled from other XMLUI
// components (with markup). This type represents such components. The name
// `CompoundComponent` refers to the assembled nature of reusable components.
export interface CompoundComponentDef extends Scriptable {
// Each compound component must have a unique name. The markup uses this name to refer
// to the particular compound component.
name: string;
// Each compound component must have a single root component defining the component
// contents.
component: ComponentDef;
// Compound components may provide an API that other components can use to interact
// with them. This property holds the API methods associated with this compound
// component definition.
api?: Record<string, any>;
// This property holds the variables (name and value pairs) associated with this
// compound component definition.
vars?: Record<string, any>;
// A component can define namespaces on it, with the <ComponentName xmlns:KEY="VALUE" />
// syntax. These are used later to resolve the `type` of the componentDef.
// <KEY:Button/> will have type `VALUE.Button` (joined with a "." (dot)).
namespaces?: Record<string, string>;
// Arbitrary debug information that can be attached to a component definition.
// Current usage:
// - `debug: { source: { start: number, end: number } }` The start and end
// positions of the source belonging to the particular component definition.
debug?: Record<string, any>;
codeBehind?: string;
}
// Sometimes, components and compound components can both be used
export type ComponentLike = ComponentDef | CompoundComponentDef;
// Some components render their nested child components dynamically using the current
// context of their parents. For example, reusable components (`CompoundComponentDef`)
// have a `Slot` placeholder that marks the location where the children should be
// rendered. Other component types (e.g., `ApiBoundComponent` and `ContainerComponent`)
// use this dynamic rendering, too.
//
// This interface represents this functionality.
export interface DynamicChildComponentDef extends ComponentDef {
// This property holds a function that can render a particular child or children into
// a specific layout context.
renderChild: RenderChildFn;
// This property holds the child component that should be rendered.
childToRender: ComponentDef;
}
// This interface holds the properties representing a scriptable component definition.
interface Scriptable {
// This property holds the text defined in all <script> sections attached to a
// component.
script?: string;
// This property holds the parsed form of scripts stored in code-behind files.
scriptCollected?: CollectedDeclarations;
// This property holds errors coming from parsing the code-behind scripts.
scriptError?: any;
}
export type PropertyValueType = "boolean" | "string" | "number" | "any" | "ComponentDef";
// A generic validation function that retrieves either a hint (the validation argument
// has issues) or undefined (the argument is valid).
export type IsValidFunction<T> = (
propKey: string,
propValue: T,
) => string | string[] | undefined | null;
// This type represents the description of a property value, which can be a string, a
// number, or an object with a value and a description. This type is used in the
// metadata of a component.
export type PropertyValueDescription<T = string | number> =
| T
| {
value: T;
description: string;
};
// Components have properties, events, context values, and exposed API endpoints, each
// holding metadata the rendering engine uses at run time. This type defines the
// structure of such metadata.
export type ComponentPropertyMetadata = {
// This field defines the description explaining the property. You can use markdown,
// as the UI may display this value.
readonly description: string;
// This field defines the type of the property. The rendering engine uses this
// information to validate the property value.
readonly valueType?: PropertyValueType;
// This field defines the available values of the property. The rendering engine
// uses this information to validate the property value.
readonly availableValues?: readonly PropertyValueDescription[];
// This field defines the default value of the property. The rendering engine uses
// this information to set the default value of the property.
defaultValue?: any;
// This field defines a validation function that the rendering engine uses to
// validate the property value. The function returns one or more hints if the
// property value is invalid.
isValid?: IsValidFunction<any>;
// Indicates that a particular property is internal and should not be exposed in the
// documentation
isInternal?: boolean;
// Indicates that a particular property is required for the component to essentially
// function.
isRequired?: boolean;
};
// This type defines the metadata of a component API. It is used to describe the
// methods that the component exposes for interaction.
export type ComponentApiMetadata = {
// This field defines the description explaining the property. You can use markdown,
// as the UI may display this value.
readonly description: string;
// This field defines the signature of the API method using TypeScript-like syntax.
readonly signature?: string;
// This field defines the parameters of the API method. It is an object where each key
// is the parameter name, and the value is its description.
readonly parameters?: Record<string, string>;
};
// This type defines the metadata of a component part. It is used to describe the
// individual parts that make up the component.
export type ComponentPartMetadata = {
description: string;
};
// Components have metadata that the rendering engine uses to render the component.
// This type defines the structure of such metadata.
//
// The type has generic parameters to ensure that type-checking works with the
// metadata defined here in concert with the renderer object using the same metadata
// type.
export type ComponentMetadata<
TProps extends Record<string, ComponentPropertyMetadata> = Record<string, any>,
TEvents extends Record<string, ComponentPropertyMetadata> = Record<string, any>,
TContextValues extends Record<string, ComponentPropertyMetadata> = Record<string, any>,
TApis extends Record<string, ComponentApiMetadata> = Record<string, any>,
> = {
// The current status of the component. This field is now mandatory.
status?: "stable" | "experimental" | "deprecated" | "in progress" | "internal";
// Component description in markdown; it goes into the generated documentation
description?: string;
// Optional short description of the component to display in visual tools
shortDescription?: string;
// Description of component properties
props?: TProps;
// Description of component events
events?: TEvents;
// Description of component context variables
contextVars?: TContextValues;
// Description of component APIs
apis?: TApis;
// Indicates that a particular component does not render any visual element on its own (Default: false)
nonVisual?: boolean;
// childrenAsTemplate?: keyof TProps;
childrenAsTemplate?: string;
opaque?: boolean;
// List of theme variables available for the component
themeVars?: Record<string, string>;
// Optional description of theme variables available for the component
themeVarDescriptions?: Record<string, string>;
// Theme variable default values for the "solid" theme
defaultThemeVars?: DefaultThemeVars;
// Theme variable defaults for a particular tone-specific theme
toneSpecificThemeVars?: Record<string, Record<string, string>>;
// Indicates that the documentation should include only the theme variables
// including the component name
limitThemeVarsToComponent?: boolean;
// Indicates that the component allows arbitrary props (not just the named ones)
allowArbitraryProps?: boolean;
// If the component is specalized, this property holds the name of the parent component
specializedFrom?: string;
// Contains the folder name if it does not match the component name
docFolder?: string;
// Indicates that the component represent an HTML tag
isHtmlTag?: boolean;
// Describes the individual parts that make up the component
parts?: Record<string, ComponentPartMetadata>;
// The name of the default part. Layout properties will be applied to this part by default.
defaultPart?: string;
};
export interface ParentRenderContext {
renderChild: RenderChildFn;
children?: ComponentDef[];
props?: Record<string, any>;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/FormItem/FormItem.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Data binding**: Automatically syncs control values with form data using the `bindTo` property
- **Validation**: Displays validation states and error messages for the associated input
- **Flexible labeling**: Supports labels, helper text, and various label positioning options
- **Layout management**: Handles consistent spacing and alignment of form elements
See [this guide](/forms) for details.
%-DESC-END
%-PROP-START bindTo
Try to enter some kind of text in the input field labelled `Lastname` and submit the form. Note how the submitted data looks like compared to the one set in `data`.
```xmlui-pg copy display name="Example: bindTo"
<App>
<Form
data="{{ firstname: 'James', lastname: 'Clewell' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem label="Firstname" bindTo="firstname" />
<FormItem label="Lastname" />
</Form>
</App>
```
%-PROP-END
%-PROP-START enabled
```xmlui-pg copy display name="Example: enabled"
<App>
<Form>
<FormItem label="Firstname" enabled="true" />
<FormItem label="Lastname" enabled="false" />
</Form>
</App>
```
%-PROP-END
%-PROP-START initialValue
```xmlui-pg copy display name="Example: initialValue"
<App>
<Form data="{{ firstname: 'Michael', lastname: undefined }}">
<FormItem label="Firstname" bindTo="firstname" initialValue="James" />
<FormItem label="Lastname" bindTo="lastname" initialValue="Jordan" />
</Form>
</App>
```
%-PROP-END
%-PROP-START label
```xmlui-pg copy display name="Example: label"
<App>
<Form>
<FormItem label="Firstname" />
</Form>
</App>
```
%-PROP-END
%-PROP-START labelPosition
Different input components have different layout methods
(i.e. `TextBox` labels are positioned at the top, `Checkbox` labels are on the right side).
```xmlui-pg copy display name="Example: labelPosition"
<App>
<Form>
<FormItem label="Start Label" labelPosition="start" />
<FormItem label="Top Label" labelPosition="top" />
<FormItem label="End Label" labelPosition="end" />
<FormItem label="Bottom Label" labelPosition="bottom" />
</Form>
</App>
```
%-PROP-END
%-PROP-START lengthInvalidMessage
In the app, type a name longer than four characters in both fields, then leave the edited field. The two fields will display different error messages; the second uses the customized one.
```xmlui-pg copy display name="Example: lengthInvalidMessage"
<App>
<Form
data="{{ firstname: 'James', lastname: 'Clewell' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem maxLength="4" bindTo="firstname" />
<FormItem lengthInvalidMessage="Name is too long!" maxLength="4" bindTo="lastname" />
</Form>
</App>
```
%-PROP-END
%-PROP-START lengthInvalidSeverity
In the app, type a name longer than four characters in both fields, then leave the edited field. The two fields will display different error messages; the second uses a warning instead of an error.
```xmlui-pg copy display name="Example: lengthInvalidSeverity"
<App>
<Form
data="{{ firstname: 'James', lastname: 'Clewell' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem maxLength="4" bindTo="firstname" />
<FormItem lengthInvalidSeverity="warning" maxLength="4" bindTo="lastname" />
</Form>
</App>
```
%-PROP-END
%-PROP-START maxLength
Note that it is not possible for the user to enter a string larger than the value of the `maxLength`,
but setting such a value programmatically still results in a validation check.
In the demo below, try to enter an input longer than 4 characters or submit the form as is.
```xmlui-pg copy display name="Example: maxLength"
<App>
<Form
data="{{ firstname: 'James' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem maxLength="4" bindTo="firstname" />
</Form>
</App>
```
%-PROP-END
%-PROP-START minLength
In the demo below, enter an input shorter than 4 characters or just submit the form as is.
```xmlui-pg copy display name="Example: minLength"
<App>
<Form
data="{{ firstname: '' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem minLength="4" bindTo="firstname" />
</Form>
</App>
```
%-PROP-END
%-PROP-START maxValue
Note that it is not possible for the user to enter a number larger than the value of the `maxValue`,
but setting such a value programmatically still results in a validation check.
In the demo below, enter an input greater than 99 or just submit the form as is.
```xmlui-pg copy display name="Example: maxValue"
<App>
<Form
data="{{ age: 100 }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem maxValue="99" bindTo="age" type="integer" />
</Form>
</App>
```
%-PROP-END
%-PROP-START minValue
Note that it is not possible for the user to enter a number smaller than the value of the `minValue`,
but setting such a value programmatically still results in a validation check.
In the demo below, enter an input smaller than 18 or just submit the form as is.
```xmlui-pg copy display name="Example: minValue"
<App>
<Form
data="{{ age: 0 }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem minValue="18" bindTo="age" type="integer" />
</Form>
</App>
```
%-PROP-END
%-PROP-START pattern
| Value | Description |
| :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `email` | Accepts the `[username]@[second level domain].[top level domain]` format |
| `phone` | Accepts a wide range of characters: numbers, upper- and lowercase letters and the following symbols: `#`, `*`, `)`, `(`, `+`, `.`, `\`, `-`, `_`, `&`, `'` |
| `url` | Accepts URLs and URIs starting with either `http` or `https` |
> **Note:** To define custom patterns and regular expressions, see the [regex section](#regex).
In the demo below, enter an input that is not solely one lowercase string or just submit the form as is.
```xmlui-pg copy display name="Example: pattern"
<App>
<Form
data="{{ userEmail: 'mailto' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem pattern="email" bindTo="userEmail" />
</Form>
</App>
```
%-PROP-END
%-PROP-START patternInvalidMessage
In the demo below, enter anything that does not look like an email and click outside to see the regular and custom message.
```xmlui-pg copy display name="Example: patternInvalidMessage"
<App>
<Form
data="{{ oldEmail: 'mailto', newEmail: 'mailto' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem pattern="email" bindTo="oldEmail" />
<FormItem
patternInvalidMessage="This does not look like an email"
pattern="email" bindTo="newEmail" />
</Form>
</App>
```
%-PROP-END
%-PROP-START patternInvalidSeverity
In the demo below, enter a string of characters that does not look like an email to see the difference in feedback.
```xmlui-pg copy display name="Example: patternInvalidSeverity"
<App>
<Form
data="{{ oldEmail: 'mailto', newEmail: 'mailto' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem pattern="email" bindTo="oldEmail" />
<FormItem patternInvalidSeverity="warning" pattern="email" bindTo="newEmail" />
</Form>
</App>
```
%-PROP-END
%-PROP-START rangeInvalidMessage
In the demo below, enter any value that is out of range in the input fields and click outside to see the regular and custom message.
Just submitting the form as is also produces the same error.
```xmlui-pg copy display name="Example: rangeInvalidMessage"
<App>
<Form
data="{{ age: 100, customAge: 100 }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem minValue="0" maxValue="99" bindTo="age" type="integer" />
<FormItem
minValue="0"
maxValue="99"
rangeInvalidMessage="Out of range!"
bindTo="customAge"
type="integer" />
</Form>
</App>
```
%-PROP-END
%-PROP-START rangeInvalidSeverity
In the demo below, enter any value that is out of range in the input fields and click outside to see the regular and custom message.
Just submitting the form as is also produces the same error.
```xmlui-pg copy display name="Example: rangeInvalidSeverity"
<App>
<Form
data="{{ age: 100, customAge: 100 }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem minValue="0" maxValue="99" bindTo="age" type="integer" />
<FormItem
minValue="0" maxValue="99"
rangeInvalidSeverity="warning"
bindTo="customAge"
type="integer" />
</Form>
</App>
```
%-PROP-END
%-PROP-START regex
In the demo below, enter an input that is not solely one lowercase string or just submit the form as is.
```xmlui-pg copy display name="Example: regex"
<App>
<Form
data="{{ password: 'PASSWORD123' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem regex="^[a-z]+$" bindTo="password" />
</Form>
</App>
```
%-PROP-END
%-PROP-START regexInvalidMessage
In the demo below, enter a password that is not a lowercase string and click outside to see the regular and custom message.
```xmlui-pg copy display name="Example: regexInvalidMessage"
<App>
<Form
data="{{ oldPassword: 'PASSWORD123', newPassword: 'PASSWORD123' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem regex="^[a-z]+$" bindTo="oldPassword" />
<FormItem
regexInvalidMessage="Password must be all lowercase"
regex="^[a-z]+$" bindTo="newPassword" />
</Form>
</App>
```
%-PROP-END
%-PROP-START regexInvalidSeverity
In the demo below, enter a password that is not a lowercase string and click outside to see the regular and custom message.
Just submitting the form as is also produces the same error.
```xmlui-pg copy display name="Example: regexInvalidSeverity"
<App>
<Form
data="{{ oldPassword: 'PASSWORD123', newPassword: 'PASSWORD123' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem regex="^[a-z]+$" bindTo="oldPassword" />
<FormItem regexInvalidSeverity="warning" regex="^[a-z]+$" bindTo="newPassword" />
</Form>
</App>
```
%-PROP-END
%-PROP-START required
```xmlui-pg copy display name="Example: required"
<App>
<Form
data="{{ name: undefined }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem required="true" label="Name" bindTo="name" />
</Form>
</App>
```
%-PROP-END
%-PROP-START requiredInvalidMessage
In the demo below, leave the field empty and click outside to see the regular and custom message.
```xmlui-pg copy display name="Example: requiredInvalidMessage"
<App>
<Form
data="{{ firstname: undefined, lastname: undefined }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem required="true" label="First Name" bindTo="firstname" />
<FormItem
requiredInvalidMessage="Last Name is required!"
required="true"
label="Last Name"
bindTo="lastname" />
</Form>
</App>
```
%-PROP-END
%-PROP-START type
>[!INFO]
> For custom controls, there is no need to explicitly set the `type` to `custom`.
> Omitting the type and providing child components implicitly sets it to custom.
%-PROP-END
%-PROP-START customValidationsDebounce
Note how changing the input in the demo below will result in a slight delay of input checks noted by the appearance of a new "I" character.
```xmlui-pg copy display name="Example: customValidationsDebounce"
<App>
<Form
var.validations="Validations: "
data="{{ name: 'Joe' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem
customValidationsDebounce="3000"
onValidate="(value) => {
validations += '| ';
return value === value.toUpperCase();
}"
bindTo="name" />
<Text value="{validations}" />
</Form>
</App>
```
%-PROP-END
%-EVENT-START validate
In the demo below, leave the field as is and submit the form or enter an input that is not all capital letters.
```xmlui-pg copy {7} display name="Example: validate"
<App>
<Form
data="{{ name: 'James' }}"
onSubmit="(toSave) => toast(JSON.stringify(toSave))">
<FormItem
bindTo="name"
onValidate="(value) => value === value.toUpperCase()" />
</Form>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/docs/content/components/Carousel.md:
--------------------------------------------------------------------------------
```markdown
# Carousel [#carousel]
This component displays a slideshow by cycling through elements (images, text, or custom slides) like a carousel.
`Carousel` displays a slideshow by cycling through elements (images, text, or custom slides) in a carousel format. It provides an interactive way to present multiple content items in a single interface area with smooth transitions and navigation controls.
**Key features:**
- **Multiple orientations**: Supports both horizontal and vertical scrolling
- **Navigation controls**: Built-in previous/next buttons with customizable icons
- **Indicators**: Visual dots showing current position and allowing direct navigation
- **Autoplay functionality**: Automatic slide progression with configurable intervals
- **Loop support**: Continuous cycling through slides
- **Keyboard navigation**: Arrow key support for accessibility
- **Exposed methods**: Programmatic control via `scrollTo()`, `scrollNext()`, `scrollPrev()`, `canScrollNext()`, `canScrollPrev()`
## Properties [#properties]
### `autoplay` (default: false) [#autoplay-default-false]
Start scrolling the carousel automatically (`true`) or not (`false`).
This property indicates whether the carousel automatically scrolls through slides.
```xmlui-pg copy display name="Example: autoplay"
<App>
<Carousel autoplay autoplayInterval="2000" height="120px" loop>
<CarouselItem>
<Card title="Slide 1" />
</CarouselItem>
<CarouselItem>
<Card title="Slide 2" />
</CarouselItem>
<CarouselItem>
<Card title="Slide 3" />
</CarouselItem>
</Carousel>
</App>
```
### `autoplayInterval` (default: 5000) [#autoplayinterval-default-5000]
Specifies the interval between autoplay transitions.
This property specifies the interval between autoplay transitions in milliseconds.
### `controls` (default: true) [#controls-default-true]
Display the previous/next controls (`true`) or not (`false`).
This property indicates whether the carousel displays navigation controls (previous/next buttons).
```xmlui-pg copy display name="Example: controls"
<App>
<Carousel controls="true" height="120px">
<CarouselItem>Slide 1 with controls</CarouselItem>
<CarouselItem>Slide 2 with controls</CarouselItem>
</Carousel>
</App>
```
### `indicators` (default: true) [#indicators-default-true]
Display the individual slides as buttons (`true`) or not (`false`).
This property indicates whether the carousel displays position indicators.
```xmlui-pg copy display name="Example: indicators"
<App>
<Carousel indicators="true" height="120px">
<CarouselItem>Slide 1 with indicators</CarouselItem>
<CarouselItem>Slide 2 with indicators</CarouselItem>
<CarouselItem>Slide 3 with indicators</CarouselItem>
</Carousel>
</App>
```
### `loop` (default: false) [#loop-default-false]
Sets whether the carousel should loop back to the start/end when it reaches the last/first slide.
This property indicates whether the carousel loops continuously from the last slide back to the first.
```xmlui-pg copy display name="Example: loop"
<App>
<Carousel loop="true" height="120px">
<CarouselItem>
<Card title="First Slide" />
</CarouselItem>
<CarouselItem>
<Card title="Second Slide" />
</CarouselItem>
<CarouselItem>
<Card title="Third Slide" />
</CarouselItem>
</Carousel>
</App>
```
### `nextIcon` [#nexticon]
The icon to display for the next control.
This property specifies the icon to display for the next control button.
```xmlui-pg copy display name="Example: custom icons"
<App>
<Carousel nextIcon="chevronright" prevIcon="chevronleft" height="120px">
<CarouselItem>Slide 1</CarouselItem>
<CarouselItem>Slide 2</CarouselItem>
<CarouselItem>Slide 3</CarouselItem>
</Carousel>
</App>
```
### `orientation` (default: "horizontal") [#orientation-default-horizontal]
This property indicates the orientation of the carousel. The `horizontal` value indicates that the carousel moves horizontally, and the `vertical` value indicates that the carousel moves vertically.
Available values:
| Value | Description |
| --- | --- |
| `horizontal` | The component will fill the available space horizontally **(default)** |
| `vertical` | The component will fill the available space vertically |
This property indicates the orientation of the carousel. The `horizontal` value indicates that the carousel moves horizontally, and the `vertical` value indicates that the carousel moves vertically.
Available values:
| Value | Description |
| --- | --- |
| `horizontal` | The carousel moves horizontally **(default)** |
| `vertical` | The carousel moves vertically |
```xmlui-pg copy display name="Example: orientation"
<App>
<Carousel orientation="horizontal" height="120px">
<CarouselItem>Horizontal Slide 1</CarouselItem>
<CarouselItem>Horizontal Slide 2</CarouselItem>
</Carousel>
</App>
```
### `prevIcon` [#previcon]
The icon to display for the previous control.
This property specifies the icon to display for the previous control button.
### `startIndex` (default: 0) [#startindex-default-0]
The index of the first slide to display.
This property indicates the index of the first slide to display when the carousel initializes.
```xmlui-pg copy display name="Example: startIndex"
<App>
<Carousel startIndex="2" height="120px">
<CarouselItem>Slide 1</CarouselItem>
<CarouselItem>Slide 2</CarouselItem>
<CarouselItem>Slide 3 (starts here)</CarouselItem>
<CarouselItem>Slide 4</CarouselItem>
</Carousel>
</App>
```
### `stopAutoplayOnInteraction` (default: true) [#stopautoplayoninteraction-default-true]
This property indicates whether autoplay stops on user interaction.
This property indicates whether autoplay stops when the user interacts with the carousel (clicking controls, indicators, or using keyboard navigation).
### `transitionDuration` (default: 25) [#transitionduration-default-25]
The duration of the transition between slides.
This property indicates the duration of the transition between slides in milliseconds.
## Events [#events]
### `displayDidChange` [#displaydidchange]
This event is triggered when value of Carousel has changed.
This event is triggered when the active slide changes.
The event handler receives the active slide index as a parameter.
```xmlui-pg copy display name="Example: displayDidChange"
<App var.currentSlide="0">
<Carousel onDisplayDidChange="(index) => currentSlide = index" height="120px">
<CarouselItem>Slide 1</CarouselItem>
<CarouselItem>Slide 2</CarouselItem>
<CarouselItem>Slide 3</CarouselItem>
</Carousel>
<Text>Current slide: {currentSlide + 1}</Text>
</App>
```
## Exposed Methods [#exposed-methods]
### `canScrollNext` [#canscrollnext]
This method returns `true` if the carousel can scroll to the next slide.
**Signature**: `canScrollNext(): boolean`
### `canScrollPrev` [#canscrollprev]
This method returns `true` if the carousel can scroll to the previous slide.
**Signature**: `canScrollPrev(): boolean`
### `scrollNext` [#scrollnext]
This method scrolls the carousel to the next slide.
**Signature**: `scrollNext(): void`
### `scrollPrev` [#scrollprev]
This method scrolls the carousel to the previous slide.
**Signature**: `scrollPrev(): void`
### `scrollTo` [#scrollto]
This method scrolls the carousel to the specified slide index.
**Signature**: `scrollTo(index: number): void`
- `index`: The index of the slide to scroll to.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-control-Carousel | $color-primary | $color-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-control-active-Carousel | $color-primary | $color-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-control-disabled-Carousel | $color-surface-200 | $color-surface-200 |
| [backgroundColor](../styles-and-themes/common-units/#color)-control-hover-Carousel | $color-primary | $color-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-Carousel | $color-surface-200 | $color-surface-200 |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-active-Carousel | $color-primary | $color-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-hover-Carousel | $color-surface-200 | $color-surface-200 |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-control-Carousel | 50% | 50% |
| [height](../styles-and-themes/common-units/#size)-Carousel | 100% | 100% |
| [height](../styles-and-themes/common-units/#size)-control-Carousel | 36px | 36px |
| [height](../styles-and-themes/common-units/#size)-indicator-Carousel | 6px | 6px |
| [textColor](../styles-and-themes/common-units/#color)-control-Carousel | $textColor | $textColor |
| [textColor](../styles-and-themes/common-units/#color)-control-active-Carousel | $color-primary | $color-primary |
| [textColor](../styles-and-themes/common-units/#color)-control-disabled-Carousel | $textColor-disabled | $textColor-disabled |
| [textColor](../styles-and-themes/common-units/#color)-control-hover-Carousel | $textColor | $textColor |
| [textColor](../styles-and-themes/common-units/#color)-indicator-Carousel | $color-primary | $color-primary |
| [textColor](../styles-and-themes/common-units/#color)-indicator-active-Carousel | $color-primary | $color-primary |
| [textColor](../styles-and-themes/common-units/#color)-indicator-hover-Carousel | $color-primary | $color-primary |
| [width](../styles-and-themes/common-units/#size)-Carousel | 100% | 100% |
| [width](../styles-and-themes/common-units/#size)-control-Carousel | 36px | 36px |
| [width](../styles-and-themes/common-units/#size)-indicator-Carousel | 25px | 25px |
### Navigation Controls [#navigation-controls]
The carousel provides built-in navigation controls that can be customized through theme variables:
```xmlui-pg copy name="Example: Custom control styling"
<App>
<Theme
backgroundColor-control-Carousel="red"
textColor-control-Carousel="white"
borderRadius-control-Carousel="4px">
<Carousel height="120px">
<CarouselItem>Slide 1</CarouselItem>
<CarouselItem>Slide 2</CarouselItem>
<CarouselItem>Slide 3</CarouselItem>
</Carousel>
</Theme>
</App>
```
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-control-active-Carousel | $color-primary | $color-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-control-Carousel | $color-primary | $color-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-control-disabled-Carousel | $color-surface-200 | $color-surface-200 |
| [backgroundColor](../styles-and-themes/common-units/#color)-control-hover-Carousel | $color-primary | $color-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-active-Carousel | $color-primary | $color-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-Carousel | $color-surface-200 | $color-surface-200 |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-hover-Carousel | $color-surface-200 | $color-surface-200 |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-control-Carousel | 50% | 50% |
| [height](../styles-and-themes/common-units/#size)-Carousel | 100% | 100% |
| [height](../styles-and-themes/common-units/#size)-control-Carousel | 36px | 36px |
| [height](../styles-and-themes/common-units/#size)-indicator-Carousel | 6px | 6px |
| [textColor](../styles-and-themes/common-units/#color)-control-active-Carousel | $color-primary | $color-primary |
| [textColor](../styles-and-themes/common-units/#color)-control-Carousel | $textColor | $textColor |
| [textColor](../styles-and-themes/common-units/#color)-control-disabled-Carousel | $textColor-disabled | $textColor-disabled |
| [textColor](../styles-and-themes/common-units/#color)-control-hover-Carousel | $textColor | $textColor |
| [textColor](../styles-and-themes/common-units/#color)-indicator-active-Carousel | $color-primary | $color-primary |
| [textColor](../styles-and-themes/common-units/#color)-indicator-Carousel | $color-primary | $color-primary |
| [textColor](../styles-and-themes/common-units/#color)-indicator-hover-Carousel | $color-primary | $color-primary |
| [width](../styles-and-themes/common-units/#size)-Carousel | 100% | 100% |
| [width](../styles-and-themes/common-units/#size)-control-Carousel | 36px | 36px |
| [width](../styles-and-themes/common-units/#size)-indicator-Carousel | 25px | 25px |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/component-dev-guide.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Component Development Guide
## Component Architecture Overview
XMLUI components follow a specific architectural pattern that separates concerns between React implementation and XMLUI framework integration. Understanding this pattern is crucial for creating components that integrate properly with the XMLUI ecosystem.
## The Two-File Pattern
Every XMLUI component should be split into two files:
### 1. Native Component (`ComponentNameNative.tsx`)
This file contains the actual React component implementation:
```typescript
// ToneSwitchNative.tsx
import React from 'react';
export type ToneSwitchProps = {
/**
* Icon to display for light mode
* @default "sun"
*/
iconLight?: string;
/**
* Icon to display for dark mode
* @default "moon"
*/
iconDark?: string;
};
export function ToneSwitch({
iconLight = "sun",
iconDark = "moon"
}: ToneSwitchProps) {
// React component implementation
return <div>...</div>;
}
```
**Key characteristics:**
- Pure React component
- Exports TypeScript interface for props
- Uses standard React patterns and hooks
- Contains all component logic and rendering
- Can be used standalone outside XMLUI
### 2. XMLUI Renderer (`ComponentName.tsx`)
This file contains the XMLUI integration layer:
```typescript
// ToneSwitch.tsx
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
import { ToneSwitch, type ToneSwitchProps } from "./ToneSwitchNative";
const COMP = "ToneSwitch";
export const ToneSwitchMd = createMetadata({
status: "stable",
description: "`ToneSwitch` enables users to switch themes.",
props: {
iconLight: {
type: "string",
description: "Icon to display for light mode",
defaultValue: "sun",
},
iconDark: {
type: "string",
description: "Icon to display for dark mode",
defaultValue: "moon",
},
},
// ... theme variables, etc.
});
export const toneSwitchComponentRenderer = createComponentRenderer(
COMP,
ToneSwitchMd,
({ node, extractValue }) => {
return <ToneSwitch
iconLight={extractValue(node.props.iconLight)}
iconDark={extractValue(node.props.iconDark)}
/>;
}
);
```
**Key characteristics:**
- Imports the native component
- Defines component metadata for documentation
- Creates the component renderer that bridges XMLUI and React
- Handles prop extraction from XMLUI markup
## Component Registration
### 1. Add to Component Metadata Registry
```typescript
// collectedComponentMetadata.ts
import { ToneSwitchMd } from "./ToneSwitch/ToneSwitch";
export const collectedComponentMetadata = {
// ... other components
ToneSwitch: ToneSwitchMd,
};
```
### 2. Register Component Renderer
```typescript
// ComponentProvider.tsx
import { toneSwitchComponentRenderer } from "./ToneSwitch/ToneSwitch";
// In ComponentRegistry constructor:
if (process.env.VITE_USED_COMPONENTS_ToneSwitch !== "false") {
this.registerCoreComponent(toneSwitchComponentRenderer);
}
```
## Component Documentation Pattern
### Source Documentation (`ComponentName.md`)
Each component should have a corresponding `.md` file in its source directory (`src/components/ComponentName/ComponentName.md`) that contains template-based documentation. This source documentation uses special template markers that get processed during documentation generation.
#### Template Markers
XMLUI uses these optional template patterns for documentation generation:
- **`%-DESC-START` / `%-DESC-END`**: Main component description and examples
- **`%-PROP-START propName` / `%-PROP-END`**: Detailed property documentation
- **`%-EVENT-START eventName` / `%-EVENT-END`**: Event documentation
- **`%-API-START methodName` / `%-API-END`**: API method documentation
Use these to provide additional detail beyond what's automatically generated from the metadata.
The ToneSwitch example shows the minimal approach - just %-DESC-START/END for the main example, letting the props documentation be auto-generated from the metadata. You'd add %-PROP-START iconLight only if you wanted to elaborate on that specific prop with examples or additional context beyond "Icon to display for light mode".
#### Example Source Documentation
```markdown
%-DESC-START
xmlui-pg {4} copy display name="Example: using ToneSwitch"
<App>
<AppHeader>
<SpaceFiller />
<ToneSwitch />
</AppHeader>
<Card
title="Tone Switch"
subtitle="Toggle the switch to change the tone."
/>
</App>
%-DESC-END
```
### Generated Documentation
When you run `npm run generate-all-docs` from `xmlui/xmlui`, the source documentation gets processed and generates the final documentation files in `docs/content/components/`.
The generated documentation includes:
- Component description from `%-DESC-START/END` blocks
- Properties section with details from metadata and `%-PROP-START/END` blocks
- Events section (if any events are defined)
- Exposed methods section (if any API methods are defined)
- Styling section with theme variables table
#### Generated Documentation Example
```markdown
# ToneSwitch [#toneswitch]
ToneSwitch enables the user to switch between light and dark modes using a switch control.
xmlui-pg {4} copy display name="Example: using ToneSwitch"
<App>
<AppHeader>
<SpaceFiller />
<ToneSwitch />
</AppHeader>
<Card
title="Tone Switch"
subtitle="Toggle the switch to change the tone."
/>
</App>
## Properties [#properties]
### iconDark (default: "moon") [#icondark-default-moon]
Icon to display for dark mode
### iconLight (default: "sun") [#iconlight-default-sun]
Icon to display for light mode
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-ToneSwitch-dark | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-ToneSwitch-light | $color-surface-200 | $color-surface-700 |
```
**Important distinction**: The source `.md` files in `src/components/` are templates that use special markers, while the generated files in `docs/content/components/` are the final documentation that gets published. Always edit the source files, not the generated ones.
## Component Metadata Best Practices
### Props Definition
```typescript
props: {
propName: {
type: "string" | "boolean" | "number",
description: "Clear description of what this prop does",
defaultValue: "default value if any",
required?: true, // if prop is required
},
}
```
### Theme Variables
```typescript
// Include if component has custom styling
themeVars: parseScssVar(styles.themeVars),
limitThemeVarsToComponent: true,
defaultThemeVars: {
[`backgroundColor-${COMP}`]: "$color-surface-200",
[`color-${COMP}`]: "$color-text-primary",
// Dark mode variants
dark: {
[`backgroundColor-${COMP}`]: "$color-surface-700",
}
}
```
## Component Renderer Patterns
### Basic Prop Extraction
```typescript
export const componentRenderer = createComponentRenderer(
COMP,
ComponentMd,
({ node, extractValue }) => {
return <Component
title={extractValue(node.props.title)}
enabled={extractValue.asOptionalBoolean(node.props.enabled)}
count={extractValue.asOptionalNumber(node.props.count)}
/>;
}
);
```
### Common Extract Value Methods
- `extractValue(prop)` - Extract string value
- `extractValue.asOptionalString(prop)` - Extract optional string
- `extractValue.asOptionalBoolean(prop)` - Extract optional boolean
- `extractValue.asOptionalNumber(prop)` - Extract optional number
## Extending Existing Components
### Using inputRenderer Pattern
When extending components like Toggle, use the `inputRenderer` pattern:
```typescript
export function CustomSwitch({ icon }: CustomSwitchProps) {
return (
<Toggle
variant="switch"
inputRenderer={(contextVars) => (
<div className="custom-switch">
<Icon name={contextVars.$checked ? "on" : "off"} />
</div>
)}
/>
);
}
```
**Context Variables Available:**
- `$checked` - Current boolean state
- `$setChecked` - Function to update state
## Theme Integration
### Using Theme Context
```typescript
import { useThemes, useTheme } from "../../components-core/theming/ThemeContext";
function ThemeAwareComponent() {
// For reading/writing theme state
const { activeThemeTone, setActiveThemeTone } = useThemes();
// For accessing theme properties
const theme = useTheme();
return <div data-theme={activeThemeTone}>...</div>;
}
```
## File Structure
```
src/components/MyComponent/
├── MyComponent.tsx # XMLUI renderer & metadata
├── MyComponentNative.tsx # React implementation
├── MyComponent.module.scss # Component styles
├── MyComponent.md # Component documentation template
```
## Documentation Generation Workflow
1. **Create source documentation**: Write your component documentation in `src/components/ComponentName/ComponentName.md` using the template markers
2. **Generate documentation**: Run `npm run generate-all-docs` from `xmlui/xmlui`
3. **Review generated docs**: Check the generated files in `docs/content/components/` to ensure they look correct
4. **Iterate as needed**: Update source documentation and regenerate as needed
The documentation generation process:
- Extracts component metadata from your component renderer
- Processes template markers in source `.md` files
- Combines metadata with template content
- Generates final documentation with proper formatting, property tables, and theme variable documentation
## Common Pitfalls to Avoid
### 1. Don't Mix Concerns
- Keep React logic in Native component
- Keep XMLUI integration in renderer component
- Don't put XMLUI-specific code in Native component
### 2. Always Export Props Type
```typescript
// Good
export type MyComponentProps = { ... };
export function MyComponent(props: MyComponentProps) { ... }
// Bad
export function MyComponent({ title }: { title: string }) { ... }
```
### 3. Handle Prop Extraction Properly
```typescript
// Good - handles undefined props
iconLight={extractValue(node.props.iconLight)}
// Bad - assumes props exist
iconLight={node.props.iconLight}
```
### 4. Include Proper Default Values
```typescript
// Good - consistent defaults
export function Component({
title = "Default Title"
}: ComponentProps) { ... }
// In metadata:
defaultValue: "Default Title"
```
### 5. Don't Edit Generated Documentation
```typescript
// Good - edit source template
// src/components/MyComponent/MyComponent.md
// Bad - editing generated files (gets overwritten)
// docs/content/components/MyComponent.md
```
## Testing Your Component
### 1. Test Native Component Standalone
```typescript
// Can be tested as regular React component
render(<ToneSwitch iconLight="custom" iconDark="custom" />);
```
### 2. Test XMLUI Integration
```xmlui
<ToneSwitch iconLight="brightness" iconDark="nightMode" />
```
### 3. Verify Documentation Generation
- Check that props appear in generated docs
- Verify default values are correct
- Ensure descriptions are helpful
- Test example code snippets
## Documentation Guidelines
### Component Description
- Start with backticks around component name
- Be concise but descriptive
- Focus on what the component does, not how
### Prop Descriptions
- Use clear, actionable language
- Mention default behavior
- Include examples when helpful
- Avoid implementation details
### Examples
- Show basic usage first
- Include common customization scenarios
- Use realistic prop values
- Use `xmlui-pg` blocks for interactive examples
### Template Marker Usage
- Use `%-DESC-START/END` for main description and primary examples
- Use `%-PROP-START propName/END` for detailed property documentation
- Use `%-EVENT-START eventName/END` for event documentation
- Use `%-API-START methodName/END` for API method documentation
## Summary Checklist
Before submitting a new XMLUI component:
- [ ] Split into Native and Renderer files
- [ ] Proper TypeScript interfaces exported
- [ ] Component registered in ComponentProvider
- [ ] Metadata added to collectedComponentMetadata
- [ ] Props properly documented with defaults
- [ ] Theme variables defined if needed
- [ ] Source documentation created with template markers
- [ ] Documentation generated and reviewed
- [ ] Examples include usage scenarios
- [ ] Component follows established patterns
- [ ] No XMLUI-specific code in Native component
- [ ] Proper prop extraction in renderer
- [ ] Generated documentation is accurate and helpful
```