This is page 47 of 143. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/assets/img/bg-iphone-14-pro.jpg?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── cyan-tools-design.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/docs/content/components/Checkbox.md:
--------------------------------------------------------------------------------
```markdown
# Checkbox [#checkbox]
`Checkbox` allows users to make binary choices with a clickable box that shows checked/unchecked states. It's essential for settings, preferences, multi-select lists, and accepting terms or conditions.
**Key features:**
- **Flexible labeling**: Position labels on any side and support custom label templates
- **Validation support**: Built-in validation states for form error handling
- **Indeterminate state**: Special visual state for mixed selections (useful for "select all" scenarios)
To bind data to a `Checkbox`, use the XMLUI [Forms infrastructure](/forms).
## Checkbox Values [#checkbox-values]
The `initialValue` and `value` properties of the checkbox are transformed to a Boolean value to display the checked (`true`) or unchecked (`false`) state with this logic:
- `null` and `undefined` go to `false`.
- If the property is Boolean, the property value is used as is.
- If it is a number, `NaN` and `0` result in `false`; other values represent `true`.
- If the property is a string, the empty string and the literal "false" string result in `false`; others result in `true`.
- The empty array value goes to `false`; other array values result in `true`.
- Object values with no properties result in `false`; other values represent `true`.
## Use children as Content Template [#use-children-as-content-template]
The [inputTemplate](#inputtemplate) property can be replaced by setting the item template component directly as the Checkbox's child.
In the following example, the two Checkbox are functionally the same:
```xmlui copy
<App>
<!-- This is the same -->
<Checkbox>
<property name="inputTemplate">
<Text>Template</Text>
</property>
</Checkbox>
<!-- As this -->
<Checkbox>
<Text>Template</Text>
</Checkbox>
</App>
```
## Properties [#properties]
### `autoFocus` (default: false) [#autofocus-default-false]
If this property is set to `true`, the component gets the focus automatically when displayed.
### `enabled` (default: true) [#enabled-default-true]
This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
```xmlui-pg copy display {4-5, 9-10} name="Example: enabled"
<App>
Enabled checkboxes:
<HStack>
<Checkbox initialValue="true" enabled="true" />
<Checkbox initialValue="false" enabled="true" />
</HStack>
Disabled checkboxes:
<HStack>
<Checkbox initialValue="true" enabled="false" />
<Checkbox initilaValue="false" enabled="false" />
</HStack>
</App>
```
### `indeterminate` (default: false) [#indeterminate-default-false]
The `true` value of this property signals that the component is in an _intedeterminate state_.
This prop is commonly used if there are several other checkboxes linked to one checkbox and some items in that group of checkboxes are in a mixed state: at least one item has a different value compared to the rest.
The following sample binds the state of two checkboxes to one and updates the state of the top checkbox accordingly. When the states of the bound checkboxes are different, the top checkbox is set to indeterminate:
```xmlui-pg copy display name="Example: indeterminate"
---app copy display {4}
<App var.indeterminate="{false}">
<Checkbox
label="Indeterminate Checkbox"
indeterminate="{indeterminate}"
initialValue="{cb1.value}"
readOnly="true" />
<ChangeListener
listenTo="{ { v1: cb1.value, v2: cb2.value } }"
onDidChange="indeterminate = cb1.value !== cb2.value" />
Group of checkboxes:
<HStack>
<Checkbox label="Checkbox #1" id="cb1" initialValue="true" />
<Checkbox label="Checkbox #2" id="cb2" initialValue="false" />
</HStack>
</App>
---desc
Try this sample by clicking the bottom group of checkboxes.
```
### `initialValue` (default: false) [#initialvalue-default-false]
This property sets the component's initial value.
### `inputTemplate` [#inputtemplate]
This property is used to define a custom checkbox input template
### `readOnly` (default: false) [#readonly-default-false]
Set this property to `true` to disallow changing the component value.
```xmlui-pg copy {3} display name="Example: readOnly"
<App>
<Checkbox readOnly="true" label="Checked" initialValue="true" />
<Checkbox readOnly="true" label="Unchecked" intialValue="false" />
</App>
```
### `required` (default: false) [#required-default-false]
Set this property to `true` to indicate it must have a value before submitting the containing form.
### `validationStatus` (default: "none") [#validationstatus-default-none]
This property allows you to set the validation status of the input component.
Available values:
| Value | Description |
| --- | --- |
| `valid` | Visual indicator for an input that is accepted |
| `warning` | Visual indicator for an input that produced a warning |
| `error` | Visual indicator for an input that produced an error |
## Events [#events]
### `click` [#click]
This event is triggered when the Checkbox is clicked.
### `didChange` [#didchange]
This event is triggered when value of Checkbox has changed.
```xmlui-pg copy display name="Example: didChange"
<App verticalAlignment="center" var.changes="">
<Checkbox label="Changeable" onDidChange="changes += '+'" />
<Checkbox
label="Readonly"
readOnly="true"
onDidChange="changes += '-'" />
<Text value="Changes: {changes}" />
</App>
```
### `gotFocus` [#gotfocus]
This event is triggered when the Checkbox has received the focus.
Click the `Checkbox` in the example demo to change the label text. Note how clicking elsewhere resets the text to the original.
```xmlui-pg copy display name="Example: gotFocus/lostFocus"
<App var.focused="{false}" verticalAlignment="center">
<Checkbox
value="true"
onGotFocus="focused = true"
onLostFocus="focused = false"
/>
<Text value="{focused === true ? 'I am focused!' : 'I have lost the focus!'}" />
</App>
```
### `lostFocus` [#lostfocus]
This event is triggered when the Checkbox has lost the focus.
(See the example above)
## Exposed Methods [#exposed-methods]
### `setValue` [#setvalue]
This method sets the current value of the Checkbox.
**Signature**: `set value(value: boolean): void`
- `value`: The new value to set for the checkbox.
You can use this method to set the checkbox's current value programmatically (`true`: checked, `false`: unchecked).
```xmlui-pg copy {10,13,15} display name="Example: value and setValue"
<App var.changes="">
<Checkbox
id="checkbox"
readOnly="true"
label="This checkbox can be set only programmatically"
onDidChange="changes += '+'" />
<HStack>
<Button
label="Check"
onClick="checkbox.setValue(true)" />
<Button
label="Uncheck"
onClick="checkbox.setValue(false)" />
</HStack>
<Text>The checkbox is {checkbox.value ? "checked" : "unchecked"}</Text>
<Text value="Changes: {changes}" />
</App>
```
### `value` [#value]
This method returns the current value of the Checkbox.
**Signature**: `get value(): boolean`
You can query this read-only API property to query the checkbox's current value (`true`: checked, `false`: unchecked).
See an example in the `setValue` API method.
## Parts [#parts]
The component has some parts that can be styled through layout properties and theme variables separately:
- **`input`**: The checkbox input area.
- **`label`**: The label displayed for the checkbox.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Checkbox--default | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Checkbox--disabled | $color-surface-200 | $color-surface-200 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Checkbox--disabled | $color-surface-200 | $color-surface-200 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Checkbox--error | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Checkbox--success | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Checkbox--warning | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Checkbox | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Checkbox | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Checkbox--error | $borderColor-Checkbox--error | $borderColor-Checkbox--error |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Checkbox--error | $borderColor-Checkbox--error | $borderColor-Checkbox--error |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Checkbox--success | $borderColor-Checkbox--success | $borderColor-Checkbox--success |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Checkbox--success | $borderColor-Checkbox--success | $borderColor-Checkbox--success |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Checkbox--warning | $borderColor-Checkbox--warning | $borderColor-Checkbox--warning |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Checkbox--warning | $borderColor-Checkbox--warning | $borderColor-Checkbox--warning |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-Checkbox | $backgroundColor-primary | $backgroundColor-primary |
| [borderColor](../styles-and-themes/common-units/#color)-Checkbox--default | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Checkbox--default--hover | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Checkbox--disabled | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Checkbox--error | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Checkbox--success | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Checkbox--warning | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Checkbox | $color-primary-500 | $color-primary-500 |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Checkbox | $color-primary-500 | $color-primary-500 |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Checkbox--error | $borderColor-Checkbox--error | $borderColor-Checkbox--error |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Checkbox--error | $borderColor-Checkbox--error | $borderColor-Checkbox--error |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Checkbox--success | $borderColor-Checkbox--success | $borderColor-Checkbox--success |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Checkbox--success | $borderColor-Checkbox--success | $borderColor-Checkbox--success |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Checkbox--warning | $borderColor-Checkbox--warning | $borderColor-Checkbox--warning |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Checkbox--warning | $borderColor-Checkbox--warning | $borderColor-Checkbox--warning |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Checkbox--default | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Checkbox--error | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Checkbox--success | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Checkbox--warning | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-Checkbox--default--focus | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-Checkbox--error--focus | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-Checkbox--success--focus | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-Checkbox--warning--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Checkbox--default--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Checkbox--error--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Checkbox--success--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Checkbox--warning--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Checkbox--default--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Checkbox--error--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Checkbox--success--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Checkbox--warning--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Checkbox--default--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Checkbox--error--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Checkbox--success--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Checkbox--warning--focus | *none* | *none* |
```
--------------------------------------------------------------------------------
/xmlui/src/components/TextArea/TextArea.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: (
);
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$componentName: "TextArea";
$themeVars: t.composePaddingVars($themeVars, $componentName);
// Variables for default variant
$borderRadius-TextArea--default: createThemeVar("Input:borderRadius-#{$componentName}--default");
$borderColor-TextArea--default: createThemeVar("Input:borderColor-#{$componentName}--default");
$borderWidth-TextArea--default: createThemeVar("Input:borderWidth-#{$componentName}--default");
$borderStyle-TextArea--default: createThemeVar("Input:borderStyle-#{$componentName}--default");
$fontSize-TextArea--default: createThemeVar("Input:fontSize-#{$componentName}--default");
$backgroundColor-TextArea--default: createThemeVar("Input:backgroundColor-#{$componentName}--default");
$boxShadow-TextArea--default: createThemeVar("Input:boxShadow-#{$componentName}--default");
$textColor-TextArea--default: createThemeVar("Input:textColor-#{$componentName}--default");
$borderColor-TextArea--default--hover: createThemeVar("Input:borderColor-#{$componentName}--default--hover");
$backgroundColor-TextArea--default--hover: createThemeVar("Input:backgroundColor-#{$componentName}--default--hover");
$boxShadow-TextArea--default--hover: createThemeVar("Input:boxShadow-#{$componentName}--default--hover");
$textColor-TextArea--default--hover: createThemeVar("Input:textColor-#{$componentName}--default--hover");
$borderColor-TextArea--default--focus: createThemeVar("Input:borderColor-#{$componentName}--default--focus");
$backgroundColor-TextArea--default--focus: createThemeVar("Input:backgroundColor-#{$componentName}--default--focus");
$boxShadow-TextArea--default--focus: createThemeVar("Input:boxShadow-#{$componentName}--default--focus");
$textColor-TextArea--default--focus: createThemeVar("Input:textColor-#{$componentName}--default--focus");
$outlineWidth-TextArea--default--focus: createThemeVar("Input:outlineWidth-#{$componentName}--default--focus");
$outlineColor-TextArea--default--focus: createThemeVar("Input:outlineColor-#{$componentName}--default--focus");
$outlineStyle-TextArea--default--focus: createThemeVar("Input:outlineStyle-#{$componentName}--default--focus");
$outlineOffset-TextArea--default--focus: createThemeVar("Input:outlineOffset-#{$componentName}--default--focus");
$textColor-placeholder-TextArea--default: createThemeVar("Input:textColor-placeholder-#{$componentName}--default");
$fontSize-placeholder-TextArea--default: createThemeVar("Input:fontSize-placeholder-#{$componentName}--default");
// Variables for error variant
$borderRadius-TextArea--error: createThemeVar("Input:borderRadius-#{$componentName}--error");
$borderColor-TextArea--error: createThemeVar("Input:borderColor-#{$componentName}--error");
$borderWidth-TextArea--error: createThemeVar("Input:borderWidth-#{$componentName}--error");
$borderStyle-TextArea--error: createThemeVar("Input:borderStyle-#{$componentName}--error");
$fontSize-TextArea--error: createThemeVar("Input:fontSize-#{$componentName}--error");
$backgroundColor-TextArea--error: createThemeVar("Input:backgroundColor-#{$componentName}--error");
$boxShadow-TextArea--error: createThemeVar("Input:boxShadow-#{$componentName}--error");
$textColor-TextArea--error: createThemeVar("Input:textColor-#{$componentName}--error");
$borderColor-TextArea--error--hover: createThemeVar("Input:borderColor-#{$componentName}--error--hover");
$backgroundColor-TextArea--error--hover: createThemeVar("Input:backgroundColor-#{$componentName}--error--hover");
$boxShadow-TextArea--error--hover: createThemeVar("Input:boxShadow-#{$componentName}--error--hover");
$textColor-TextArea--error--hover: createThemeVar("Input:textColor-#{$componentName}--error--hover");
$borderColor-TextArea--error--focus: createThemeVar("Input:borderColor-#{$componentName}--error--focus");
$backgroundColor-TextArea--error--focus: createThemeVar("Input:backgroundColor-#{$componentName}--error--focus");
$boxShadow-TextArea--error--focus: createThemeVar("Input:boxShadow-#{$componentName}--error--focus");
$textColor-TextArea--error--focus: createThemeVar("Input:textColor-#{$componentName}--error--focus");
$outlineWidth-TextArea--error--focus: createThemeVar("Input:outlineWidth-#{$componentName}--error--focus");
$outlineColor-TextArea--error--focus: createThemeVar("Input:outlineColor-#{$componentName}--error--focus");
$outlineStyle-TextArea--error--focus: createThemeVar("Input:outlineStyle-#{$componentName}--error--focus");
$outlineOffset-TextArea--error--focus: createThemeVar("Input:outlineOffset-#{$componentName}--error--focus");
$textColor-placeholder-TextArea--error: createThemeVar("Input:textColor-placeholder-#{$componentName}--error");
$fontSize-placeholder-TextArea--error: createThemeVar("Input:fontSize-placeholder-#{$componentName}--error");
// Variables for warning variant
$borderRadius-TextArea--warning: createThemeVar("Input:borderRadius-#{$componentName}--warning");
$borderColor-TextArea--warning: createThemeVar("Input:borderColor-#{$componentName}--warning");
$borderWidth-TextArea--warning: createThemeVar("Input:borderWidth-#{$componentName}--warning");
$borderStyle-TextArea--warning: createThemeVar("Input:borderStyle-#{$componentName}--warning");
$fontSize-TextArea--warning: createThemeVar("Input:fontSize-#{$componentName}--warning");
$backgroundColor-TextArea--warning: createThemeVar("Input:backgroundColor-#{$componentName}--warning");
$boxShadow-TextArea--warning: createThemeVar("Input:boxShadow-#{$componentName}--warning");
$textColor-TextArea--warning: createThemeVar("Input:textColor-#{$componentName}--warning");
$borderColor-TextArea--warning--hover: createThemeVar("Input:borderColor-#{$componentName}--warning--hover");
$backgroundColor-TextArea--warning--hover: createThemeVar("Input:backgroundColor-#{$componentName}--warning--hover");
$boxShadow-TextArea--warning--hover: createThemeVar("Input:boxShadow-#{$componentName}--warning--hover");
$textColor-TextArea--warning--hover: createThemeVar("Input:textColor-#{$componentName}--warning--hover");
$borderColor-TextArea--warning--focus: createThemeVar("Input:borderColor-#{$componentName}--warning--focus");
$backgroundColor-TextArea--warning--focus: createThemeVar("Input:backgroundColor-#{$componentName}--warning--focus");
$boxShadow-TextArea--warning--focus: createThemeVar("Input:boxShadow-#{$componentName}--warning--focus");
$textColor-TextArea--warning--focus: createThemeVar("Input:textColor-#{$componentName}--warning--focus");
$outlineWidth-TextArea--warning--focus: createThemeVar("Input:outlineWidth-#{$componentName}--warning--focus");
$outlineColor-TextArea--warning--focus: createThemeVar("Input:outlineColor-#{$componentName}--warning--focus");
$outlineStyle-TextArea--warning--focus: createThemeVar("Input:outlineStyle-#{$componentName}--warning--focus");
$outlineOffset-TextArea--warning--focus: createThemeVar("Input:outlineOffset-#{$componentName}--warning--focus");
$textColor-placeholder-TextArea--warning: createThemeVar("Input:textColor-placeholder-#{$componentName}--warning");
$fontSize-placeholder-TextArea--warning: createThemeVar("Input:fontSize-placeholder-#{$componentName}--warning");
// Variables for success variant
$borderRadius-TextArea--success: createThemeVar("Input:borderRadius-#{$componentName}--success");
$borderColor-TextArea--success: createThemeVar("Input:borderColor-#{$componentName}--success");
$borderWidth-TextArea--success: createThemeVar("Input:borderWidth-#{$componentName}--success");
$borderStyle-TextArea--success: createThemeVar("Input:borderStyle-#{$componentName}--success");
$fontSize-TextArea--success: createThemeVar("Input:fontSize-#{$componentName}--success");
$backgroundColor-TextArea--success: createThemeVar("Input:backgroundColor-#{$componentName}--success");
$boxShadow-TextArea--success: createThemeVar("Input:boxShadow-#{$componentName}--success");
$textColor-TextArea--success: createThemeVar("Input:textColor-#{$componentName}--success");
$borderColor-TextArea--success--hover: createThemeVar("Input:borderColor-#{$componentName}--success--hover");
$backgroundColor-TextArea--success--hover: createThemeVar("Input:backgroundColor-#{$componentName}--success--hover");
$boxShadow-TextArea--success--hover: createThemeVar("Input:boxShadow-#{$componentName}--success--hover");
$textColor-TextArea--success--hover: createThemeVar("Input:textColor-#{$componentName}--success--hover");
$borderColor-TextArea--success--focus: createThemeVar("Input:borderColor-#{$componentName}--success--focus");
$backgroundColor-TextArea--success--focus: createThemeVar("Input:backgroundColor-#{$componentName}--success--focus");
$boxShadow-TextArea--success--focus: createThemeVar("Input:boxShadow-#{$componentName}--success--focus");
$textColor-TextArea--success--focus: createThemeVar("Input:textColor-#{$componentName}--success--focus");
$outlineWidth-TextArea--success--focus: createThemeVar("Input:outlineWidth-#{$componentName}--success--focus");
$outlineColor-TextArea--success--focus: createThemeVar("Input:outlineColor-#{$componentName}--success--focus");
$outlineStyle-TextArea--success--focus: createThemeVar("Input:outlineStyle-#{$componentName}--success--focus");
$outlineOffset-TextArea--success--focus: createThemeVar("Input:outlineOffset-#{$componentName}--success--focus");
$textColor-placeholder-TextArea--success: createThemeVar("Input:textColor-placeholder-#{$componentName}--success");
$fontSize-placeholder-TextArea--success: createThemeVar("Input:fontSize-placeholder-#{$componentName}--success");
// Variables for @layer section
$backgroundColor-TextArea--disabled: createThemeVar("Input:backgroundColor-#{$componentName}--disabled");
$textColor-TextArea--disabled: createThemeVar("Input:textColor-#{$componentName}--disabled");
$borderColor-TextArea--disabled: createThemeVar("Input:borderColor-#{$componentName}--disabled");
// --- CSS properties of a particular Textarea variant
@mixin variant($variantName) {
border-radius: createThemeVar("Input:borderRadius-#{$componentName}--#{$variantName}");
border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}");
border-width: createThemeVar("Input:borderWidth-#{$componentName}--#{$variantName}");
border-style: createThemeVar("Input:borderStyle-#{$componentName}--#{$variantName}");
font-size: createThemeVar("Input:fontSize-#{$componentName}--#{$variantName}");
background-color: createThemeVar("Input:backgroundColor-#{$componentName}--#{$variantName}");
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}");
color: createThemeVar("Input:textColor-#{$componentName}--#{$variantName}");
&:hover {
border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}--hover");
background-color: createThemeVar("Input:backgroundColor-#{$componentName}--#{$variantName}--hover"
);
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}--hover");
color: createThemeVar("Input:textColor-#{$componentName}--#{$variantName}--hover");
}
&:focus-within {
border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}--focus");
background-color: createThemeVar("Input:backgroundColor-#{$componentName}--#{$variantName}--focus"
);
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}--focus");
color: createThemeVar("Input:textColor-#{$componentName}--#{$variantName}--focus");
}
&:focus-visible {
outline-width: createThemeVar("Input:outlineWidth-#{$componentName}--#{$variantName}--focus");
outline-color: createThemeVar("Input:outlineColor-#{$componentName}--#{$variantName}--focus");
outline-style: createThemeVar("Input:outlineStyle-#{$componentName}--#{$variantName}--focus");
outline-offset: createThemeVar("Input:outlineOffset-#{$componentName}--#{$variantName}--focus");
}
&::placeholder {
color: createThemeVar("Input:textColor-placeholder-#{$componentName}--#{$variantName}");
font-size: createThemeVar("Input:fontSize-placeholder-#{$componentName}--#{$variantName}");
}
}
@layer components {
.textarea {
display: block;
width: 100%;
line-height: 1.5em;
outline: none;
resize: none;
border-style: solid;
border-width: 1px;
transition:
border 0.1s ease-in-out,
box-shadow 0.1s ease-in-out,
background 0.1s ease-in-out;
@include t.paddingVars($themeVars, $componentName);
@include variant("default");
&.error {
@include variant("error");
}
&.warning {
@include variant("warning");
}
&.valid {
@include variant("success");
}
&:is(:disabled) {
cursor: not-allowed;
background-color: $backgroundColor-TextArea--disabled;
color: $textColor-TextArea--disabled;
border-color: $borderColor-TextArea--disabled;
}
}
.resizeHorizontal {
resize: horizontal;
}
.resizeVertical {
resize: vertical;
}
.resizeBoth {
resize: both;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/FormItem/FormItem.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./FormItem.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { useMemo } from "react";
import {
defaultValidationMode,
formControlTypesMd,
validationModeMd,
validationSeverityValues,
type FormItemValidations,
} from "../Form/FormContext";
import {
createMetadata,
d,
dAutoFocus,
dComponent,
dEnabled,
dInitialValue,
dLabel,
dLabelPosition,
dLabelWidth,
dRequired,
} from "../metadata-helpers";
import { parseSeverity } from "./Validations";
import { CustomFormItem, FormItem, defaultProps } from "./FormItemNative";
import { MemoizedItem } from "../container-helpers";
const COMP = "FormItem";
// NOTE: We need to filter the "none" value out so that it doesn't show up in the docs.
const filteredValidationSeverityValues = validationSeverityValues.filter(
(value) => value !== "none",
);
export const FormItemMd = createMetadata({
status: "stable",
allowArbitraryProps: true,
description:
"`FormItem` wraps individual input controls within a `Form`, providing data " +
"binding, validation, labeling, and layout functionality. It connects form " +
"controls to the parent form's data model and handles validation feedback " +
"automatically." +
"\n\n" +
"> **Note:** `FormItem` must be used inside a `Form` component.",
props: {
bindTo: {
description:
"This property binds a particular input field to one of the attributes of the \`Form\` data. " +
"It names the property of the form's \`data\` data to get the input's initial value." +
"When the field is saved, its value will be stored in the \`data\` property with this name. " +
"If the property is not set, the input will be bound to an internal data field but not submitted.",
},
autoFocus: dAutoFocus(),
label: dLabel(),
labelPosition: dLabelPosition(),
labelWidth: dLabelWidth(COMP),
labelBreak: {
description:
`This boolean value indicates if the label can be split into multiple lines if it would ` +
`overflow the available label width.`,
type: "boolean",
defaultValue: defaultProps.labelBreak,
},
enabled: dEnabled(),
type: {
description:
`This property is used to determine the specific input control the FormItem will wrap ` +
`around. Note that the control names start with a lowercase letter and map to input ` +
`components found in XMLUI.`,
availableValues: formControlTypesMd,
defaultValue: defaultProps.type,
valueType: "string",
},
customValidationsDebounce: {
description: `This optional number prop determines the time interval between two runs of a custom validation.`,
type: "number",
defaultValue: defaultProps.customValidationsDebounce,
},
validationMode: {
description:
`This property sets what kind of validation mode or strategy to employ for a particular ` +
`input field.`,
availableValues: validationModeMd,
defaultValue: defaultValidationMode,
},
initialValue: dInitialValue(),
required: dRequired(),
requiredInvalidMessage: {
description:
"This optional string property is used to customize the message that is displayed if the " +
"field is not filled in. If not defined, the default message is used.",
valueType: "string",
},
minLength: {
description:
"This property sets the minimum length of the input value. If the value is not set, " +
"no minimum length check is done.",
valueType: "number",
},
maxLength: {
description:
"This property sets the maximum length of the input value. If the value is not set, " +
"no maximum length check is done.",
valueType: "number",
},
maxTextLength: {
description:
"The maximum length of the text in the input field. If this value is not set, " +
"no maximum length constraint is set for the input field.",
valueType: "number",
},
lengthInvalidMessage: {
description:
"This optional string property is used to customize the message that is displayed on a failed " +
"length check: [minLength](#minlength) or [maxLength](#maxlength).",
valueType: "string",
},
lengthInvalidSeverity: {
description: `This property sets the severity level of the length validation.`,
valueType: "string",
availableValues: filteredValidationSeverityValues,
defaultValue: "error",
},
minValue: {
description:
"The minimum value of the input. If this value is not specified, no minimum " +
"value check is done.",
valueType: "number",
},
maxValue: {
description:
"The maximum value of the input. If this value is not specified, no maximum " +
"value check is done.",
valueType: "number",
},
rangeInvalidMessage: {
description:
`This optional string property is used to customize the message that is displayed when ` +
`a value is out of range.`,
valueType: "string",
},
rangeInvalidSeverity: {
description: `This property sets the severity level of the value range validation.`,
valueType: "string",
availableValues: filteredValidationSeverityValues,
defaultValue: "error",
},
pattern: {
description:
"This value specifies a predefined regular expression to test the input value. " +
"If this value is not set, no pattern check is done.",
valueType: "string",
},
patternInvalidMessage: {
description:
`This optional string property is used to customize the message that is displayed on a ` +
`failed pattern test.`,
valueType: "string",
},
patternInvalidSeverity: {
description: `This property sets the severity level of the pattern validation.`,
valueType: "string",
availableValues: filteredValidationSeverityValues,
defaultValue: "error",
},
regex: {
description:
"This value specifies a custom regular expression to test the input value. If this value " +
"is not set, no regular expression pattern check is done.",
valueType: "string",
},
regexInvalidMessage: {
description:
`This optional string property is used to customize the message that is displayed on a ` +
`failed regular expression test.`,
valueType: "string",
},
regexInvalidSeverity: {
description: `This property sets the severity level of regular expression validation.`,
valueType: "string",
availableValues: filteredValidationSeverityValues,
defaultValue: "error",
},
inputTemplate: dComponent("This property is used to define a custom input template."),
gap: {
description: "This property defines the gap between the adornments and the input area.",
valueType: "string",
defaultValue: defaultProps.gap,
},
noSubmit: {
description:
"When set to `true`, the field will not be included in the form's submitted data. " +
"This is useful for fields that should be present in the form but not submitted, " +
"similar to hidden fields. If multiple FormItems reference the same `bindTo` value " +
"and any of them has `noSubmit` set to `true`, the field will NOT be submitted.",
type: "boolean",
defaultValue: defaultProps.noSubmit,
},
},
events: {
validate: d(`This event is used to define a custom validation function.`),
},
apis: {
addItem: {
description:
"This method adds a new item to the list held by the FormItem. The function has a single " +
"parameter, the data to add to the FormItem. The new item is appended to the end of the list.",
signature: "addItem(data: any): void",
parameters: {
data: "The data to add to the FormItem's list.",
},
},
removeItem: {
description:
"Removes the item specified by its index from the list held by the FormItem. " +
"The function has a single argument, the index to remove.",
signature: "removeItem(index: number): void",
parameters: {
index: "The index of the item to remove from the FormItem's list.",
},
},
},
contextVars: {
$value: d("Current value of the FormItem, accessible in expressions and code snippets"),
$setValue: d("Function to set the FormItem's value programmatically"),
$validationResult: d("Current validation state and error messages for this field"),
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
"textColor-FormItemLabel": "$textColor-primary",
"fontSize-FormItemLabel": "$fontSize-sm",
"fontWeight-FormItemLabel": "$fontWeight-medium",
"fontStyle-FormItemLabel": "normal",
"textTransform-FormItemLabel": "none",
"textColor-FormItemLabel-requiredMark": "$color-danger-400",
},
});
export const formItemComponentRenderer = createComponentRenderer(
COMP,
FormItemMd,
({
node,
renderChild,
extractValue,
className,
layoutContext,
lookupEventHandler,
lookupAction,
registerComponentApi,
}) => {
const {
bindTo,
autoFocus,
label,
labelPosition,
labelWidth,
labelBreak,
enabled,
required,
type,
requiredInvalidMessage,
minLength,
maxLength,
lengthInvalidMessage,
lengthInvalidSeverity,
minValue,
maxValue,
rangeInvalidMessage,
rangeInvalidSeverity,
pattern,
patternInvalidMessage,
patternInvalidSeverity,
regex,
regexInvalidMessage,
regexInvalidSeverity,
customValidationsDebounce,
validationMode,
maxTextLength,
gap,
noSubmit,
...rest
} = node.props;
const resolvedRestProps = extractValue(rest);
const formItemType = extractValue.asOptionalString(type);
const isCustomFormItem =
(formItemType === undefined || formItemType === "custom") && !!node.children;
const inputTemplate = node.children || node.props?.inputTemplate;
return (
<FormItem
// --- validation props
required={extractValue.asOptionalBoolean(required)}
requiredInvalidMessage={extractValue.asOptionalString(requiredInvalidMessage)}
minLength={extractValue.asOptionalNumber(minLength)}
maxLength={extractValue.asOptionalNumber(maxLength)}
lengthInvalidMessage={extractValue.asOptionalString(lengthInvalidMessage)}
lengthInvalidSeverity={parseSeverity(extractValue.asOptionalString(lengthInvalidSeverity))}
minValue={extractValue.asOptionalNumber(minValue)}
maxValue={extractValue.asOptionalNumber(maxValue)}
rangeInvalidMessage={extractValue.asOptionalString(rangeInvalidMessage)}
rangeInvalidSeverity={parseSeverity(extractValue.asOptionalString(rangeInvalidSeverity))}
pattern={extractValue.asOptionalString(pattern)}
patternInvalidMessage={extractValue.asOptionalString(patternInvalidMessage)}
patternInvalidSeverity={parseSeverity(
extractValue.asOptionalString(patternInvalidSeverity),
)}
regex={extractValue.asOptionalString(regex)}
regexInvalidMessage={extractValue.asOptionalString(regexInvalidMessage)}
regexInvalidSeverity={parseSeverity(extractValue.asOptionalString(regexInvalidSeverity))}
// ----
className={className}
layoutContext={layoutContext}
labelBreak={extractValue.asOptionalBoolean(labelBreak)}
labelWidth={extractValue.asOptionalString(labelWidth)}
bindTo={extractValue.asString(bindTo)}
autoFocus={extractValue.asOptionalBoolean(autoFocus)}
enabled={extractValue.asOptionalBoolean(enabled)}
label={extractValue.asOptionalString(label)}
labelPosition={extractValue.asOptionalString(labelPosition)}
type={isCustomFormItem ? "custom" : formItemType}
onValidate={lookupEventHandler("validate")}
customValidationsDebounce={extractValue.asOptionalNumber(customValidationsDebounce)}
validationMode={extractValue.asOptionalString(validationMode)}
registerComponentApi={registerComponentApi}
maxTextLength={extractValue(maxTextLength)}
itemIndex={extractValue("{$itemIndex}")}
initialValue={extractValue(node.props.initialValue)}
noSubmit={extractValue.asOptionalBoolean(noSubmit)}
inputRenderer={
inputTemplate
? (contextVars) => (
<MemoizedItem
contextVars={contextVars}
node={inputTemplate}
renderChild={renderChild}
layoutContext={layoutContext}
/>
)
: undefined
}
gap={extractValue.asOptionalString(gap)}
{...resolvedRestProps}
>
{isCustomFormItem ? (
<CustomFormItem
renderChild={renderChild}
node={node as any}
bindTo={extractValue.asString(bindTo)}
/>
) : (
renderChild(node.children, {
type: formItemType,
})
)}
</FormItem>
);
},
);
```
--------------------------------------------------------------------------------
/docs/public/resources/images/rendering-engine/AppEngine-flow.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="452px" height="297px" viewBox="-0.5 -0.5 452 297" content="<mxfile><diagram id="CfIX5hAGBzROQtZs-r1b" name="Page-1">5Zldb5swFIZ/TW4nbIeQXOar26ROqlZVay+d4IA1g5FxmmS/fgZMMJg0tKXp1uYiso8/4DzvsTmGAZpH+68CJ+EP7hM2gI6/H6DFAEJ36Kj/zHAoDGjiFYZAUL8wgcpwS/8QbdTjgi31SVrrKDlnkiZ145rHMVnLmg0LwXf1bhvO6ldNcEAsw+0aM9v6i/oy1FYwmlQN3wgNQn3pMdT+RbjsrD1JQ+zznWFCywGaC85lUYr2c8IydiWXYtzVidbjjQkSyy4DUDHgEbOt9m2aJIyusaQ8HsARU7PMVkKVgqzkkw2NadGW3748lEyUJ0lW9Pl6G+VXn+1CKsltgteZfaciQdlCGTFVA9m0fBv7xL9elQZ9L0RIsj/pDzhSUtFFeESkOKguegB0NFgdWaAEvTN0Km2hKZG2YR0awXHqip4qaIDtMD0LCvFV3OhqzGNSB0D2VN4b5QdVdr64urbIXHLKyqGsxOqm7s2KMSqrVsPyWjXOn2aRr6o8IXFhuaKZL2W7XmdA4Z2lEgtpGgrXMn+eVka5z7dirXsN9eLEIiC6l9uunyBMxdxjffbXiDF5oRiVAA8m/1YxNjw+QhrVIesL1CFbVNuoN2TKbcYcvQmBLiQEQC9VorYsYNd1US2FritD1W6IoMozIk4o20WZ16rv4zQkfm0v7EFmcGLD7F9ntxedvYvqXGP+HqL3pzO8kM7DtpRhGQdUed8MAFE84jWLM/nARlGbc8ZFPhZtHIwcrGUx7E7+y9EK/psYLbOFV7S8QSIBRx0TCa+HRGJsIQYWWjVCpbvkPFacJkUOvKH7TAorzBvcwQoDAm3um/zXxt1xRsvpVU/cvQZ3YHNHLdhRD9jLSxnc4Wfhjobn4/3NuAOL+12qtuhTR4xtxKZrmVGYZT6r0wq7xivCbnhanE3QYsWl5JHRYcpokDVI3pCJbyVTW9f8eFRse/z3ABiABmCnG+BRH4ChBfj2kEoSfWzECF0Q8chC3JL3fsy9A7iN0B5fcO94+tDNhQx5wGPMlpW1/djnmee+sulsEgprWSg4k4P+1xnmsD0IOieY+VDlCj4YHRJOY5kaM99kBiMfmDTW9KjxQqvZHz3ZXxWKO6iC6+hKt3izc7PhZ1nncOjW2XoXXOcTi3vLefNjckfj98vNoJ0TW9gDdcxLTvqpX8LjVdndea7/w8aahq7tf+tZbNIDANfy/6faYIlQYQOdu+8WjGcdeTsFh/FhoEbnEt7bWc0/7DB4vsOqWn1sKR4H1RcrtPwL</diagram></mxfile>"><defs/><g><path d="M 101 0 L 221 0 L 221 68 Q 191 46.4 161 68 Q 131 89.6 101 68 L 101 12 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 28px; margin-left: 102px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Application<br />definition</div></div></div></foreignObject><text x="161" y="32" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Application...</text></switch></g><path d="M 221 175 L 328.76 175" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 316.88 181.5 L 329.88 175 L 316.88 168.5" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 161 137.76 L 161 80" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 154.5 125.88 L 161 138.88 L 167.5 125.88" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 99.11 156.3 L 26 110" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/><path d="M 85.6 155.44 L 100.06 156.9 L 92.55 144.45" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 99.11 193.7 L 26 240" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/><path d="M 92.55 205.55 L 100.06 193.1 L 85.6 194.56" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="101" y="140" width="120" height="70" fill="#f0a30a" stroke="#bd7000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 175px; margin-left: 102px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">AppEngine</div></div></div></foreignObject><text x="161" y="179" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">AppEngine</text></switch></g><ellipse cx="186" cy="105" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 105px; margin-left: 172px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">1</div></div></div></foreignObject><text x="186" y="110" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">1</text></switch></g><ellipse cx="256" cy="155" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 155px; margin-left: 242px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2</div></div></div></foreignObject><text x="256" y="160" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">2</text></switch></g><ellipse cx="26" cy="87.5" rx="7.5" ry="7.5" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 26 95 L 26 120 M 26 100 L 11 100 M 26 100 L 41 100 M 26 120 L 11 140 M 26 120 L 41 140" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 147px; margin-left: 26px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">User</div></div></div></foreignObject><text x="26" y="163" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="16px" text-anchor="middle">User</text></switch></g><ellipse cx="26" cy="217.5" rx="7.5" ry="7.5" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 26 225 L 26 250 M 26 230 L 11 230 M 26 230 L 41 230 M 26 250 L 11 270 M 26 250 L 41 270" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 277px; margin-left: 26px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">System</div></div></div></foreignObject><text x="26" y="293" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="16px" text-anchor="middle">Syst...</text></switch></g><ellipse cx="66" cy="175" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 175px; margin-left: 52px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">3</div></div></div></foreignObject><text x="66" y="180" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">3</text></switch></g><path d="M 191 212.24 L 191 230 Q 191 240 181 240 L 141 240 Q 131 240 131 230 L 131 210" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 197.5 224.12 L 191 211.12 L 184.5 224.12" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><ellipse cx="161" cy="265" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 265px; margin-left: 147px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">4</div></div></div></foreignObject><text x="161" y="270" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">4</text></switch></g><ellipse cx="296" cy="155" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 155px; margin-left: 282px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">5</div></div></div></foreignObject><text x="296" y="160" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">5</text></switch></g><rect x="331" y="130" width="120" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 175px; margin-left: 332px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Rendered UI</div></div></div></foreignObject><text x="391" y="179" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Rendered UI</text></switch></g><rect x="331" y="130" width="120" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
```
--------------------------------------------------------------------------------
/docs/public/resources/images/reviewers-guide/AppEngine-flow.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="452px" height="297px" viewBox="-0.5 -0.5 452 297" content="<mxfile><diagram id="CfIX5hAGBzROQtZs-r1b" name="Page-1">5Zldb5swFIZ/TW4nbIeQXOar26ROqlZVay+d4IA1g5FxmmS/fgZMMJg0tKXp1uYiso8/4DzvsTmGAZpH+68CJ+EP7hM2gI6/H6DFAEJ36Kj/zHAoDGjiFYZAUL8wgcpwS/8QbdTjgi31SVrrKDlnkiZ145rHMVnLmg0LwXf1bhvO6ldNcEAsw+0aM9v6i/oy1FYwmlQN3wgNQn3pMdT+RbjsrD1JQ+zznWFCywGaC85lUYr2c8IydiWXYtzVidbjjQkSyy4DUDHgEbOt9m2aJIyusaQ8HsARU7PMVkKVgqzkkw2NadGW3748lEyUJ0lW9Pl6G+VXn+1CKsltgteZfaciQdlCGTFVA9m0fBv7xL9elQZ9L0RIsj/pDzhSUtFFeESkOKguegB0NFgdWaAEvTN0Km2hKZG2YR0awXHqip4qaIDtMD0LCvFV3OhqzGNSB0D2VN4b5QdVdr64urbIXHLKyqGsxOqm7s2KMSqrVsPyWjXOn2aRr6o8IXFhuaKZL2W7XmdA4Z2lEgtpGgrXMn+eVka5z7dirXsN9eLEIiC6l9uunyBMxdxjffbXiDF5oRiVAA8m/1YxNjw+QhrVIesL1CFbVNuoN2TKbcYcvQmBLiQEQC9VorYsYNd1US2FritD1W6IoMozIk4o20WZ16rv4zQkfm0v7EFmcGLD7F9ntxedvYvqXGP+HqL3pzO8kM7DtpRhGQdUed8MAFE84jWLM/nARlGbc8ZFPhZtHIwcrGUx7E7+y9EK/psYLbOFV7S8QSIBRx0TCa+HRGJsIQYWWjVCpbvkPFacJkUOvKH7TAorzBvcwQoDAm3um/zXxt1xRsvpVU/cvQZ3YHNHLdhRD9jLSxnc4Wfhjobn4/3NuAOL+12qtuhTR4xtxKZrmVGYZT6r0wq7xivCbnhanE3QYsWl5JHRYcpokDVI3pCJbyVTW9f8eFRse/z3ABiABmCnG+BRH4ChBfj2kEoSfWzECF0Q8chC3JL3fsy9A7iN0B5fcO94+tDNhQx5wGPMlpW1/djnmee+sulsEgprWSg4k4P+1xnmsD0IOieY+VDlCj4YHRJOY5kaM99kBiMfmDTW9KjxQqvZHz3ZXxWKO6iC6+hKt3izc7PhZ1nncOjW2XoXXOcTi3vLefNjckfj98vNoJ0TW9gDdcxLTvqpX8LjVdndea7/w8aahq7tf+tZbNIDANfy/6faYIlQYQOdu+8WjGcdeTsFh/FhoEbnEt7bWc0/7DB4vsOqWn1sKR4H1RcrtPwL</diagram></mxfile>"><defs/><g><path d="M 101 0 L 221 0 L 221 68 Q 191 46.4 161 68 Q 131 89.6 101 68 L 101 12 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 28px; margin-left: 102px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Application<br />definition</div></div></div></foreignObject><text x="161" y="32" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Application...</text></switch></g><path d="M 221 175 L 328.76 175" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 316.88 181.5 L 329.88 175 L 316.88 168.5" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 161 137.76 L 161 80" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 154.5 125.88 L 161 138.88 L 167.5 125.88" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 99.11 156.3 L 26 110" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/><path d="M 85.6 155.44 L 100.06 156.9 L 92.55 144.45" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 99.11 193.7 L 26 240" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/><path d="M 92.55 205.55 L 100.06 193.1 L 85.6 194.56" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="101" y="140" width="120" height="70" fill="#f0a30a" stroke="#bd7000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 175px; margin-left: 102px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">AppEngine</div></div></div></foreignObject><text x="161" y="179" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">AppEngine</text></switch></g><ellipse cx="186" cy="105" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 105px; margin-left: 172px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">1</div></div></div></foreignObject><text x="186" y="110" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">1</text></switch></g><ellipse cx="256" cy="155" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 155px; margin-left: 242px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2</div></div></div></foreignObject><text x="256" y="160" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">2</text></switch></g><ellipse cx="26" cy="87.5" rx="7.5" ry="7.5" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 26 95 L 26 120 M 26 100 L 11 100 M 26 100 L 41 100 M 26 120 L 11 140 M 26 120 L 41 140" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 147px; margin-left: 26px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">User</div></div></div></foreignObject><text x="26" y="163" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="16px" text-anchor="middle">User</text></switch></g><ellipse cx="26" cy="217.5" rx="7.5" ry="7.5" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 26 225 L 26 250 M 26 230 L 11 230 M 26 230 L 41 230 M 26 250 L 11 270 M 26 250 L 41 270" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 277px; margin-left: 26px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">System</div></div></div></foreignObject><text x="26" y="293" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="16px" text-anchor="middle">Syst...</text></switch></g><ellipse cx="66" cy="175" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 175px; margin-left: 52px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">3</div></div></div></foreignObject><text x="66" y="180" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">3</text></switch></g><path d="M 191 212.24 L 191 230 Q 191 240 181 240 L 141 240 Q 131 240 131 230 L 131 210" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 197.5 224.12 L 191 211.12 L 184.5 224.12" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><ellipse cx="161" cy="265" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 265px; margin-left: 147px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">4</div></div></div></foreignObject><text x="161" y="270" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">4</text></switch></g><ellipse cx="296" cy="155" rx="15" ry="15" fill="#1ba1e2" stroke="#006eaf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 155px; margin-left: 282px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">5</div></div></div></foreignObject><text x="296" y="160" fill="#ffffff" font-family="Helvetica" font-size="16px" text-anchor="middle">5</text></switch></g><rect x="331" y="130" width="120" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 175px; margin-left: 332px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Rendered UI</div></div></div></foreignObject><text x="391" y="179" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Rendered UI</text></switch></g><rect x="331" y="130" width="120" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/Heading.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties } from "react";
import styles from "./Heading.module.scss";
import { type ComponentDef } from "../../abstractions/ComponentDefs";
import type { RenderChildFn } from "../../abstractions/RendererDefs";
import type { ValueExtractor } from "../../abstractions/RendererDefs";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { Heading, defaultProps } from "./HeadingNative";
import { resolveAndCleanProps } from "../../components-core/utils/extractParam";
import type { HeadingLevel } from "./abstractions";
import { d, createMetadata } from "../metadata-helpers";
const COMP = "Heading";
/**
* Normalizes the level value to a valid HeadingLevel (h1-h6).
* Accepts: 1-6, "1"-"6", "h1"-"h6", "H1"-"H6"
* Returns "h1" for any invalid value.
*/
function normalizeHeadingLevel(value: any): HeadingLevel {
if (value === null || value === undefined) {
return "h1";
}
// Handle numeric values (1-6)
if (typeof value === "number") {
if (value >= 1 && value <= 6) {
return `h${value}` as HeadingLevel;
}
return "h1";
}
// Handle string values
if (typeof value === "string") {
const trimmed = value.trim().toLowerCase();
// Handle "h1"-"h6" (case insensitive)
if (/^h[1-6]$/.test(trimmed)) {
return trimmed as HeadingLevel;
}
// Handle "1"-"6"
if (/^[1-6]$/.test(trimmed)) {
return `h${trimmed}` as HeadingLevel;
}
}
// Default fallback
return "h1";
}
const VALUE_DESC = d(
`This property determines the text displayed in the heading. \`${COMP}\` also accepts nested ` +
`text instead of specifying the \`value\`. If both \`value\` and a nested text are used, ` +
`the \`value\` will be displayed.`,
);
const MAX_LINES_DESC = d(
"This optional property determines the maximum number of lines the component can wrap to. " +
"If there is not enough space for all of the text, the component wraps the text up to as many " +
"lines as specified. If the value is not specified, there is no limit on the number of " +
"displayed lines.",
);
const ELLIPSES_DESC = {
description:
`This property indicates whether ellipses should be displayed (\`true\`) when the heading ` +
`text is cropped or not (\`false\`).`,
type: "boolean",
defaultValue: defaultProps.ellipses,
};
const PRESERVE_DESC = d(
`This property indicates whether linebreaks should be preserved when ` + `displaying text.`,
undefined,
"boolean",
defaultProps.preserveLinebreaks,
);
const LEVEL_DESC = (level: number) => `Represents a heading level ${level} text`;
const OMIT_FROM_TOC_DESC = {
description: "If true, this heading will be excluded from the table of contents.",
type: "boolean",
defaultValue: defaultProps.omitFromToc,
};
const SHOW_ANCHOR_DESC = {
description:
"This property indicates whether an anchor link should be displayed next to the heading. " +
"If set to `true`, an anchor link will be displayed on hover next to the heading.",
type: "boolean",
defaultValue: defaultProps.showAnchor,
};
const APIS_DESC = {
scrollIntoView: {
signature: "scrollIntoView()",
description: "Scrolls the heading into view.",
},
hasOverflow: {
signature: "hasOverflow()",
description: "Returns true when the displayed text overflows the bounds of this heading component.",
},
};
export const HeadingMd = createMetadata({
status: "stable",
description:
"`Heading` displays hierarchical text headings with semantic importance levels " +
"from H1 to H6, following HTML heading standards. It provides text overflow " +
"handling, anchor link generation, and integrates with " +
"[TableOfContents](/components/TableOfContents).",
props: {
value: VALUE_DESC,
level: {
description:
"This property sets the visual significance (level) of the heading. " +
"Accepts multiple formats: `h1`-`h6`, `H1`-`H6`, or `1`-`6`." +
"Invalid values default to `h1`.",
availableValues: [
"h1", "h2", "h3", "h4", "h5", "h6",
"H1", "H2", "H3", "H4", "H5", "H6",
"1", "2", "3", "4", "5", "6",
],
defaultValue: defaultProps.level,
},
maxLines: MAX_LINES_DESC,
ellipses: ELLIPSES_DESC,
preserveLinebreaks: PRESERVE_DESC,
omitFromToc: OMIT_FROM_TOC_DESC,
showAnchor: SHOW_ANCHOR_DESC,
},
apis: APIS_DESC,
themeVars: parseScssVar(styles.themeVars),
limitThemeVarsToComponent: true,
defaultThemeVars: {
[`fontFamily-${COMP}`]: "$fontFamily",
[`textColor-${COMP}`]: "inherit",
[`fontWeight-${COMP}`]: "$fontWeight-bold",
[`letterSpacing-${COMP} `]: "0",
[`color-anchor-${COMP} `]: "$color-surface-400",
[`gap-anchor-${COMP} `]: "$space-2",
[`textDecorationLine-anchor-${COMP} `]: "underline",
light: {
// --- No light-specific theme vars
},
dark: {
// --- No dark-specific theme vars
},
},
});
const H1 = "H1";
export const H1Md = createMetadata({
status: "stable",
description: LEVEL_DESC(1),
specializedFrom: COMP,
props: {
value: VALUE_DESC,
maxLines: MAX_LINES_DESC,
ellipses: ELLIPSES_DESC,
preserveLinebreaks: PRESERVE_DESC,
omitFromToc: OMIT_FROM_TOC_DESC,
showAnchor: SHOW_ANCHOR_DESC,
},
apis: APIS_DESC,
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`fontSize-${H1}`]: "$fontSize-2xl",
[`marginTop-${H1}`]: "0",
[`marginBottom-${H1}`]: "0",
[`fontSize-${H1}-markdown`]: "$fontSize-2xl",
[`marginTop-${H1}-markdown`]: "0",
[`marginBottom-${H1}-markdown`]: "$space-6",
light: {
// --- No light-specific theme vars
},
dark: {
// --- No dark-specific theme vars
},
},
});
const H2 = "H2";
export const H2Md = createMetadata({
status: "stable",
description: LEVEL_DESC(2),
specializedFrom: COMP,
props: {
value: VALUE_DESC,
maxLines: MAX_LINES_DESC,
ellipses: ELLIPSES_DESC,
preserveLinebreaks: PRESERVE_DESC,
omitFromToc: OMIT_FROM_TOC_DESC,
showAnchor: SHOW_ANCHOR_DESC,
},
apis: APIS_DESC,
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`fontSize-${H2}`]: "$fontSize-xl",
[`marginTop-${H2}`]: "0",
[`marginBottom-${H2}`]: "0",
[`fontSize-${H2}-markdown`]: "$fontSize-xl",
[`marginTop-${H2}-markdown`]: "$space-10",
[`marginBottom-${H2}-markdown`]: "$space-3",
light: {
// --- No light-specific theme vars
},
dark: {
// --- No dark-specific theme vars
},
},
});
const H3 = "H3";
export const H3Md = createMetadata({
status: "stable",
description: LEVEL_DESC(3),
specializedFrom: COMP,
props: {
value: VALUE_DESC,
maxLines: MAX_LINES_DESC,
ellipses: ELLIPSES_DESC,
preserveLinebreaks: PRESERVE_DESC,
omitFromToc: OMIT_FROM_TOC_DESC,
showAnchor: SHOW_ANCHOR_DESC,
},
apis: APIS_DESC,
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`fontSize-${H3}`]: "$fontSize-lg",
[`marginTop-${H3}`]: "0",
[`marginBottom-${H3}`]: "0",
[`fontSize-${H3}-markdown`]: "$fontSize-lg",
[`marginTop-${H3}-markdown`]: "$space-6",
[`marginBottom-${H3}-markdown`]: "$space-2",
light: {
// --- No light-specific theme vars
},
dark: {
// --- No dark-specific theme vars
},
},
});
const H4 = "H4";
export const H4Md = createMetadata({
status: "stable",
description: LEVEL_DESC(4),
specializedFrom: COMP,
props: {
value: VALUE_DESC,
maxLines: MAX_LINES_DESC,
omitFromToc: OMIT_FROM_TOC_DESC,
ellipses: ELLIPSES_DESC,
preserveLinebreaks: PRESERVE_DESC,
showAnchor: SHOW_ANCHOR_DESC,
},
apis: APIS_DESC,
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`fontSize-${H4}`]: "$fontSize-base",
[`marginTop-${H4}`]: "0",
[`marginBottom-${H4}`]: "0",
[`fontSize-${H4}-markdown`]: "$fontSize-base",
[`marginTop-${H4}-markdown`]: "$space-5",
[`marginBottom-${H4}-markdown`]: "$space-1",
light: {
// --- No light-specific theme vars
},
dark: {
// --- No dark-specific theme vars
},
},
});
const H5 = "H5";
export const H5Md = createMetadata({
status: "stable",
description: LEVEL_DESC(5),
specializedFrom: COMP,
props: {
value: VALUE_DESC,
maxLines: MAX_LINES_DESC,
omitFromToc: OMIT_FROM_TOC_DESC,
ellipses: ELLIPSES_DESC,
preserveLinebreaks: PRESERVE_DESC,
showAnchor: SHOW_ANCHOR_DESC,
},
apis: APIS_DESC,
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`fontSize-${H5}`]: "$fontSize-sm",
[`marginTop-${H5}`]: "0",
[`marginBottom-${H5}`]: "0",
[`fontSize-${H5}-markdown`]: "$fontSize-sm",
[`marginTop-${H5}-markdown`]: "0",
[`marginBottom-${H5}-markdown`]: "$space-0",
light: {
// --- No light-specific theme vars
},
dark: {
// --- No dark-specific theme vars
},
},
});
const H6 = "H6";
export const H6Md = createMetadata({
status: "stable",
description: LEVEL_DESC(6),
specializedFrom: COMP,
props: {
value: VALUE_DESC,
maxLines: MAX_LINES_DESC,
omitFromToc: OMIT_FROM_TOC_DESC,
ellipses: ELLIPSES_DESC,
preserveLinebreaks: PRESERVE_DESC,
showAnchor: SHOW_ANCHOR_DESC,
},
apis: APIS_DESC,
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`fontSize-${H6}`]: "$fontSize-xs",
[`marginTop-${H6}`]: "0",
[`marginBottom-${H6}`]: "0",
[`fontSize-${H6}-markdown`]: "$fontSize-xs",
[`marginTop-${H6}-markdown`]: "0",
[`marginBottom-${H6}-markdown`]: "$space-0",
light: {
// --- No light-specific theme vars
},
dark: {
// --- No dark-specific theme vars
},
},
});
type HeadingComponentDef = ComponentDef<typeof HeadingMd>;
type RenderHeadingProps = {
node: HeadingComponentDef;
extractValue: ValueExtractor;
className?: string;
level: string;
renderChild: RenderChildFn;
registerComponentApi?: (api: any) => void;
};
function renderHeading({
node,
extractValue,
className,
level,
renderChild,
registerComponentApi,
}: RenderHeadingProps) {
const { maxLines, preserveLinebreaks, ellipses, showAnchor, ...restProps } = node.props;
delete restProps.level; // Remove level from restProps as it is handled separately
const showAnchorValue = extractValue.asOptionalBoolean(node.props?.showAnchor);
// Extract and normalize the level value
const extractedLevel = extractValue(level);
const normalizedLevel = normalizeHeadingLevel(extractedLevel);
return (
<Heading
uid={node.uid}
level={normalizedLevel}
maxLines={extractValue.asOptionalNumber(maxLines)}
preserveLinebreaks={extractValue.asOptionalBoolean(preserveLinebreaks, false)}
ellipses={extractValue.asOptionalBoolean(ellipses, true)}
showAnchor={showAnchorValue}
className={className}
omitFromToc={extractValue.asOptionalBoolean(node.props?.omitFromToc)}
registerComponentApi={registerComponentApi}
{...resolveAndCleanProps(restProps, extractValue)}
>
{extractValue.asDisplayText(node.props.value) || renderChild(node.children)}
</Heading>
);
}
export const headingComponentRenderer = createComponentRenderer(
COMP,
HeadingMd,
({ node, extractValue, className, renderChild, registerComponentApi }) => {
return renderHeading({
node: node as HeadingComponentDef,
extractValue,
className,
level: node.props.level,
renderChild,
registerComponentApi,
});
},
);
export const h1ComponentRenderer = createComponentRenderer(
H1,
H1Md,
({ node, extractValue, className, renderChild, registerComponentApi }) => {
return renderHeading({
node,
extractValue,
className,
level: "h1",
renderChild,
registerComponentApi,
} as any);
},
);
export const h2ComponentRenderer = createComponentRenderer(
H2,
H2Md,
({ node, extractValue, className, renderChild, registerComponentApi }) => {
return renderHeading({
node,
extractValue,
className,
level: "h2",
renderChild,
registerComponentApi,
} as any);
},
);
export const h3ComponentRenderer = createComponentRenderer(
H3,
H3Md,
({ node, extractValue, className, renderChild, registerComponentApi }) => {
return renderHeading({
node,
extractValue,
className,
level: "h3",
renderChild,
registerComponentApi,
} as any);
},
);
export const h4ComponentRenderer = createComponentRenderer(
H4,
H4Md,
({ node, extractValue, className, renderChild, registerComponentApi }) => {
return renderHeading({
node,
extractValue,
className,
level: "h4",
renderChild,
registerComponentApi,
} as any);
},
);
export const h5ComponentRenderer = createComponentRenderer(
H5,
H5Md,
({ node, extractValue, className, renderChild, registerComponentApi }) => {
return renderHeading({
node,
extractValue,
className,
level: "h5",
renderChild,
registerComponentApi,
} as any);
},
);
export const h6ComponentRenderer = createComponentRenderer(
H6,
H6Md,
({ node, extractValue, className, renderChild, registerComponentApi }) => {
return renderHeading({
node,
extractValue,
className,
level: "h6",
renderChild,
registerComponentApi,
} as any);
},
);
```
