This is page 26 of 146. Use http://codebase.md/xmlui-org/xmlui/main.tsx?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-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
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.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
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ └── Separator.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
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── 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-modal-dialog-onclose.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
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.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
│ │ ├── staticwebapp.config.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
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── Separator.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
│ │ │ └── test-padding.xmlui
│ │ ├── 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
│ │ │ ├── ResponsiveBarItem.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
│ └── 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/public/pages/context-variables.md:
--------------------------------------------------------------------------------
```markdown
# Context variables
These are the key context variables available in XMLUI components.
| Variable | Scope/Context | What it Represents |
| ------------------- | ------------------- | --------------------------------------------- |
| `myComponentId` | General | Reference to the component instance |
| `var.myVar` | General | A scoped variable |
| `$item` | Iterators | The current item in a list/array |
| `$itemIndex` | Iterators | The current index in a list/array |
| `$group` | List | Groups defined by `groupBy` |
| `$param` | Event handlers | The event's payload (e.g., form data) |
| `$data` | Forms | Consolidated data from FormItems |
| `$validationResult` | Forms | Result of latest validation |
| `$setValue` | FormItem | Function to set the value |
| `$value` | FormItem | The current value |
| `$pathname` | Page | Gets the path part of the route |
| `$routeParams` | Page | Capture values from route placeholders |
| `$queryParams` | Page | Capture values from route's search parameters |
| `$linkInfo` | Page | NavLink context including previous and next |
## General
### `myComponentId`
- **Scope:** Any component with an `id` attribute.
- **What it is:** Reference to the component instance, allowing access to its properties and methods.
- **Example:**
```xmlui
<TextBox id="myTextBox" />
<Button onClick="myTextBox.setValue('Hello!')" label="Set Value" />
<Text value="{myTextBox.value}" />
```
### `var.myVar`
- **Scope:** Declared in markup with `var.` prefix; available in the declaring component and its children.
- **What it is:** A scoped variable.
- **Example:**
```xmlui
<App var.count="{0}">
<Button onClick="count++" label="Increment" />
<Text>Count: {count}</Text>
</App>
```
## Iterators
### `$item`
- **Scope:** Available inside components that iterate over lists, such as `<Table>`, `<Items>`, or inside a FormItem of type "items".
- **What it is:** The current item in the iteration (e.g., a row in a table, an option in a select, or a line item in an invoice).
- **Usage:**
- Access properties of the current item: `$item.name`, `$item.price`
- **Example:**
```xmlui
<Table data="{clients}">
<Column bindTo="Name">
<Text>{$item.Name}</Text>
</Column>
</Table>
```
### `$itemIndex`
- **Scope:** Inside iterators (e.g., `<Items>`, `<Table>`, or FormItem of type "items").
- **What it is:** The current index in the array.
- **Example:**
```xmlui
<Items data="{products}">
<Text>Index: {$itemIndex}, Name: {$item.name}</Text>
</Items>
```
## Event handlers
### `$param`
- **Scope:** Available in event handlers, especially in `<event name="submit">` or API calls.
- **What it is:** The data passed to the event or API call, often the form data at the time of submission.
## List
### `groupBy`
- **Scope:** Available in the `groupHeaderTemplate` of a `List`
- **What it is:** An object that contains items grouped by `$group.key`
## Forms
### `$data`
- **Scope:** Available inside a `<Form>` and its children.
- **What it is:** The current state of the form's data object (all fields/values).
- **Usage:**
- Read or display the entire form's data: `{JSON.stringify($data)}`
- **Example:**
```xmlui
<Text value="{JSON.stringify($data)}" />
```
### `$validationResult`
- **Scope:** Inside a `FormItem`.
- **What it is:** The result of the latest validation for the field.
- **Example:**
```xmlui
<FormItem bindTo="email">
<Text value="{JSON.stringify($validationResult)}" />
</FormItem>
```
### `$setValue`
- **Scope:** Inside a `FormItem`.
- **What it is:** A function to set the value of the field.
- **Example:**
```xmlui
<Button onClick="$setValue('new value')" label="Set Value" />
```
### `$value`
- **Scope:** Inside a `FormItem`.
- **What it is:** The current value of the field.
- **Example:**
```xmlui
<FormItem bindTo="name">
<Text value="{$value}" />
</FormItem>
```
## Pages
### `$routeParams`
```xmlui
<App layout="vertical">
<NavPanel>
<NavLink to="/">Home</NavLink>
<NavLink to="/account/Cameron">Cameron</NavLink>
<NavLink to="/account/Joe">Joe</NavLink>
<NavLink to="/account/Kathy">Kathy</NavLink>
</NavPanel>
<Pages>
<Page url="/">
Home
</Page>
<Page url="/account/:id">
Account: {$routeParams.id}
</Page>
</Pages>
</App>
```
### `$linkInfo`
```xmlui
<HStack verticalAlignment="center" gap="$space-2">
<Link when="{$linkInfo.prevLink}" to="{$linkInfo.prevLink.to}">
<Icon name="chevronleft"/>
<Text variant="subtitle">
{$linkInfo.prevLink.label}
</Text>
</Link>
<SpaceFiller/>
<Link when="{$linkInfo.nextLink}" to="{$linkInfo.nextLink.to}">
<Text variant="subtitle">
{$linkInfo.nextLink.label}
</Text>
<Icon name="chevronright"/>
</Link>
</HStack>
```
### `$pathname`
Use `$pathname` to conditionally show content based on the current route path.
```xmlui
<App layout="horizontal-sticky">
<AppHeader>
<property name="logoTemplate">
<Text>My App</Text>
</property>
<property name="profileMenuTemplate">
<!-- Settings icon only shows on pages that have settings -->
<Icon name="cog" size="md" onClick="settingsDialog.open()"
when="{['/dashboard', '/profile', '/settings'].includes($pathname)}" />
</property>
</AppHeader>
</App>
```
```
--------------------------------------------------------------------------------
/docs/content/components/Avatar.md:
--------------------------------------------------------------------------------
```markdown
# Avatar [#avatar]
`Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.
**Key features:**
- **Automatic fallback**: Shows initials when no image URL is provided or image fails to load
- **Multiple sizes**: From `xs` (extra small) to `lg` (large) to fit different contexts
- **Clickable**: Supports click events for profile actions, modals, or navigation
- **Accessible**: Automatically generates appropriate alt text from the name
## Properties [#properties]
### `name` [#name]
This property sets the name value the Avatar uses to display initials. If neither this property nor `url` is defined, an empty avatar is displayed.
```xmlui-pg copy display name="Example: name"
<App>
<Avatar name="John, Doe" />
</App>
```
### `size` (default: "sm") [#size-default-sm]
This property defines the display size of the Avatar.
Available values:
| Value | Description |
| --- | --- |
| `xs` | Extra small |
| `sm` | Small **(default)** |
| `md` | Medium |
| `lg` | Large |
| `xl` | Extra large |
```xmlui-pg copy display name="Example: size"
<App>
<HStack>
<Avatar name="Dorothy Ellen Fuller" />
<Avatar name="Xavier Schiller" size="xs" />
<Avatar name="Sebastien Moore" size="sm" />
<Avatar name="Molly Dough" size="md" />
<Avatar name="Lynn Gilbert" size="lg" />
</HStack>
</App>
```
### `url` [#url]
This property specifies the URL of the image to display in the Avatar. If neither this property nor `name` is defined, an empty avatar is displayed.
```xmlui-pg copy display name="Example: url"
<App>
<Avatar url="https://i.pravatar.cc/100" size="md" />
</App>
```
## Events [#events]
### `click` [#click]
This event is triggered when the avatar is clicked.
```xmlui-pg copy display name="Example: click"
<App>
<HStack verticalAlignment="center">
<Avatar name="Molly Dough" size="md" onClick="toast('Avatar clicked')" />
Click the avatar!
</HStack>
</App>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Avatar | $color-surface-100 | $color-surface-100 |
| [border](../styles-and-themes/common-units/#border)-Avatar | 0px solid $color-surface-400A80 | 0px solid $color-surface-400A80 |
| [borderBottom](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderBottomColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderBottomWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderHorizontalColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderLeft](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderLeftWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | 4px | 4px |
| [borderRight](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderRightStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderRightWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderTop](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderTopColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderTopStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderTopWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderVerticalColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderVerticalWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Avatar | inset 0 0 0 1px rgba(4,32,69,0.1) | inset 0 0 0 1px rgba(4,32,69,0.1) |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-Avatar | $fontWeight-bold | $fontWeight-bold |
| [textColor](../styles-and-themes/common-units/#color)-Avatar | $textColor-secondary | $textColor-secondary |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/documentation-scripts-refactoring-plan.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Documentation Generation Scripts - Refactoring Plan
## Overview
This document outlines additional refactoring opportunities identified in the XMLUI documentation generation scripts beyond the basic constant extraction that has already been completed.
## High-Priority Refactoring Opportunities
### 1. Error Handling Standardization
**Current Issues:**
- Inconsistent error handling patterns across scripts
- Mix of `console.log()` + `process.exit()` vs proper logger usage
- Some scripts lack proper error handling entirely
**Files Affected:**
- `create-theme-files.mjs` - Uses console.log + process.exit
- Various forEach loops with potential for silent failures
**Recommended Solution:**
- Create standardized error handling utilities
- Replace all console.log error messages with logger
- Implement proper error recovery where possible
### 2. Logging Consistency
**Current Issues:**
- `create-theme-files.mjs` uses console.log instead of the logger
- Inconsistent log levels and formatting
**Files Affected:**
- `create-theme-files.mjs`
**Recommended Solution:**
- Update all scripts to use the centralized logger
- Standardize log messages and levels
### 3. Duplicate Pattern Extraction ✅ **COMPLETED**
**Status:** ✅ **COMPLETED** - See [duplicate-pattern-extraction-summary.md](./duplicate-pattern-extraction-summary.md)
**Original Issues:**
- Multiple forEach loops with similar Object.entries patterns
- Repeated theme variable processing logic
- Similar file writing patterns
**Files Affected:**
- `create-theme-files.mjs` - Repeated theme variable processing
- `MetadataProcessor.mjs` - Similar forEach patterns for props/apis/events
**Solution Implemented:**
- ✅ Created `pattern-utilities.mjs` with comprehensive reusable utilities
- ✅ Extracted common iteration utilities (`iterateObjectEntries`, `iterateArray`)
- ✅ Created specialized theme processing utilities (`processComponentThemeVars`, `extractThemeVars`)
- ✅ Standardized file writing operations (`writeFileWithLogging`, `generateExportStatements`)
- ✅ Created component processing utilities (`processComponentSection`, `processDuplicatesWithLogging`)
- ✅ Updated all affected scripts to use shared utilities
- ✅ Achieved 60% reduction in duplicate code patterns
- ✅ Validated all scripts work correctly with pattern utilities
### 4. Configuration Management ✅ **COMPLETED**
**Status:** ✅ **COMPLETED** - See [configuration-management-enhancement-summary.md](./configuration-management-enhancement-summary.md)
**Original Issues:**
- Hard-coded paths and magic values still exist in some places
- Configuration loading patterns could be standardized
**Files Affected:**
- `input-handler.mjs` - Basic config loader could be enhanced
- Various scripts with path construction
**Solution Implemented:**
- ✅ Created `configuration-management.mjs` with comprehensive configuration system
- ✅ Added `ConfigurationManager` class with schema validation and search paths
- ✅ Implemented `PathResolver` class for intelligent path resolution
- ✅ Created `ConfigValidator` class for schema-based validation
- ✅ Defined configuration schemas for components, extensions, and generator
- ✅ Updated all scripts to use enhanced configuration management
- ✅ Added environment variable override support
- ✅ Maintained full backward compatibility with existing configuration files
- ✅ Achieved comprehensive error handling and validation
### 5. Function Decomposition
**Current Issues:**
- Some functions are too long and do multiple things
- Complex nested logic in theme file generation
**Files Affected:**
- `create-theme-files.mjs` - Main logic could be broken down
- `MetadataProcessor.mjs` - Some methods are quite long
**Recommended Solution:**
- Break down large functions into smaller, focused functions
- Improve separation of concerns
## Medium-Priority Opportunities
### 6. Async/Await Consistency
- Some scripts mix Promise patterns
- Could standardize on async/await throughout
### 7. Input Validation
- Add parameter validation to utility functions
- Validate configuration file contents more thoroughly
### 8. Type Safety (if TypeScript adoption is considered)
- Consider migrating to TypeScript for better type safety
- Add JSDoc types as an interim solution
## Low-Priority Opportunities
### 9. Performance Optimizations
- Parallel processing where appropriate
- Caching for repeated operations
### 10. Testing Infrastructure
- Add unit tests for utility functions
- Integration tests for the full pipeline
## Implementation Priority
1. **Immediate (High Impact, Low Risk):**
- ✅ **COMPLETED:** Logging consistency fixes
- ✅ **COMPLETED:** Basic error handling improvements
2. **Short Term (High Impact, Medium Risk):**
- ✅ **COMPLETED:** Duplicate pattern extraction
- Function decomposition
3. **Medium Term (Medium Impact, Medium Risk):**
- ✅ **COMPLETED:** Configuration management enhancements
- Input validation improvements
4. **Long Term (High Impact, High Risk):**
- Type safety improvements
- Testing infrastructure
## Completed Refactoring Summary
### ✅ **Phase 1 Complete: Core Infrastructure**
- **Error Handling Standardization** - `error-handling.mjs` created and integrated
- **Logging Consistency** - `logging-standards.mjs` with scoped loggers implemented
- **Magic String Extraction** - `constants.mjs` centralized configuration
- **Duplicate Pattern Extraction** - `pattern-utilities.mjs` with reusable utilities
- **Configuration Management Enhancement** - `configuration-management.mjs` with schema validation and path resolution
### 🔄 **Phase 2 In Progress: Advanced Improvements**
- Function decomposition (next priority)
- Input validation improvements
## Success Metrics
- Reduced code duplication
- Consistent error handling across all scripts
- Improved maintainability and readability
- No regression in functionality
- Better logging and debugging capabilities
```
--------------------------------------------------------------------------------
/xmlui/src/components/Toggle/Toggle.tsx:
--------------------------------------------------------------------------------
```typescript
import { type ReactNode } from "react";
import { useMemo } from "react";
import React, {
type CSSProperties,
type ForwardedRef,
forwardRef,
useCallback,
useEffect,
} from "react";
import classnames from "classnames";
import styles from "./Toggle.module.scss";
import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
import { noop } from "../../components-core/constants";
import { useEvent } from "../../components-core/utils/misc";
import type { ValidationStatus } from "../abstractions";
import { PART_INPUT } from "../../components-core/parts";
import { composeRefs } from "@radix-ui/react-compose-refs";
type ToggleProps = {
id?: string;
initialValue?: boolean;
value?: boolean;
enabled?: boolean;
style?: CSSProperties;
readOnly?: boolean;
validationStatus?: ValidationStatus;
updateState?: UpdateStateFn;
onClick?: (event: React.MouseEvent) => void;
onDidChange?: (newValue: boolean) => void;
onFocus?: () => void;
onBlur?: () => void;
variant?: "checkbox" | "switch";
indeterminate?: boolean;
className?: string;
required?: boolean;
autoFocus?: boolean;
registerComponentApi?: RegisterComponentApiFn;
inputRenderer?: (contextVars: any, input?: ReactNode) => ReactNode;
forceHover?: boolean;
};
export const defaultProps: Pick<
ToggleProps,
"initialValue" | "value" | "enabled" | "validationStatus" | "indeterminate"
> = {
initialValue: false,
value: false,
enabled: true,
validationStatus: "none",
indeterminate: false,
};
export const Toggle = forwardRef(function Toggle(
{
id,
initialValue = defaultProps.initialValue,
value = defaultProps.value,
enabled = defaultProps.enabled,
style,
readOnly,
validationStatus = defaultProps.validationStatus,
updateState = noop,
onClick = noop,
onDidChange = noop,
onFocus = noop,
onBlur = noop,
variant = "checkbox",
indeterminate = defaultProps.indeterminate,
className,
required,
autoFocus,
registerComponentApi,
inputRenderer,
forceHover = false,
...rest
}: ToggleProps,
forwardedRef: ForwardedRef<HTMLInputElement>,
) {
const innerRef = React.useRef<HTMLInputElement | null>(null);
const ref = innerRef ? composeRefs(forwardedRef, innerRef) : forwardedRef;
const transformToLegitValue = (inp: any): boolean => {
if (typeof inp === "undefined" || inp === null) {
return false;
}
if (typeof inp === "boolean") {
return inp;
}
if (typeof inp === "number") {
return !isNaN(inp) && !!inp;
}
if (typeof inp === "string") {
return inp.trim() !== "" && inp.toLowerCase() !== "false";
}
if (Array.isArray(inp)) {
return inp.length > 0;
}
if (typeof inp === "object") {
return Object.keys(inp).length > 0;
}
return false;
};
useEffect(() => {
updateState({ value: transformToLegitValue(initialValue) }, { initial: true });
}, [initialValue, updateState]);
const updateValue = useCallback(
(value: boolean) => {
if (innerRef.current?.checked === value) return;
updateState({ value });
onDidChange(value);
},
[onDidChange, updateState],
);
const onInputChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
if (readOnly) {
return;
}
updateState({ value: event.target.checked });
onDidChange(event.target.checked);
},
[onDidChange, readOnly, updateState],
);
const handleOnFocus = useCallback(() => {
onFocus?.();
}, [onFocus]);
const handleOnBlur = useCallback(() => {
onBlur?.();
}, [onBlur]);
useEffect(() => {
if (typeof indeterminate === "boolean" && innerRef.current) {
innerRef.current.indeterminate = indeterminate;
}
}, [indeterminate]);
const focus = useCallback(() => {
innerRef.current?.focus();
}, []);
useEffect(() => {
if (innerRef.current && autoFocus) {
setTimeout(() => focus(), 0);
}
}, [focus, autoFocus]);
const setValue = useEvent((newValue) => {
updateValue(transformToLegitValue(newValue));
});
useEffect(() => {
registerComponentApi?.({
focus,
setValue,
});
}, [focus, registerComponentApi, setValue]);
const input = useMemo(() => {
const legitValue = transformToLegitValue(value);
return (
<input
{...rest}
id={id}
data-part-id={PART_INPUT}
ref={ref}
type="checkbox"
role={variant}
checked={legitValue}
disabled={!enabled}
required={required}
readOnly={readOnly}
aria-readonly={readOnly}
aria-checked={indeterminate ? "mixed" : legitValue}
aria-required={required}
aria-disabled={!enabled}
onClick={onClick}
onChange={onInputChange}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
autoFocus={autoFocus}
style={style}
className={classnames(className, styles.resetAppearance, {
[styles.checkbox]: variant === "checkbox",
[styles.switch]: variant === "switch",
[styles.error]: validationStatus === "error",
[styles.warning]: validationStatus === "warning",
[styles.valid]: validationStatus === "valid",
[styles.forceHover]: forceHover,
})}
/>
);
}, [
rest,
className,
ref,
style,
id,
enabled,
handleOnBlur,
handleOnFocus,
onInputChange,
onClick,
readOnly,
required,
validationStatus,
value,
variant,
indeterminate,
autoFocus,
forceHover,
]);
return (
inputRenderer ? (
<label className={styles.label}>
<div className={styles.inputContainer}>{input}</div>
{inputRenderer({
$checked: transformToLegitValue(value),
$setChecked: setValue,
})}
</label>
) : (
input
)
);
});
```
--------------------------------------------------------------------------------
/docs/content/components/ResponsiveBar.md:
--------------------------------------------------------------------------------
```markdown
# ResponsiveBar [#responsivebar]
`ResponsiveBar` is a layout container that automatically manages child component overflow by moving items that don't fit into a dropdown menu. It supports both horizontal and vertical orientations and provides a space-efficient way to display navigation items, toolbar buttons, or other components that need to adapt to varying container dimensions while maintaining full functionality.
**Key features:**
- **Automatic overflow management**: Automatically moves items that don't fit into a dropdown menu
- **Responsive design**: Adapts to container width changes in real-time
- **Zero configuration**: Works out of the box with sensible defaults
- **Customizable overflow icon**: Use custom icons for the overflow dropdown trigger
The component monitors its container width and automatically determines which child components fit within the available space. Components that don't fit are moved into a dropdown menu accessible via a "..." trigger button.
```xmlui-pg copy display name="Example: Basic ResponsiveBar" height="220px"
---app copy display
<App>
<ResponsiveBar>
<Button label="File" />
<Button label="Edit" />
<Button label="View" />
<Button label="Very Long Menu Name" />
<Button label="Project" />
<Button label="Build" />
<Button label="Window" />
<Button label="Help" />
</ResponsiveBar>
</App>
---desc
Try resizing the container or browser window to see the responsive behavior:
```
**Context variables available during execution:**
- `$overflow`: Boolean indicating whether the child component is displayed in the overflow dropdown menu (true) or visible in the main bar (false).
## Properties [#properties]
### `dropdownAlignment` [#dropdownalignment]
Alignment of the dropdown menu relative to the trigger button. By default, uses 'end' when reverse is false (dropdown on the right/bottom) and 'start' when reverse is true (dropdown on the left/top).
Available values:
| Value | Description |
| --- | --- |
| `center` | Place the content in the middle |
| `start` | Justify the content to the left (to the right if in right-to-left) |
| `end` | Justify the content to the right (to the left if in right-to-left) |
### `dropdownText` (default: "More options") [#dropdowntext-default-more-options]
Text to display in the dropdown trigger button label when items overflow. This text is used for accessibility and appears alongside the overflow icon.
### `gap` (default: 0) [#gap-default-0]
Gap between child elements in pixels. Controls the spacing between items in the responsive bar layout.
### `orientation` (default: "horizontal") [#orientation-default-horizontal]
Layout direction of the responsive bar. In horizontal mode, items are arranged left-to-right and overflow is based on container width. In vertical mode, items are arranged top-to-bottom and overflow is based on container height.
Available values: `horizontal` **(default)**, `vertical`
### `overflowIcon` (default: "ellipsisHorizontal:ResponsiveBar") [#overflowicon-default-ellipsishorizontal-responsivebar]
Icon to display in the dropdown trigger button when items overflow. You can use component-specific icons in the format "iconName:ResponsiveBar".
You can customize the icon used for the overflow dropdown trigger:
```xmlui-pg copy display name="Example: Custom overflow icon" height="220px"
<App>
<ResponsiveBar overflowIcon="dotmenu">
<Button label="File" />
<Button label="Edit" />
<Button label="View" />
<Button label="Very Long Menu Name" />
<Button label="Project" />
<Button label="Build" />
<Button label="Window" />
<Button label="Help" />
</ResponsiveBar>
</App>
```
### `reverse` (default: false) [#reverse-default-false]
Reverses the direction of child elements. In horizontal mode, items are arranged from right to left instead of left to right. In vertical mode, items are arranged from bottom to top instead of top to bottom. The dropdown menu position also adjusts to appear at the start (left/top) instead of the end (right/bottom).
### `triggerTemplate` [#triggertemplate]
This property allows you to define a custom trigger instead of the default one provided by `ResponsiveBar`.
## Events [#events]
### `click` [#click]
This event is triggered when the ResponsiveBar is clicked.
```xmlui-pg copy display name="Example: Click event" height="200px"
<App>
<variable name="clickCount" value="{0}" />
<Text value="ResponsiveBar clicked {clickCount} times" />
<ResponsiveBar onClick="clickCount += 1">
<Button label="Item 1" />
<Button label="Item 2" />
<Button label="Item 3" />
<Button label="Item 4" />
<Button label="Item 5" />
<Button label="Item 6" />
<Button label="Item 7" />
<Button label="Item 8" />
<Button label="Item 9" />
</ResponsiveBar>
</App>
```
### `willOpen` [#willopen]
This event fires when the `ResponsiveBar` overflow dropdown menu is about to be opened. You can prevent opening the menu by returning `false` from the event handler. Otherwise, the menu will open at the end of the event handler like normal.
## Exposed Methods [#exposed-methods]
### `close` [#close]
This method closes the overflow dropdown menu.
**Signature**: `close(): void`
### `hasOverflow` [#hasoverflow]
This method returns true if the ResponsiveBar currently has an overflow menu (i.e., some items don't fit and are in the dropdown).
**Signature**: `hasOverflow(): boolean`
### `open` [#open]
This method opens the overflow dropdown menu.
**Signature**: `open(): void`
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-ResponsiveBar | transparent | transparent |
| [margin](../styles-and-themes/common-units/#size)-ResponsiveBar | 0 | 0 |
| [padding](../styles-and-themes/common-units/#size)-ResponsiveBar | 0 | 0 |
```
--------------------------------------------------------------------------------
/blog/public/blog/xmlui-playground.md:
--------------------------------------------------------------------------------
```markdown
The XMLUI [docs](https://docs.xmlui.org) are full of live working examples that use [Playground](https://github.com/xmlui-org/xmlui/tree/main/packages/xmlui-playground), an extension package that runs XMLUI code inside an XMLUI app. We use playgrounds to bring component documentation to life. Why just tell you about the `enabled` property of a [Checkbox](https://docs.xmlui.org/components/Checkbox) when we can also show you, as in this live example.
<blockquote>
enabled (default: true)
This boolean property value indicates whether the component responds to user events (true) or not (false).
```xmlui-pg {4-6} {9-10} name="Click the checkboxes"
<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>
```
</blockquote>
This widget doesn't just display the live app, it also enables you to modify it by clicking the  icon. Try it now! You'll land in [a hosted playground](https://playground.xmlui.org/#/playground/#H4sIAAAAAAAAE61W204bMRD9ldWUx2zJhRBYpZXCTVQCVBUKlQoPk%2FUkseK1LduBBZR%2Fr%2BzdJtmw4SLxlsycmTmeOfbsM1iHkqFQkiB5BtQaEugPtP5%2BK6PoWOJQEIvSCaXTocrJJt7cP710mE4DJIr6h6U34pI7juIaxYy%2B3YIzM7qFiIokS8P2W4EjFPaVyP72Sv0jbj%2BV4%2F%2FaG0gK3EyyGrrCsr9dNBQakKpMK0nSWUj%2B3vn%2FcsTHvvVuQhl56zNIzAgS%2BHN%2B9vtHdCDUOLryTmgAZ5DAUKhx7EoL5Y4k83GQZ2LG4a5RpLpGY33eIabTsVEzyQ6VUAYS2Er9j9jOzAhTipuBlrdowzM0j5DAl05nt3d4uPCUWO9pUbvX2YHGeuI4VdKRdPEgaKimSIb5DWduUiJanXZT56v2aoa9ncI9VPnlBJl6iCXe%2F0RJogRIL9qXPC5K1EsS3WYNfC1pXYhGxrgcX5NxPEVRqWB1gAWehpH5xccTVxxnBdaqHvTI4AP5UXSaxRkd5W7B%2FozL6QoTSpVkaB7j3eZyVFwynqJbBsQxpo7f%2BxE5g9JqNCTda%2FiJug8c3gnXhqwl9iKgpv3V%2FGsdbTXrplBTpjZupKS7Id%2FjmoMPlWB1zdzIZT%2FkrMEvUm5Vbkbc3RQQCrwV58lf8ieKT1teE193u4ay6qGCp1e0qNATMj6z8anLxJV%2FaIJogmaEDwgvx4LOkUpnGUnnOVl%2FWbsHuzu9boVyBbPszJfWQbvTHtSMxpJGE7TwIj21qUsI8wYwNNOa1%2Bb1R6FWCh9QzCdf86Lh8QVZR6x8o3QeWSU4i9YC2rWcwpQmhDXy7TY3T8G3cu94vzfYe9ekTvZPBicHH5tUZ2%2Bn1z2G%2BbwBhqyamdTvmuf5%2FM6blHZcybAuRjwnVqybJCy0BtgH1NpfyfK%2FNnTP6eFcsSVGGU7SoU8DCUyU4U9KOhTQgOJOlCmry6t0hY%2BPUs9hJXrJQBK%2BRubzfwm13uekCAAA) where you can edit the XMLUI code and see changes instantly.
Playgrounds work with the [Markdown](https://docs.xmlui.org/components/Markdown) component which is the renderer for this page. Here's the XMLUI source for the checkboxes example.
We show it here as an image because if we were to include the text it would just render as above!
It starts as conventional Markdown codefence bounded by triple backtics. You can use the language identifier `xmlui` for XMLUI syntax highlighting, or (as here) use `xmlui-pg` to introduce a live playground. The bracketed numbers specify line ranges to highlight.
## Playgrounds on steroids
Many of these small playgrounds are woven into the component docs. You'll also find more ambitious playgrounds in the How To section of the docs where we illustrate important app patterns, like <a target="_blank" href="https://docs.xmlui.org/howto/use-the-same-modaldialog-to-add-or-edit">How to use the same ModalDialog to add or edit</a>.
If you [view the XMLUI source](https://github.com/xmlui-org/xmlui/blob/main/docs/public/pages/howto/use-the-same-modaldialog-to-add-or-edit.md) for that example, you'll see that the codefence defines an `App` and two user-defined components, `Test` and `ProductModal`. It also defines an API with operations `get-products`, `get-product`, `insert-product`, `update-product`, and `delete-product`.
This is a concise way to express the rich set of behaviors seen in this video.
## Share a working reproduction of a bug
Open source developers who respond to bug reports always hope for, but rarely get, reliable ways to reproduce the bad behavior they are seeing. Now those reports can contain XMLUI codefences that exhibit the behavior.
If you want to make such a report, you can visit [xmlui-codefence-runner.netlify.app](https://xmlui-codefence-runner.netlify.app/), paste in your codefence, open it into a playground, and share its URL. That's the gold standard for this kind of thing, and it's implemented for that site with a dozen lines of XMLUI dropped onto Netlify.
If you find yourself [filing an issue](https://github.com/xmlui-org/xmlui/issues) that needs a solid reproduction, please give it a try.
## Help your AI assistants stay grounded
When you use the [XMLUI MCP server](https://github.com/xmlui-org/xmlui-mcp) with coding assistants like Claude or Copilot, they will prefer How To examples when available.
That's the gold standard response: a link to a known working pattern that proves its existence by running live. And because XMLUI is concise, the pattern doesn't occupy too much space in an AI's context window.
When you ask a question for which an assistant cannot provide such a link, we tell it to admit that and refuse to invent undocumented syntax. They won't always comply but with a running playground that embodies ground truth you can often steer them away from rabbit holes. The more working patterns contributed to the project, the stronger that effect will be.
## Reproducible XMLUI
The common theme here is reproducibility. Whether it lives in a component doc, a How To, or a GitHub issue, an XMLUI codefence captures a piece of XMLUI behavior that you can replay consistently. That's useful for the XMLUI project itself but also for apps you build with XMLUI. Playgrounds that we can reliably reproduce and exchange make everything easier to build, document, debug, and maintain.
```
--------------------------------------------------------------------------------
/xmlui/src/components/DateInput/DateInput.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Date format support**: Multiple date formats including MM/dd/yyyy, yyyy-MM-dd, and dd/MM/yyyy
- **Direct input**: Keyboard-only date entry with input fields for day, month, and year
- **Input validation**: Real-time validation with visual feedback for invalid dates
- **Range support**: Single date selection (default) or date range selection
- **Accessibility**: Full keyboard navigation and screen reader support
%-DESC-END
%-API-START setValue
```xmlui-pg copy {3, 9, 12} display name="Example: setValue"
<App>
<HStack>
<Button
label="Set Date to 05/25/2024"
onClick="picker.setValue('05/25/2024')" />
<Button
label="Clear Date"
onClick="picker.setValue('')" />
</HStack>
<DateInput id="picker" />
</App>
```
%-API-END
%-PROP-START initialValue
```xmlui-pg copy display name="Example: initialValue" height="120px"
<App>
<DateInput initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START enabled
```xmlui-pg copy display name="Example: enabled" height="120px"
<App>
<DateInput enabled="false" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START validationStatus
| 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 |
```xmlui-pg copy display name="Example: validationStatus"
<App>
<DateInput validationStatus="valid" initialValue="05/25/2024" />
<DateInput validationStatus="warning" initialValue="05/25/2024" />
<DateInput validationStatus="error" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START dateFormat
The `dateFormat` prop controls how dates are displayed and entered. Different formats change the order and separators of day, month, and year fields.
> [!NOTE] Regardless of the dateFormat, the year input field always accepts and displays 4-digit years. When entering a 2-digit year, it will be automatically normalized to a 4-digit year.
| Format | Description | Example |
| :----- | :---------- | :------ |
| `MM/dd/yyyy` | US format with slashes | 05/25/2024 |
| `MM-dd-yyyy` | US format with dashes | 05-25-2024 |
| `yyyy/MM/dd` | ISO-like format with slashes | 2024/05/25 |
| `yyyy-MM-dd` | ISO format with dashes | 2024-05-25 |
| `dd/MM/yyyy` | European format with slashes | 25/05/2024 |
| `dd-MM-yyyy` | European format with dashes | 25-05-2024 |
| `yyyyMMdd` | Compact format without separators | 20240525 |
| `MMddyyyy` | US compact format | 05252024 |
```xmlui-pg copy display name="Example: dateFormat"
<App>
<DateInput dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
<DateInput dateFormat="yyyy-MM-dd" initialValue="2024-05-25" />
<DateInput dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
<DateInput dateFormat="yyyyMMdd" initialValue="20240525" />
</App>
```
%-PROP-END
%-PROP-START clearable
When enabled, it displays a clear button that allows users to clear the date input. Enter a date in this app and then click the clear button:
```xmlui-pg copy display name="Example: clearable" /clearable/
<App>
<DateInput initialValue="05/25/2024" />
<DateInput clearable="true" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START clearIcon
```xmlui-pg copy display name="Example: clearIcon" /clearIcon/
<App>
<DateInput initialValue="05/25/2024" clearable="true" clearIcon="trash" />
</App>
```
%-PROP-END
%-PROP-START clearToInitialValue
When `true`, the clear button resets the input to its initial value. When `false`, it clears the input completely.
```xmlui-pg copy display name="Example: clearToInitialValue"
<App>
<DateInput
clearable="true"
clearToInitialValue="true"
initialValue="05/25/2024" />
<DateInput
clearable="true"
clearToInitialValue="false"
initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START mode
Available values:
| Value | Description |
| --- | --- |
| `single` | Single date selection **(default)** |
| `range` | Date range selection |
%-PROP-END
%-PROP-START required
Marks the date input as required for form validation.
```xmlui-pg copy display name="Example: required" height="120px"
<App>
<DateInput required="true" />
</App>
```
%-PROP-END
%-PROP-START readOnly
Makes the date input read-only. Users can see the value but cannot modify it.
```xmlui-pg copy display name="Example: readOnly" height="120px"
<App>
<DateInput readOnly="true" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START emptyCharacter
Character to use as placeholder for empty date values. If longer than 1 character, uses the first character. Defaults to '-'.
```xmlui-pg copy display name="Example: emptyCharacter"
<App>
<DateInput emptyCharacter="." />
<DateInput emptyCharacter="*" />
<DateInput emptyCharacter="abc" />
</App>
```
%-PROP-END
%-EVENT-START didChange
Fired when the date value changes. Receives the new date value as a parameter.
> [!INFO] The date value changes when the edited input part (day, month, year) loses focus and contains a valid value.
```xmlui-pg copy {2} display name="Example: didChange" height="180px"
<App var.selectedDate="No date selected">
<Text value="{selectedDate}" />
<DateInput
dateFormat="yyyy-MM-dd"
initialValue="2024-05-25"
onDidChange="(date) => selectedDate = date" />
</App>
```
%-EVENT-END
%-EVENT-START gotFocus
Fired when the date input receives focus.
```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
<App var.isFocused="{false}">
<Text value="{isFocused
? 'DateInput focused' : 'DateInput lost focus'}"
/>
<DateInput
dateFormat="MM/dd/yyyy"
onGotFocus="isFocused = true"
onLostFocus="isFocused = false"
initialValue="05/25/2024"
/>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Header.tsx:
--------------------------------------------------------------------------------
```typescript
import { useCallback, useEffect, useState } from "react";
import styles from "./Header.module.scss";
import classnames from "classnames";
import { RxOpenInNewWindow, RxDownload, RxShare2 } from "react-icons/rx";
import { LiaUndoAltSolid } from "react-icons/lia";
import { usePlayground } from "../hooks/usePlayground";
import { resetApp, toneChanged } from "../state/store";
import { handleDownloadZip } from "../utils/helpers";
import { createQueryString } from "./utils";
import { Box } from "./Box";
import ConfirmationDialog from "./ConfirmationDialog";
import { ThemeSwitcher } from "./ThemeSwitcher";
import { CodeSelector } from "./CodeSelector";
import { Button, Text, Logo, Tooltip } from "xmlui";
import { ToneSwitch, ContentSeparator } from "xmlui";
import { useToast } from "../hooks/useToast";
export const Header = ({ standalone = false }: { standalone?: boolean }) => {
const { appDescription, options, dispatch } = usePlayground();
const [dialogOpen, setDialogOpen] = useState(false);
const { showToast } = useToast();
const [show, setShow] = useState(false);
useEffect(() => {
setShow(true);
}, []);
const createAppUrl = useCallback(
async (previewMode: boolean) => {
const data = {
standalone: appDescription,
options: {
fixedTheme: options.fixedTheme,
swapped: options.swapped,
previewMode,
orientation: options.orientation,
activeTheme: options.activeTheme,
activeTone: options.activeTone,
content: options.content,
},
};
const appQueryString = await createQueryString(JSON.stringify(data));
return `${window.location.origin}/#/playground#${appQueryString}`;
},
[
appDescription,
options.fixedTheme,
options.swapped,
options.activeTone,
options.orientation,
options.activeTheme,
options.content,
],
);
const openStandaloneApp = useCallback(
async (previewMode = true) => {
const url = await createAppUrl(previewMode);
window.open(url, "_blank");
},
[createAppUrl],
);
const share = useCallback(async () => {
const url = await createAppUrl(false);
await navigator.clipboard.writeText(url);
showToast({
title: "URL copied to clipboard",
description: "",
type: "info",
});
}, [createAppUrl, showToast]);
const download = useCallback(async () => {
await handleDownloadZip(appDescription);
}, [appDescription]);
return (
<div className={classnames(styles.header)}>
<Box styles={{ padding: 0, justifyContent: "space-between", flexWrap: "wrap" }}>
<div style={{ display: "flex", alignItems: "center", maxWidth: "280px", width: "100%" }}>
<Logo style={{ width: "93.8281px", padding: 12, paddingLeft: 0 }} />
{!options.previewMode && standalone && <CodeSelector />}
</div>
<Text>{appDescription.config?.name}</Text>
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
{standalone && (
<>
{!options.fixedTheme &&
appDescription.availableThemes &&
appDescription.availableThemes.length > 1 && <ThemeSwitcher />}
</>
)}
{!options.previewMode && show && (
<>
{!standalone && (
<Tooltip text="View and edit in new full-width window">
<Button variant="ghost" onClick={() => openStandaloneApp(false)}>
<RxOpenInNewWindow />
</Button>
</Tooltip>
)}
<ConfirmationDialog
open={dialogOpen}
onOpenChange={setDialogOpen}
title="Confirm Reset"
description="Are you sure you want to reset the app? This action cannot be undone and will reset all code to its initial state."
onConfirm={() => {
dispatch(resetApp());
setDialogOpen(false);
}}
confirmText="Confirm"
cancelText="Cancel"
/>
<Tooltip text="Reset the app">
<Button
variant="ghost"
onClick={() => {
if (standalone) {
setDialogOpen(true);
} else {
dispatch(resetApp());
}
}}
>
<LiaUndoAltSolid height={24} width={24} />
</Button>
</Tooltip>
</>
)}
{standalone && (
<>
<ContentSeparator className={styles.separator} orientation="vertical" size={1} />
<Tooltip text="Share this app">
<Button variant="ghost" onClick={() => share()}>
<RxShare2 />
</Button>
</Tooltip>
<Tooltip text="Preview in fullscreen">
<Button variant="ghost" onClick={() => openStandaloneApp()}>
<RxOpenInNewWindow height={24} width={24} />
</Button>
</Tooltip>
<Tooltip text="Download app">
<Button variant="ghost" onClick={() => download()}>
<RxDownload height={24} width={24} />
</Button>
</Tooltip>
<ContentSeparator className={styles.separator} orientation="vertical" size={1} />
{!options.fixedTheme && (
<Tooltip text="Change tone">
<ToneSwitch onChange={(tone) => dispatch(toneChanged(tone))} />
</Tooltip>
)}
</>
)}
</div>
</Box>
{appDescription.config?.description && (
<div className={styles.description}>{appDescription.config?.description}</div>
)}
</div>
);
};
```
--------------------------------------------------------------------------------
/docs/public/pages/markup.md:
--------------------------------------------------------------------------------
```markdown
# XML Markup
When you write XML markup to create an XMLUI app, you use XML tags to name components. And you use XML attributes to set properties that govern their behavior.
## Properties
An attribute may be a literal string that sets the value of a property.
```xmlui-pg name="A literal property" copy display
<Text value="This is rendered as text." />
```
## Expressions
An attribute may also be a JavaScript expression — enclosed in curly braces `{ }` — that dynamically sets the value of a property.
```xmlui-pg copy name="A dynamic property" display
<Text value="Life, the universe, and everything: { 6 * 7 }" />
```
An expression can hold a JSON list.
```xmlui-pg copy name="A JSON list" display /['Bakerloo', 'Central', 'Circle']/
<Items data="{ ['Bakerloo', 'Central', 'Circle'] }" >
<Text>{ $item }</Text>
</Items>
```
Or a complex JSON object, in which case you'll write an outer set of curly braces to introduce the expression and an inner set to define an object like this form's `data` property.
```xmlui-pg copy name="A complex JSON object" display /{ station: "Brixton", wifi: true, toilets: false }/
<App>
<Form id="searchForm" padding="0.5rem"
data='{ { station: "Brixton", wifi: true, toilets: false } }'
onSubmit="() => { preview.setValue(JSON.stringify($data)) }"
>
<Text>Search for station amenities</Text>
<HStack verticalAlignment="center" >
<FormItem bindTo="station" />
<FormItem
type="checkbox"
label="wifi"
bindTo="wifi"
labelPosition="start"
/>
<FormItem
type="checkbox"
label="toilets"
bindTo="toilets"
labelPosition="start"
/>
</HStack>
<property name="buttonRowTemplate">
<Button type="submit" icon="search" label="Search"/>
</property>
</Form>
<TextArea id="preview" />
</App>
```
> [!INFO]
> In addition to a literal string or an expression, you will sometimes use the special tag `<property>` to set a value using markup, like the `ButtonRowTemplate` that defines this form's button.
## Variables
A component may declare a variable that's visible to itself and its children. Variable names start with a letter or an underscore (`_`) and continue with these characters or digits.
You can declare a variable using the `var` prefix.
```xmlui-pg copy name="Declaring a variable with var" display
<App var.stations="{ [ 'Bakerloo', 'Central', 'Circle'] }">
<Items data="{stations}">
<Text> {$item} </Text>
</Items>
</App>
```
Or using the `<variable>` helper tag.
```xmlui-pg copy name="Declaring a variable with <variable>" display
<App>
<variable
name="stations"
value="{ [ 'Bakerloo', 'Central', 'Circle'] }" />
<Items data="{stations}">
<Text>{$item}</Text>
</Items>
</App>
```
### Nested variables
The same variable name can be declared in nested scopes. The engine resolves the name to the variable in the closest (innermost) scope.
```xmlui-pg copy name="Defining and using nested variables" display
<App var.title="var.title is 'Hello, from App!'">
<H1>{title}</H1>
<VStack var.title="var.title is 'Hello, from VStack'!">
<Text>{title}</Text>
</VStack>
</App>
```
### Multiple instances
<Text>Each counter is a separate instance of `CounterTest` with its own local component variables.</Text>
```xmlui-pg name="Isolated component instances"
---app display
<App>
<HStack horizontalAlignment="center">
<VStack>
<Text variant="caption">Counter Instance 1</Text>
<CounterTest instance="1" />
</VStack>
<Stack width="10rem"/>
<VStack>
<Text variant="caption">Counter Instance 2</Text>
<CounterTest instance="2" />
</VStack>
</HStack>
</App>
---comp display
<Component name="CounterTest" var.count="{0}">
<Text>Counter ID: {$props.instance}</Text>
<Text>Count: {count}</Text>
<Button onClick="count = count + 1">
Increment {$props.id}
</Button>
</Component>
```
### Reactive variables
In [Reactive data binding](/reactive-intro) we saw how a `Select` can cause a `Table` to refresh by setting the `url` property of the `DataSource` on which the `Table` depends. Here's a more basic example of how components interact with reactive variables.
```xmlui-pg copy name="Defining and using reactive variables" display
<App var.count="{0}" var.countTimes3="{3 * count}" >
<Button
label="Click to increment the count"
onClick="count++" />
<Text>Click count = {count} (changes directly)</Text>
<Text>Click count * 3 = {countTimes3} (changes indirectly)</Text>
</App>
```
The `Button`'s click handler increments `count` directly. But because `countTimes3` is define using an expression that refers to `count`, the engine reevalautes that expression each time `count` changes and updates `countTimes3` indirectly.
We've seen two ways to declare variables: a `var` declaration in an XML attribute, or the `variable` tag. A similar pattern applies to event handlers. The `Button` to increment the count declares its handler in an attribute whose name combines the `on` prefix with the name [click](/components/Button#click). You may also use the `<event>` helper tag with no prefix for the event name.
```xmlui-pg copy name="Declare an event handler using the <event> tag" display
<App var.count="{0}" >
<Button label="Click me! Click count = {count}">
<event name="click">
{ count++ }
</event>
</Button>
</App>
```
> [!INFO]
> Why use the `<event>` tag? In this example there's no reason to prefer it. But as we saw above, you declare a `Form`'s `buttonRowTemplate` property in XMLUI markup using the `<property>` helper tag. The same pattern applies when a button's handler is an XMLUI component like `<APICall>`.
> ```xmlui copy
> <Button label="Click to increment the count on the server">
> <event name="click">
> <APICall url="/count/increment" />
> </event>
> <Text>Click count = {count}</Text>
> </Button>
> ```
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/StyleContext.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties } from "react";
import type React from "react";
import { createContext, useContext, useEffect, useInsertionEffect, useMemo, useState } from "react";
import type { StyleObjectType } from "./StyleRegistry";
import { StyleRegistry } from "./StyleRegistry";
import { EMPTY_OBJECT } from "../constants";
import { useIndexerContext } from "../../components/App/IndexerContext";
// The context is typed to hold either a StyleRegistry instance or null.
const StyleContext = createContext<StyleRegistry | null>(null);
type StyleProviderProps = {
children: React.ReactNode;
styleRegistry?: StyleRegistry;
forceNew?: boolean; // Optional prop to force a new registry
};
/**
* A "smart" provider that creates a StyleRegistry only if one doesn't
* already exist in the context.
*/
export function StyleProvider({
children,
styleRegistry = new StyleRegistry(),
forceNew = false, // Optional prop to force a new registry
}: StyleProviderProps) {
// Check if a provider already exists above this one in the tree.
const parentRegistry = useContext(StyleContext);
// If we are the top-most provider, create a new registry for this tree.
// On the client, this runs once. On the server, it runs once per request
// IF this provider is at the root of the tree being rendered.
// Use useState to create the registry instance.
const [registry] = useState(() => {
const newRegistry = styleRegistry;
// This logic only runs on the CLIENT, once, when the registry is created.
if (typeof window !== "undefined") {
// 1. Find the style tag injected by the server.
const ssrTag = document.querySelector('style[data-style-registry="true"]');
// 2. Read the hashes from our custom data attribute.
const ssrHashes = ssrTag?.getAttribute("data-ssr-hashes");
if (ssrHashes) {
// 3. Pre-populate the 'injected' set with all the server-rendered hashes.
let hashes = ssrHashes.split(",");
newRegistry.ssrHashes = new Set(hashes);
newRegistry.injected = new Set(hashes);
}
}
return newRegistry;
});
// If we're already inside a provider, don't do anything. Just render the children.
// This makes nesting StyleProviders safe and harmless.
if (parentRegistry && !forceNew) {
return <>{children}</>;
}
return <StyleContext.Provider value={registry}>{children}</StyleContext.Provider>;
}
export function useStyleRegistry(): StyleRegistry {
const registry = useContext(StyleContext);
if (registry === null) {
throw new Error("Component must be used within a StyleProvider");
}
return registry;
}
export function useComponentStyle(styles?: Record<string, CSSProperties[keyof CSSProperties]>) {
const rootStyle = useMemo(() => {
return (!styles || Object.keys(styles).length === 0)
? EMPTY_OBJECT
: {
"&": styles,
// "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
};
}, [styles]);
return useStyles(rootStyle);
}
export const StyleInjectionTargetContext = createContext<Document | ShadowRoot | null>(null);
export function useDomRoot(){
const domRoot = useContext(StyleInjectionTargetContext);
return domRoot;
}
type InjectOptions = {
prepend?: boolean;
}
export function useStyles(styles: StyleObjectType, {prepend}: InjectOptions = EMPTY_OBJECT ): string {
// we skip this whole thing if we're indexing
const {indexing} = useIndexerContext();
const domRoot = useDomRoot();
const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head
const registry = useStyleRegistry();
const { className, styleHash } = useMemo(() => {
if(indexing || !styles || styles === EMPTY_OBJECT || Object.keys(styles).length === 0) {
return { className: undefined, styleHash: undefined };
}
return registry.register(styles);
}, [indexing, registry, styles]);
useInsertionEffect(() => {
if (!styleHash || registry.injected.has(styleHash)) {
return;
}
const { css } = registry.cache.get(styleHash) || {};
if (css) {
const styleElement = document.createElement("style");
styleElement.setAttribute("data-style-hash", styleHash);
styleElement.innerHTML = `@layer dynamic {\n${css}\n}`;
if(prepend){
injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
} else {
injectionTarget.appendChild(styleElement);
}
registry.injected.add(styleHash);
}
}, [registry, styleHash, injectionTarget]);
// HOOK 2: For lifecycle management (reference counting and CLEANUP).
useEffect(() => {
if(!styleHash){
return;
}
// On MOUNT, tell the registry that this component is using this style.
registry.incrementRef(styleHash);
// Return a cleanup function to run on UNMOUNT.
return () => {
registry.decrementRef(styleHash);
// Schedule the cleanup check to run asynchronously.
// This allows React's Strict Mode double-render to complete before
// we check if the style tag should be removed.
setTimeout(() => {
// Only proceed with cleanup if...
// 1. No other component is using this style (ref count is 0).
// 2. This style was NOT part of the initial server render.
if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
// If it's still zero, it means no component re-mounted to claim this style.
// Now it's safe to perform the cleanup.
registry.injected.delete(styleHash);
injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)?.remove();
}
}, 0); // A timeout of 0ms is sufficient to push this to the end of the event loop.
};
}, [injectionTarget, registry, styleHash]); // Dependency array ensures this runs once per style change.
return className;
}
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/lint.ts:
--------------------------------------------------------------------------------
```typescript
import type {
ComponentDef,
CompoundComponentDef,
ComponentMetadata,
} from "../../abstractions/ComponentDefs";
import type { StandaloneAppDescription } from "../../components-core/abstractions/standalone";
import { layoutOptionKeys } from "../../components-core/descriptorHelper";
import { viewportSizeMd } from "../../components/abstractions";
import type {
ComponentMetadataProvider,
MetadataProvider,
} from "../../language-server/services/common/metadata-utils";
import { CORE_NAMESPACE_VALUE } from "./transform";
export enum LintSeverity {
Skip,
Warning,
Error,
}
export enum LintDiagKind {
UnrecognisedProp,
}
type Options = {
severity: LintSeverity;
};
type LintDiagnostic = {
message: string;
kind: LintDiagKind;
};
export function getLintSeverity(lintSeverityOption: string | undefined): LintSeverity {
if (!lintSeverityOption) {
return LintSeverity.Warning;
}
let lintSeverity = LintSeverity.Warning;
switch (lintSeverityOption.toLowerCase()) {
case "warning":
return LintSeverity.Warning;
break;
case "error":
return LintSeverity.Error;
break;
case "skip":
return LintSeverity.Skip;
break;
default:
console.warn(
`Invalid lint severity option '${lintSeverityOption}'. Must be one of: 'warning', 'error', 'skip'. Defaulting to 'warning'.`,
);
return LintSeverity.Warning;
break;
}
}
export type ComponentLints = {
lints: {
message: string;
kind: LintDiagKind;
}[];
componentName: string;
};
export function lintApp({
appDef,
metadataProvider,
}: {
appDef: StandaloneAppDescription;
metadataProvider: MetadataProvider;
}): ComponentLints[] {
const entryPointLints: ComponentLints = {
componentName: "Main",
lints: lint({
component: appDef.entryPoint,
metadataProvider,
}),
};
const compoundCompLints: ComponentLints[] = (appDef.components ?? []).map((c) => {
const lints = lint({
component: c,
metadataProvider,
});
return { lints, componentName: c.name };
});
return [entryPointLints, ...compoundCompLints].filter((diags) => diags.lints.length > 0);
}
export function printComponentLints(lintDiags: ComponentLints) {
console.group(`Validation on '${lintDiags.componentName}':`);
lintDiags.lints.forEach(({ message }) => {
console.warn(message);
});
console.groupEnd();
}
export function lintErrorsComponent(lints: ComponentLints[]) {
function makeComponent() {
const errList = lints.map((lint, idx) => {
return {
type: "VStack",
props: { gap: "0px" },
children: [
{
type: "VStack",
props: { backgroundColor: "lightgrey", padding: "10px" },
children: [
{
type: "H2",
props: {
value: `#${idx + 1}: In component '${lint.componentName}':`,
color: "$color-info",
},
},
{
type: "VStack",
children: lint.lints.map(({ message }, msgIdx) => {
return {
type: "Text",
props: { value: `${idx + 1}.${msgIdx + 1}: ${message}`, fontWeight: "bold" },
};
}),
},
],
},
],
};
});
const comp: ComponentDef = {
type: "VStack",
props: { padding: "$padding-normal", gap: 0 },
children: [
{
type: "H1",
props: {
value: `Errors found while checking Xmlui markup`,
padding: "$padding-normal",
backgroundColor: "$color-error",
color: "white",
},
},
{
type: "VStack",
props: {
gap: "$gap-tight",
padding: "$padding-normal",
},
children: errList,
},
],
};
return comp;
}
return makeComponent() as ComponentDef;
}
export function lint({
component,
metadataProvider,
}: {
component: CompoundComponentDef | ComponentDef;
metadataProvider: MetadataProvider;
}): LintDiagnostic[] {
if ("component" in component) {
return lintHelp(component.component, metadataProvider, []);
}
return lintHelp(component, metadataProvider, []);
}
function lintHelp(
component: ComponentDef,
metadataProvider: MetadataProvider,
acc: LintDiagnostic[],
) {
const componentName = component.type.startsWith(CORE_NAMESPACE_VALUE)
? component.type.slice(CORE_NAMESPACE_VALUE.length + 1)
: component.type;
const componentMdProvider = metadataProvider.getComponent(componentName);
if (componentMdProvider !== null && !componentMdProvider.allowArbitraryProps) {
lintAttrs(component, componentMdProvider, acc);
}
if (!component.children) {
return acc;
}
for (const child of component.children) {
lintHelp(child, metadataProvider, acc);
}
return acc;
}
const implicitPropNames = layoutOptionKeys;
function lintAttrs(
component: ComponentDef,
metadataForCurrentComponent: ComponentMetadataProvider,
diags: LintDiagnostic[],
) {
const invalidAttrNames = Object.keys(component.props ?? {}).filter(
(name) => !metadataForCurrentComponent.getAttr(name),
);
const invalidEvents = Object.keys(component.events ?? {}).filter(
(event) => !metadataForCurrentComponent.getEvent(event),
);
const invalidApis = Object.keys(component.api ?? {}).filter(
(api) => !metadataForCurrentComponent.getApi(api),
);
invalidAttrNames.push(...invalidEvents);
invalidAttrNames.push(...invalidApis);
for (const invalidAttrName of invalidAttrNames) {
diags.push(toUnrecognisedAttrDiag(component, invalidAttrName));
}
}
function toUnrecognisedAttrDiag(component: ComponentDef, attr: string): LintDiagnostic {
return {
message: `Unrecognised property '${attr}' on component '${component.type}'.`,
kind: LintDiagKind.UnrecognisedProp,
};
}
```
--------------------------------------------------------------------------------
/docs/public/resources/files/releases.json:
--------------------------------------------------------------------------------
```json
[
{
"tag_name": "[email protected]",
"published_at": "2025-10-31T15:41:04Z",
"changes": [
{
"description": "Change validation status signature from having one dash to two dashes to better reflect that they are status modifiers. Ex. -default -> --default, -error -> --error",
"commit_sha": "e384c59"
},
{
"description": "Splitter now responds the visibility changes of its children",
"commit_sha": "f296904"
},
{
"description": "Temporarily disable the \"variant\" behavior on Button",
"commit_sha": "f296904"
},
{
"description": "fix: Select - use extractValue for controlled component value prop",
"commit_sha": "be73336"
}
],
"assets": [
{
"name": "xmlui-0.11.4.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.11.4/xmlui-0.11.4.js"
}
]
},
{
"tag_name": "[email protected]",
"published_at": "2025-10-30T12:44:56Z",
"changes": [
{
"description": "improve: charts - better domain configuration",
"commit_sha": "4a311e2"
},
{
"description": "Tiny Splitter updates",
"commit_sha": "f8a75ce"
},
{
"description": "Text strong variant style fixed",
"commit_sha": "bbc421b"
}
],
"assets": [
{
"name": "xmlui-0.11.3.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.11.3/xmlui-0.11.3.js"
}
]
},
{
"tag_name": "[email protected]",
"published_at": "2025-10-29T11:26:36Z",
"changes": [
{
"description": "update package dependencies for tsx usage",
"commit_sha": "c1f306f"
}
],
"assets": [
{
"name": "xmlui-0.11.2.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.11.2/xmlui-0.11.2.js"
}
]
},
{
"tag_name": "[email protected]",
"published_at": "2025-10-29T08:11:14Z",
"changes": [
{
"description": "Add the debounce function to globals",
"commit_sha": "7bbbb1d"
}
],
"assets": [
{
"name": "xmlui-0.11.1.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.11.1/xmlui-0.11.1.js"
}
]
},
{
"tag_name": "[email protected]",
"published_at": "2025-10-27T11:31:35Z",
"changes": [
{
"description": "Heading now accepts \"H1\"...\"H6\", \"1\"...\"6\", too. Invalid values fall back to \"h1\".",
"commit_sha": "e1b8d58"
},
{
"description": "Remove the showNavPanelIf property from AppHeader (fix NavPanel's \"when\" usage)",
"commit_sha": "1ad832c"
}
],
"assets": [
{
"name": "xmlui-0.10.26.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.10.26/xmlui-0.10.26.js"
}
]
},
{
"tag_name": "[email protected]",
"published_at": "2025-10-22T14:39:36Z",
"changes": [
{
"description": "refactor: Select - remove radix select",
"commit_sha": "e7c503e"
},
{
"description": "Fix the NavGroup click behavior in responsive view",
"commit_sha": "5fe3052"
},
{
"description": "Fix the $item access issue within a ModalDialog inside a Column",
"commit_sha": "5fe3052"
},
{
"description": "Fix the APICall becomes non-functional after first error when used with DataSource + Items + $item context issue",
"commit_sha": "250647b"
}
],
"assets": [
{
"name": "xmlui-0.10.25.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.10.25/xmlui-0.10.25.js"
}
]
},
{
"tag_name": "[email protected]",
"published_at": "2025-10-21T13:53:23Z",
"changes": [
{
"description": "The xmlui-pg codefence now accepts emojies",
"commit_sha": "3e361c4"
},
{
"description": "Exend the formatDate, formatDateTime, and formatTime functions with optional format strings",
"commit_sha": "3e361c4"
}
],
"assets": [
{
"name": "xmlui-0.10.24.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.10.24/xmlui-0.10.24.js"
}
]
},
{
"tag_name": "[email protected]",
"published_at": "2025-10-21T07:04:42Z",
"changes": [
{
"description": "Experiment with the \"variant\" behavior",
"commit_sha": "bf18444"
},
{
"description": "Form now has a willSubmit event (it can cancel the submit event)",
"commit_sha": "6d3bb89"
},
{
"description": "Fix the boolean conversion issue with showAnchor in Heading",
"commit_sha": "89c69af"
},
{
"description": "Fix loading code-behind files in standalone mode",
"commit_sha": "4cfebf0"
},
{
"description": "fix: pointer-events:none when using sibling Dialog",
"commit_sha": "145cd68"
}
],
"assets": [
{
"name": "xmlui-0.10.23.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.10.23/xmlui-0.10.23.js"
}
]
},
{
"tag_name": "[email protected]",
"published_at": "2025-10-17T06:33:28Z",
"changes": [
{
"description": "The behavior infrastructure now uses ComponentProvider and allows adding custom behaviors",
"commit_sha": "501f60a"
},
{
"description": "Extend Tab with the tabAlignment and accordionView properties",
"commit_sha": "1020f1c"
}
],
"assets": [
{
"name": "xmlui-0.10.22.js",
"browser_download_url": "https://github.com/xmlui-org/xmlui/releases/download/xmlui%400.10.22/xmlui-0.10.22.js"
}
]
}
]
```
--------------------------------------------------------------------------------
/docs/content/components/Pagination.md:
--------------------------------------------------------------------------------
```markdown
# Pagination [#pagination]
`Pagination` enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information.
## Standalone [#standalone]
If the `itemCount` property is provided, the component shows information about the number of entries shown per page, the total number of entries, as well as the current page index:
```xmlui-pg copy display
<App>
<Pagination itemCount="100" pageSize="10" />
</App>
```
If not, the [`hasPrevPage`](#hasprevpage) and [`hasNextPage`](#hasnextpage) properties can be used to control the enabled/disabled state of the previous and next buttons, while only the previous and next buttons are displayed:
```xmlui-pg copy display
<App>
<Pagination hasPrevPage="true" hasNextPage="true" />
</App>
```
## Integrations [#integrations]
### Table [#table]
`Pagination` has first-class support in the Table component. `Pagination` is controlled via the [`isPaginated`](./Table#ispaginated-default-false), [`pageSize`](./Table#pagesize), [`pageSizeOptions`](./Table#pagesizeoptions) and [`paginationControlsLocation`](./Table#paginationcontrolslocation-default-bottom) properties.
```xmlui
<Table data="/api" isPaginated pageSize="5" pageSizeOptions="{[5, 10, 20]}">
<Column header="ID" bindTo="elem" width="80px">
<!-- ... -->
</Column>
<!-- ... -->
</Table>
```
See the [Table reference](./Table#ispaginated-default-false) for a working example.
### List [#list]
The `List` is a perfect example of a component that does not implement its own pagination. Thus, use the Pagination with a Datasource component and connect them to the List:
```xmlui
<DataSource id="ds" url="/api" queryParams="{{ from: before, to: after }}" />
<Pagination
itemCount="20"
pageSize="{pageSize}"
pageIndex="{currentPage}"
onPageDidChange="(page, size, total) => {
currentPage = page;
before = page * size;
after = before + size - 1;
}"
/>
<List data="{ds}" />
```
For a comprehensive example, see [How to paginate a List](../howto/paginate-a-list).
## Properties [#properties]
### `buttonRowPosition` (default: "center") [#buttonrowposition-default-center]
Determines where to place the pagination button row in the layout.
Available values: `start`, `center` **(default)**, `end`
### `enabled` (default: true) [#enabled-default-true]
This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
### `hasNextPage` [#hasnextpage]
Whether to disable the next page button. Only takes effect if itemCount is not provided.
### `hasPrevPage` [#hasprevpage]
Whether to disable the previous page button. Only takes effect if itemCount is not provided.
### `itemCount` [#itemcount]
Total number of items to paginate. If not provided, the component renders simplified pagination controls that are enabled/disabled using the `hasPrevPage` and `hasNextPage` props.
### `maxVisiblePages` (default: 1) [#maxvisiblepages-default-1]
Maximum number of page buttons to display. If the value is not among the allowed values, it will fall back to the default.
Available values: `1` **(default)**, `3`, `5`
### `orientation` [#orientation]
Layout orientation of the pagination component
Available values:
| Value | Description |
| --- | --- |
| `horizontal` | The component will fill the available space horizontally |
| `vertical` | The component will fill the available space vertically |
### `pageIndex` (default: 0) [#pageindex-default-0]
Current page index (0-based)
### `pageInfoPosition` [#pageinfoposition]
Determines where to place the page information in the layout.
### `pageSize` (default: 10) [#pagesize-default-10]
Number of items per page
### `pageSizeOptions` [#pagesizeoptions]
Array of page sizes the user can select from. If provided, shows a page size selector dropdown
### `pageSizeSelectorPosition` [#pagesizeselectorposition]
Determines where to place the page size selector in the layout.
### `showCurrentPage` (default: true) [#showcurrentpage-default-true]
Whether to show the current page indicator
### `showPageInfo` (default: true) [#showpageinfo-default-true]
Whether to show page information
### `showPageSizeSelector` (default: true) [#showpagesizeselector-default-true]
Whether to show the page size selector
## Events [#events]
### `pageDidChange` [#pagedidchange]
Fired when the current page changes
### `pageSizeDidChange` [#pagesizedidchange]
Fired when the page size changes
## Exposed Methods [#exposed-methods]
### `currentPage` [#currentpage]
Gets the current page number (1-based)
### `currentPageSize` [#currentpagesize]
Gets the current page size
### `moveFirst` [#movefirst]
Moves to the first page
**Signature**: `moveFirst(): void`
### `moveLast` [#movelast]
Moves to the last page
**Signature**: `moveLast(): void`
### `moveNext` [#movenext]
Moves to the next page
**Signature**: `moveNext(): void`
### `movePrev` [#moveprev]
Moves to the previous page
**Signature**: `movePrev(): void`
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Pagination | transparent | transparent |
| [backgroundColor](../styles-and-themes/common-units/#color)-selector-Pagination | transparent | transparent |
| [borderColor](../styles-and-themes/common-units/#color)-Pagination | $color-gray-300 | $color-gray-300 |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-selector-Pagination | $borderRadius | $borderRadius |
| [gap](../styles-and-themes/common-units/#size)-buttonRow-Pagination | $space-2 | $space-2 |
| [padding](../styles-and-themes/common-units/#size)-Pagination | $space-4 | $space-4 |
| [textColor](../styles-and-themes/common-units/#color)-Pagination | $color-gray-600 | $color-gray-600 |
| [textColor](../styles-and-themes/common-units/#color)-selector-Pagination | $color-gray-600 | $color-gray-600 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/ColorPicker/ColorPicker.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: "ColorPicker";
// Variables for default variant
$borderRadius-ColorPicker--default: createThemeVar("Input:borderRadius-#{$componentName}--default");
$borderColor-ColorPicker--default: createThemeVar("Input:borderColor-#{$componentName}--default");
$borderWidth-ColorPicker--default: createThemeVar("Input:borderWidth-#{$componentName}--default");
$borderStyle-ColorPicker--default: createThemeVar("Input:borderStyle-#{$componentName}--default");
$boxShadow-ColorPicker--default: createThemeVar("Input:boxShadow-#{$componentName}--default");
$borderColor-ColorPicker--default--hover: createThemeVar("Input:borderColor-#{$componentName}--default--hover");
$boxShadow-ColorPicker--default--hover: createThemeVar("Input:boxShadow-#{$componentName}--default--hover");
$borderColor-ColorPicker--default--focus: createThemeVar("Input:borderColor-#{$componentName}--default--focus");
$boxShadow-ColorPicker--default--focus: createThemeVar("Input:boxShadow-#{$componentName}--default--focus");
// Variables for error variant
$borderRadius-ColorPicker--error: createThemeVar("Input:borderRadius-#{$componentName}--error");
$borderColor-ColorPicker--error: createThemeVar("Input:borderColor-#{$componentName}--error");
$borderWidth-ColorPicker--error: createThemeVar("Input:borderWidth-#{$componentName}--error");
$borderStyle-ColorPicker--error: createThemeVar("Input:borderStyle-#{$componentName}--error");
$boxShadow-ColorPicker--error: createThemeVar("Input:boxShadow-#{$componentName}--error");
$borderColor-ColorPicker--error--hover: createThemeVar("Input:borderColor-#{$componentName}--error--hover");
$boxShadow-ColorPicker--error--hover: createThemeVar("Input:boxShadow-#{$componentName}--error--hover");
$borderColor-ColorPicker--error--focus: createThemeVar("Input:borderColor-#{$componentName}--error--focus");
$boxShadow-ColorPicker--error--focus: createThemeVar("Input:boxShadow-#{$componentName}--error--focus");
// Variables for warning variant
$borderRadius-ColorPicker--warning: createThemeVar("Input:borderRadius-#{$componentName}--warning");
$borderColor-ColorPicker--warning: createThemeVar("Input:borderColor-#{$componentName}--warning");
$borderWidth-ColorPicker--warning: createThemeVar("Input:borderWidth-#{$componentName}--warning");
$borderStyle-ColorPicker--warning: createThemeVar("Input:borderStyle-#{$componentName}--warning");
$boxShadow-ColorPicker--warning: createThemeVar("Input:boxShadow-#{$componentName}--warning");
$borderColor-ColorPicker--warning--hover: createThemeVar("Input:borderColor-#{$componentName}--warning--hover");
$boxShadow-ColorPicker--warning--hover: createThemeVar("Input:boxShadow-#{$componentName}--warning--hover");
$borderColor-ColorPicker--warning--focus: createThemeVar("Input:borderColor-#{$componentName}--warning--focus");
$boxShadow-ColorPicker--warning--focus: createThemeVar("Input:boxShadow-#{$componentName}--warning--focus");
// Variables for success variant
$borderRadius-ColorPicker--success: createThemeVar("Input:borderRadius-#{$componentName}--success");
$borderColor-ColorPicker--success: createThemeVar("Input:borderColor-#{$componentName}--success");
$borderWidth-ColorPicker--success: createThemeVar("Input:borderWidth-#{$componentName}--success");
$borderStyle-ColorPicker--success: createThemeVar("Input:borderStyle-#{$componentName}--success");
$boxShadow-ColorPicker--success: createThemeVar("Input:boxShadow-#{$componentName}--success");
$borderColor-ColorPicker--success--hover: createThemeVar("Input:borderColor-#{$componentName}--success--hover");
$boxShadow-ColorPicker--success--hover: createThemeVar("Input:boxShadow-#{$componentName}--success--hover");
$borderColor-ColorPicker--success--focus: createThemeVar("Input:borderColor-#{$componentName}--success--focus");
$boxShadow-ColorPicker--success--focus: createThemeVar("Input:boxShadow-#{$componentName}--success--focus");
// Variables for @layer section
$backgroundColor-ColorPicker: createThemeVar("Input:backgroundColor-#{$componentName}");
@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}");
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}");
&:not([readonly]):hover {
border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}--hover");
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}--hover");
}
&:focus {
border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}--focus");
box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}--focus");
}
}
@layer components {
.colorInput {
width: 100%;
background-color: $backgroundColor-ColorPicker;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 2px;
&:not([readonly]) {
cursor: pointer;
}
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
@include variant("default");
&.error {
@include variant("error");
}
&.warning {
@include variant("warning");
}
&.valid {
@include variant("success");
}
&:before,
&:after {
display: none;
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```