This is page 57 of 188. Use http://codebase.md/xmlui-org/xmlui/xmlui/mockApiDef.js?lines=true&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
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── 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-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── 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
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ ├── ContentSeparatorNative.tsx
│ │ │ └── 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
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/syntax/textMate/xmlui.tmLanguage.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "name": "xmlui",
3 | "scopeName": "source.xmlui",
4 | "patterns": [{ "include": "#root" }],
5 | "repository": {
6 | "root": {
7 | "patterns": [
8 | { "include": "#comments" },
9 | { "include": "#helperTag" },
10 | { "include": "#componentTag" },
11 | { "include": "#entity" },
12 | { "include": "#textWithBindingExpr" },
13 | {
14 | "begin": "(<!\\[)(CDATA)(\\[)",
15 | "beginCaptures": {
16 | "1": { "name": "punctuation.definition.tag.xmlui" },
17 | "2": { "name": "storage.xmlui" },
18 | "3": { "name": "punctuation.definition.tag.xmlui" }
19 | },
20 | "end": "]]>",
21 | "endCaptures": {
22 | "0": { "name": "punctuation.definition.tag.xmlui" }
23 | },
24 | "contentName": "string.unquoted.cdata.xmlui"
25 | }
26 | ]
27 | },
28 | "methodTag": {
29 | "begin": "(<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(method)",
30 | "beginCaptures": {
31 | "1": { "name": "punctuation.definition.tag.xmlui" },
32 | "2": { "name": "keyword.operator.namespace.xmlui" },
33 | "3": { "name": "entity.name.tag.localname.xmlui" }
34 | },
35 | "endCaptures": {
36 | "0": { "name": "punctuation.definition.tag.xmlui" }
37 | },
38 | "applyEndPatternLast": "1",
39 | "patterns": [
40 | { "include": "#comments" },
41 | { "include": "#valueAttributeScriptInside" },
42 | { "include": "#attribute" },
43 | {
44 | "begin": "(?<!/|(?:/\\s*(?:method))\\s*)>",
45 | "beginCaptures": {
46 | "0": {
47 | "name": "punctuation.definition.tag.xmlui"
48 | }
49 | },
50 | "endCaptures": {
51 | "1": { "name": "punctuation.definition.tag.xmlui" },
52 | "2": { "name": "keyword.operator.namespace.xmlui" },
53 | "3": { "name": "entity.name.tag.localname.xmlui" }
54 | },
55 | "contentName": "meta.embedded.block.javascript",
56 | "patterns": [{ "include": "source.js" }],
57 | "end": "(</)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(method)(?=\\s*>)"
58 | }
59 | ],
60 | "end": "/?>"
61 | },
62 | "eventTag": {
63 | "begin": "(<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(event)",
64 | "beginCaptures": {
65 | "1": { "name": "punctuation.definition.tag.xmlui" },
66 | "2": { "name": "keyword.operator.namespace.xmlui" },
67 | "3": { "name": "entity.name.tag.localname.xmlui" }
68 | },
69 | "endCaptures": {
70 | "0": { "name": "punctuation.definition.tag.xmlui" }
71 | },
72 | "applyEndPatternLast": "1",
73 | "patterns": [
74 | { "include": "#comments" },
75 | { "include": "#valueAttributeScriptInside" },
76 | { "include": "#attribute" },
77 | {
78 | "begin": "(?<!/|(?:/\\s*event)\\s*)(>)",
79 | "beginCaptures": {
80 | "0": {
81 | "name": "punctuation.definition.tag.xmlui"
82 | }
83 | },
84 | "endCaptures": {
85 | "1": { "name": "punctuation.definition.tag.xmlui" },
86 | "2": { "name": "keyword.operator.namespace.xmlui" },
87 | "3": { "name": "entity.name.tag.localname.xmlui" }
88 | },
89 | "patterns": [
90 | { "include": "#comments" },
91 | { "include": "#componentTag" },
92 | { "include": "source.js" }
93 | ],
94 | "end": "(</)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(event)(?=\\s*>)"
95 | }
96 | ],
97 | "end": ">"
98 | },
99 | "fieldTag": {
100 | "begin": "(<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(field)",
101 | "beginCaptures": {
102 | "1": { "name": "punctuation.definition.tag.xmlui" },
103 | "2": { "name": "keyword.operator.namespace.xmlui" },
104 | "3": { "name": "entity.name.tag.localname.xmlui" }
105 | },
106 | "endCaptures": {
107 | "0": { "name": "punctuation.definition.tag.xmlui" }
108 | },
109 | "applyEndPatternLast": "1",
110 | "patterns": [
111 | { "include": "#comments" },
112 | { "include": "#valueAttributeScriptInside" },
113 | { "include": "#attribute" },
114 | {
115 | "begin": "(?<!/|(?:/\\s*field)\\s*)(>)",
116 | "beginCaptures": {
117 | "0": {
118 | "name": "punctuation.definition.tag.xmlui"
119 | }
120 | },
121 | "endCaptures": {
122 | "1": { "name": "punctuation.definition.tag.xmlui" },
123 | "2": { "name": "keyword.operator.namespace.xmlui" },
124 | "3": { "name": "entity.name.tag.localname.xmlui" }
125 | },
126 | "patterns": [
127 | { "include": "#comments" },
128 | { "include": "#componentTag" },
129 | { "include": "source.js" }
130 | ],
131 | "end": "(</)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(field)(?=\\s*>)"
132 | }
133 | ],
134 | "end": ">"
135 | },
136 | "itemTag": {
137 | "begin": "(<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(item)",
138 | "beginCaptures": {
139 | "1": { "name": "punctuation.definition.tag.xmlui" },
140 | "2": { "name": "keyword.operator.namespace.xmlui" },
141 | "3": { "name": "entity.name.tag.localname.xmlui" }
142 | },
143 | "endCaptures": {
144 | "0": { "name": "punctuation.definition.tag.xmlui" }
145 | },
146 | "applyEndPatternLast": "1",
147 | "patterns": [
148 | { "include": "#comments" },
149 | { "include": "#valueAttributeScriptInside" },
150 | { "include": "#attribute" },
151 | {
152 | "begin": "(?<!/|(?:/\\s*item)\\s*)(>)",
153 | "beginCaptures": {
154 | "0": {
155 | "name": "punctuation.definition.tag.xmlui"
156 | }
157 | },
158 | "endCaptures": {
159 | "1": { "name": "punctuation.definition.tag.xmlui" },
160 | "2": { "name": "keyword.operator.namespace.xmlui" },
161 | "3": { "name": "entity.name.tag.localname.xmlui" }
162 | },
163 | "patterns": [
164 | { "include": "#comments" },
165 | { "include": "#componentTag" },
166 | { "include": "source.js" }
167 | ],
168 | "end": "(</)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(item)(?=\\s*>)"
169 | }
170 | ],
171 | "end": ">"
172 | },
173 | "bindingExpr": {
174 | "contentName": "meta.embedded.block.javascript",
175 | "begin": "\\{",
176 | "end": "\\}",
177 | "beginCaptures": {
178 | "0": { "name": "entity.name.function.xmlui punctuation.definition.block.xmlui" }
179 | },
180 | "endCaptures": {
181 | "0": { "name": "entity.name.function.xmlui punctuation.definition.block.xmlui" }
182 | },
183 | "patterns": [{ "include": "source.js" }]
184 | },
185 | "helperTag": {
186 | "patterns": [
187 | { "include": "#scriptTag" },
188 | { "include": "#eventTag" },
189 | { "include": "#fieldTag" },
190 | { "include": "#itemTag" },
191 | { "include": "#methodTag" },
192 | { "include": "#propOrVarTag" }
193 | ]
194 | },
195 | "valueAttributeScriptInside": {
196 | "patterns": [
197 | {
198 | "captures": {
199 | "1": { "name": "entity.other.attribute-name.localname.xmlui" },
200 | "2": { "name": "keyword.operator.xmlui" }
201 | },
202 | "match": "(?:^|\\s+)(value)(\\s*=)"
203 | },
204 | { "include": "#quotedStringJsInside" }
205 | ]
206 | },
207 | "scriptTag": {
208 | "begin": "(\\s*<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(script)(\\s*>)",
209 | "end": "(\\s*</)(\\2)(\\3)(\\s*>)",
210 | "contentName": "meta.embedded.block.javascript",
211 | "beginCaptures": {
212 | "1": { "name": "punctuation.definition.tag.xmlui" },
213 | "2": { "name": "keyword.operator.namespace.xmlui" },
214 | "3": { "name": "entity.name.function.xmlui" },
215 | "4": { "name": "punctuation.definition.tag.xmlui" }
216 | },
217 | "endCaptures": {
218 | "1": { "name": "punctuation.definition.tag.xmlui" },
219 | "2": { "name": "keyword.operator.namespace.xmlui" },
220 | "3": { "name": "entity.name.function.xmlui" },
221 | "4": { "name": "punctuation.definition.tag.xmlui" }
222 | },
223 | "patterns": [{ "include": "source.js" }]
224 | },
225 | "textWithBindingExpr": {
226 | "patterns": [{ "include": "#entity" }, { "match": "\\\\{" }, { "include": "#bindingExpr" }]
227 | },
228 | "propOrVarTag": {
229 | "begin": "(</?)([a-zA-Z_][\\w\\.\\-]*?:)?((?:variable)|(?:property)|(?:prop))",
230 | "beginCaptures": {
231 | "1": { "name": "punctuation.definition.tag.xmlui" },
232 | "2": { "name": "keyword.operator.namespace.xmlui" },
233 | "3": { "name": "entity.name.tag.localname.xmlui" }
234 | },
235 | "end": "(/?>)",
236 | "endCaptures": {
237 | "1": { "name": "punctuation.definition.tag.xmlui" }
238 | },
239 | "patterns": [{ "include": "#attribute" }, { "include": "#comments" }]
240 | },
241 | "componentTag": {
242 | "begin": "(\\s*</?)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)([a-zA-Z][\\w\\.\\-]*)",
243 | "beginCaptures": {
244 | "1": { "name": "punctuation.definition.tag.xmlui" },
245 | "2": { "name": "keyword.operator.namespace.xmlui" },
246 | "3": { "name": "support.class.tag.component.xmlui" }
247 | },
248 | "end": "(/?>)",
249 | "endCaptures": {
250 | "1": { "name": "punctuation.definition.tag.xmlui" }
251 | },
252 | "patterns": [
253 | { "include": "#comments" },
254 | { "include": "#eventHandler" },
255 | { "include": "#attribute" }
256 | ]
257 | },
258 | "quotedStringJsInside": {
259 | "begin": "\"|'|`",
260 | "beginCaptures": {
261 | "0": { "name": "string.xmlui" }
262 | },
263 | "end": "\\0",
264 | "endCaptures": {
265 | "0": { "name": "string.xmlui" }
266 | },
267 | "contentName": "meta.embedded.block.javascript",
268 | "patterns": [{ "include": "source.js" }]
269 | },
270 | "entity": {
271 | "captures": {
272 | "1": { "name": "punctuation.definition.constant.xmlui" },
273 | "2": { "name": "punctuation.definition.constant.xmlui" },
274 | "3": { "name": "punctuation.definition.constant.xmlui" }
275 | },
276 | "match": "(&)((?:amp)|(?:lt)|(?:gt)|(?:quot)|(?:apos))(;)"
277 | },
278 | "eventHandler": {
279 | "patterns": [
280 | {
281 | "captures": {
282 | "1": { "name": "entity.other.attribute-name.localname.xmlui" },
283 | "2": { "name": "keyword.operator.xmlui" }
284 | },
285 | "match": "(?:^|\\s+)(on[A-Z][-\\w.:$]*)(\\s*=)"
286 | },
287 | { "include": "#quotedStringJsInside" }
288 | ]
289 | },
290 | "attribute": {
291 | "patterns": [
292 | {
293 | "begin": "(?:^|\\s+)((?:[a-zA-Z$_][-\\w.$]*:)?)([a-zA-Z$_][-\\w.$]*)(\\s*=\\s*)(['\"`])",
294 | "end": "\\4",
295 | "beginCaptures": {
296 | "1": { "name": "keyword.operator.namespace.xmlui" },
297 | "2": { "name": "entity.other.attribute-name.localname.xmlui" },
298 | "3": { "name": "keyword.operator.xmlui" },
299 | "4": { "name": "string.xmlui" }
300 | },
301 | "endCaptures": {
302 | "0": { "name": "string.xmlui" }
303 | },
304 | "contentName": "string.xmlui",
305 | "patterns": [{ "include": "#textWithBindingExpr" }]
306 | },
307 | {
308 | "match": "(?:^|\\s+)((?:[a-zA-Z$_][-\\w.$]*:)?)([a-zA-Z$_][-\\w.$]*)(\\s*=\\s*)([a-zA-Z$_][-\\w.$]*)",
309 | "captures": {
310 | "1": { "name": "keyword.operator.namespace.xmlui" },
311 | "2": { "name": "entity.other.attribute-name.localname.xmlui" },
312 | "3": { "name": "keyword.operator.xmlui" },
313 | "4": { "name": "string.xmlui" }
314 | }
315 | },
316 | {
317 | "match": "(?:^|\\s+)((?:[a-zA-Z$_][-\\w.$]*:)?)([a-zA-Z$_][-\\w.$]*)",
318 | "name": "entity.other.attribute-name.localname.xmlui",
319 | "captures": {
320 | "1": { "name": "keyword.operator.namespace.xmlui" },
321 | "2": { "name": "entity.other.attribute-name.localname.xmlui" }
322 | }
323 | }
324 | ]
325 | },
326 | "comments": {
327 | "patterns": [
328 | {
329 | "begin": "<!--",
330 | "captures": {
331 | "0": {
332 | "name": "punctuation.definition.comment.xmlui"
333 | }
334 | },
335 | "end": "-->",
336 | "name": "comment.block.xmlui"
337 | }
338 | ]
339 | }
340 | }
341 | }
342 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/collectedComponentMetadata.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { ButtonMd } from "./Button/Button";
2 | import { CHStackMd, CVStackMd, HStackMd, StackMd, VStackMd } from "./Stack/Stack";
3 | import { PasswordMd, TextBoxMd } from "./TextBox/TextBox";
4 | import { ThemeMd } from "./Theme/Theme";
5 | import { AppMd } from "./App/App";
6 | import { AppHeaderMd } from "./AppHeader/AppHeader";
7 | import { AppStateMd } from "./AppState/AppState";
8 | import { AvatarMd } from "./Avatar/Avatar";
9 | import { BadgeMd } from "./Badge/Badge";
10 | import { BookmarkMd } from "./Bookmark/Bookmark";
11 | import { CardMd } from "./Card/Card";
12 | import { ChangeListenerMd } from "./ChangeListener/ChangeListener";
13 | import { CheckboxMd } from "./Checkbox/Checkbox";
14 | import { ContentSeparatorMd } from "./ContentSeparator/ContentSeparator";
15 | import { DatePickerMd } from "./DatePicker/DatePicker";
16 | import {
17 | DropdownMenuMd,
18 | MenuItemMd,
19 | MenuSeparatorMd,
20 | SubMenuItemMd,
21 | } from "./DropdownMenu/DropdownMenu";
22 | import { EmojiSelectorMd } from "./EmojiSelector/EmojiSelector";
23 | import { FileInputMd } from "./FileInput/FileInput";
24 | import { FileUploadDropZoneMd } from "./FileUploadDropZone/FileUploadDropZone";
25 | import { FlowLayoutMd } from "./FlowLayout/FlowLayout";
26 | import { FooterMd } from "./Footer/Footer";
27 | import { FormMd } from "./Form/Form";
28 | import { FormItemMd } from "./FormItem/FormItem";
29 | import { H1Md, H2Md, H3Md, H4Md, H5Md, H6Md, HeadingMd } from "./Heading/Heading";
30 | import { HoverCardMd } from "./HoverCard/HoverCard";
31 | import { IconMd } from "./Icon/Icon";
32 | import { IFrameMd } from "./IFrame/IFrame";
33 | import { ImageMd } from "./Image/Image";
34 | import { ItemsMd } from "./Items/Items";
35 | import { LinkMd } from "./Link/Link";
36 | import { ListMd } from "./List/List";
37 | import { LogoMd } from "./Logo/Logo";
38 | import { MarkdownMd } from "./Markdown/Markdown";
39 | import { ModalDialogMd } from "./ModalDialog/ModalDialog";
40 | import { NavGroupMd } from "./NavGroup/NavGroup";
41 | import { NavLinkMd } from "./NavLink/NavLink";
42 | import { NavPanelMd } from "./NavPanel/NavPanel";
43 | import { NoResultMd } from "./NoResult/NoResult";
44 | import { NumberBoxMd } from "./NumberBox/NumberBox";
45 | import { PageMetaTitleMd } from "./PageMetaTitle/PageMetaTitle";
46 | import { PageMd, PagesMd } from "./Pages/Pages";
47 | import { PositionedContainerMd } from "./PositionedContainer/PositionedContainer";
48 | import { ProgressBarMd } from "./ProgressBar/ProgressBar";
49 | import { QueueMd } from "./Queue/Queue";
50 | import { RadioGroupMd } from "./RadioGroup/RadioGroup";
51 | import { RealTimeAdapterMd } from "./RealTimeAdapter/RealTimeAdapter";
52 | import { RedirectMd } from "./Redirect/Redirect";
53 | import { SelectMd } from "./Select/Select";
54 | import { SelectionStoreMd } from "./SelectionStore/SelectionStore";
55 | import { SpaceFillerMd } from "./SpaceFiller/SpaceFiller";
56 | import { SpinnerMd } from "./Spinner/Spinner";
57 | import { HSplitterMd, SplitterMd, VSplitterMd } from "./Splitter/Splitter";
58 | import { StickyBoxMd } from "./StickyBox/StickyBox";
59 | import { SwitchMd } from "./Switch/Switch";
60 | import { TableMd } from "./Table/Table";
61 | import { ColumnMd } from "./Column/Column";
62 | import { TableOfContentsMd } from "./TableOfContents/TableOfContents";
63 | import { TabsMd } from "./Tabs/Tabs";
64 | import { TextMd } from "./Text/Text";
65 | import { TextAreaMd } from "./TextArea/TextArea";
66 | import { AccordionMd } from "./Accordion/Accordion";
67 | import { TabItemMd } from "./Tabs/TabItem";
68 | import { FragmentMd } from "./Fragment/Fragment";
69 | import { TreeMd } from "./Tree/TreeComponent";
70 | import { APICallMd } from "./APICall/APICall";
71 | import { DataSourceMd } from "./DataSource/DataSource";
72 | import { FormSectionMd } from "./FormSection/FormSection";
73 | import { BreakoutMd } from "./Breakout/Breakout";
74 | import { CarouselMd } from "./Carousel/Carousel";
75 | import { ToneChangerButtonMd } from "./ToneChangerButton/ToneChangerButton";
76 | import { ToneSwitchMd } from "./ToneSwitch/ToneSwitch";
77 | import { OptionMd } from "./Option/Option";
78 | import { AutoCompleteMd } from "./AutoComplete/AutoComplete";
79 | import { BackdropMd } from "./Backdrop/Backdrop";
80 | import {
81 | HtmlAddressMd,
82 | HtmlAMd,
83 | HtmlAreaMd,
84 | HtmlArticleMd,
85 | HtmlAsideMd,
86 | HtmlAudioMd,
87 | HtmlBdiMd,
88 | HtmlBdoMd,
89 | HtmlBlockquoteMd,
90 | HtmlBMd,
91 | HtmlBrMd,
92 | HtmlButtonMd,
93 | HtmlCanvasMd,
94 | HtmlCaptionMd,
95 | HtmlCiteMd,
96 | HtmlCodeMd,
97 | HtmlColgroupMd,
98 | HtmlColMd,
99 | HtmlDatalistMd,
100 | HtmlDataMd,
101 | HtmlDdMd,
102 | HtmlDelMd,
103 | HtmlDetailsMd,
104 | HtmlDfnMd,
105 | HtmlDialogMd,
106 | HtmlDivMd,
107 | HtmlDlMd,
108 | HtmlDtMd,
109 | HtmlEmbedMd,
110 | HtmlEMMd,
111 | HtmlFieldsetMd,
112 | HtmlFigcaptionMd,
113 | HtmlFigureMd,
114 | HtmlFooterMd,
115 | HtmlFormMd,
116 | HtmlH1Md,
117 | HtmlH2Md,
118 | HtmlH3Md,
119 | HtmlH4Md,
120 | HtmlH5Md,
121 | HtmlH6Md,
122 | HtmlHeaderMd,
123 | HtmlHrMd,
124 | HtmlIframeMd,
125 | HtmlIMd,
126 | HtmlImgMd,
127 | HtmlInputMd,
128 | HtmlInsMd,
129 | HtmlKbdMd,
130 | HtmlLabelMd,
131 | HtmlLegendMd,
132 | HtmlLiMd,
133 | HtmlMainMd,
134 | HtmlMapMd,
135 | HtmlMarkMd,
136 | HtmlMenuMd,
137 | HtmlMeterMd,
138 | HtmlNavMd,
139 | HtmlObjectMd,
140 | HtmlOlMd,
141 | HtmlOptgroupMd,
142 | HtmlOptionMd,
143 | HtmlOutputMd,
144 | HtmlParamMd,
145 | HtmlPictureMd,
146 | HtmlPMd,
147 | HtmlPreMd,
148 | HtmlProgressMd,
149 | HtmlQMd,
150 | HtmlRpMd,
151 | HtmlRtMd,
152 | HtmlRubyMd,
153 | HtmlSampMd,
154 | HtmlSectionMd,
155 | HtmlSelectMd,
156 | HtmlSmallMd,
157 | HtmlSMd,
158 | HtmlSourceMd,
159 | HtmlSpanMd,
160 | HtmlStrongMd,
161 | HtmlSubMd,
162 | HtmlSummaryMd,
163 | HtmlSupMd,
164 | HtmlTableMd,
165 | HtmlTbodyMd,
166 | HtmlTdMd,
167 | HtmlTemplateMd,
168 | HtmlTextareaMd,
169 | HtmlTfootMd,
170 | HtmlTheadMd,
171 | HtmlThMd,
172 | HtmlTimeMd,
173 | HtmlTrackMd,
174 | HtmlTrMd,
175 | HtmlUlMd,
176 | HtmlUMd,
177 | HtmlVideoMd,
178 | HtmlVarMd,
179 | HtmlWbrMd,
180 | } from "./HtmlTags/HtmlTags";
181 | import { SliderMd } from "./Slider/Slider";
182 | import { ColorPickerMd } from "./ColorPicker/ColorPicker";
183 |
184 | import type { ThemeDefinition } from "../abstractions/ThemingDefs";
185 | import { RootThemeDefinition } from "../components-core/theming/themes/root";
186 | import {
187 | XmlUiCyanThemeDefinition,
188 | XmlUiGrayThemeDefinition,
189 | XmlUiGreenThemeDefinition,
190 | XmlUiOrangeThemeDefinition,
191 | XmlUiPurpleThemeDefinition,
192 | XmlUiRedThemeDefinition,
193 | XmlUiThemeDefinition,
194 | } from "../components-core/theming/themes/xmlui";
195 | import { BarChartMd } from "./Charts/BarChart/BarChart";
196 | import { DonutChartMd } from "./Charts/DonutChart/DonutChart";
197 | import { LabelListMd } from "./Charts/LabelList/LabelList";
198 | import { LegendMd } from "./Charts/Legend/Legend";
199 | import { LineChartMd } from "./Charts/LineChart/LineChart";
200 | import { PieChartMd } from "./Charts/PieChart/PieChart";
201 | import { ExpandableItemMd } from "./ExpandableItem/ExpandableItem";
202 | import { SlotMd } from "./Slot/Slot";
203 | import { TooltipMd } from "./Tooltip/Tooltip";
204 | import { TimeInputMd } from "./TimeInput/TimeInput";
205 | import { TimerMd } from "./Timer/Timer";
206 | import { DateInputMd } from "./DateInput/DateInput";
207 | import { PaginationMd } from "./Pagination/Pagination";
208 |
209 | export const collectedComponentMetadata = {
210 | // --- HTML tags
211 | a: HtmlAMd,
212 | address: HtmlAddressMd,
213 | area: HtmlAreaMd,
214 | article: HtmlArticleMd,
215 | aside: HtmlAsideMd,
216 | audio: HtmlAudioMd,
217 | b: HtmlBMd,
218 | bdi: HtmlBdiMd,
219 | bdo: HtmlBdoMd,
220 | blockquote: HtmlBlockquoteMd,
221 | br: HtmlBrMd,
222 | button: HtmlButtonMd,
223 | canvas: HtmlCanvasMd,
224 | caption: HtmlCaptionMd,
225 | cite: HtmlCiteMd,
226 | code: HtmlCodeMd,
227 | col: HtmlColMd,
228 | colgroup: HtmlColgroupMd,
229 | data: HtmlDataMd,
230 | datalist: HtmlDatalistMd,
231 | dd: HtmlDdMd,
232 | del: HtmlDelMd,
233 | details: HtmlDetailsMd,
234 | dfn: HtmlDfnMd,
235 | dialog: HtmlDialogMd,
236 | div: HtmlDivMd,
237 | dl: HtmlDlMd,
238 | dt: HtmlDtMd,
239 | em: HtmlEMMd,
240 | embed: HtmlEmbedMd,
241 | fieldset: HtmlFieldsetMd,
242 | figcaption: HtmlFigcaptionMd,
243 | figure: HtmlFigureMd,
244 | footer: HtmlFooterMd,
245 | form: HtmlFormMd,
246 | h1: HtmlH1Md,
247 | h2: HtmlH2Md,
248 | h3: HtmlH3Md,
249 | h4: HtmlH4Md,
250 | h5: HtmlH5Md,
251 | h6: HtmlH6Md,
252 | header: HtmlHeaderMd,
253 | hr: HtmlHrMd,
254 | i: HtmlIMd,
255 | iframe: HtmlIframeMd,
256 | img: HtmlImgMd,
257 | input: HtmlInputMd,
258 | ins: HtmlInsMd,
259 | kbd: HtmlKbdMd,
260 | label: HtmlLabelMd,
261 | legend: HtmlLegendMd,
262 | li: HtmlLiMd,
263 | main: HtmlMainMd,
264 | map: HtmlMapMd,
265 | mark: HtmlMarkMd,
266 | menu: HtmlMenuMd,
267 | meter: HtmlMeterMd,
268 | nav: HtmlNavMd,
269 | object: HtmlObjectMd,
270 | ol: HtmlOlMd,
271 | optgroup: HtmlOptgroupMd,
272 | option: HtmlOptionMd,
273 | output: HtmlOutputMd,
274 | p: HtmlPMd,
275 | param: HtmlParamMd,
276 | picture: HtmlPictureMd,
277 | pre: HtmlPreMd,
278 | progress: HtmlProgressMd,
279 | q: HtmlQMd,
280 | rp: HtmlRpMd,
281 | rt: HtmlRtMd,
282 | ruby: HtmlRubyMd,
283 | s: HtmlSMd,
284 | samp: HtmlSampMd,
285 | section: HtmlSectionMd,
286 | select: HtmlSelectMd,
287 | small: HtmlSmallMd,
288 | source: HtmlSourceMd,
289 | span: HtmlSpanMd,
290 | strong: HtmlStrongMd,
291 | sub: HtmlSubMd,
292 | summary: HtmlSummaryMd,
293 | sup: HtmlSupMd,
294 | table: HtmlTableMd,
295 | tbody: HtmlTbodyMd,
296 | td: HtmlTdMd,
297 | template: HtmlTemplateMd,
298 | textarea: HtmlTextareaMd,
299 | tfoot: HtmlTfootMd,
300 | th: HtmlThMd,
301 | thead: HtmlTheadMd,
302 | time: HtmlTimeMd,
303 | tr: HtmlTrMd,
304 | track: HtmlTrackMd,
305 | u: HtmlUMd,
306 | ul: HtmlUlMd,
307 | var: HtmlVarMd,
308 | video: HtmlVideoMd,
309 | wbr: HtmlWbrMd,
310 | // --- Heavy xmlui components
311 | Accordion: AccordionMd,
312 | APICall: APICallMd,
313 | App: AppMd,
314 | AppHeader: AppHeaderMd,
315 | AppState: AppStateMd,
316 | AutoComplete: AutoCompleteMd,
317 | Avatar: AvatarMd,
318 | Backdrop: BackdropMd,
319 | Badge: BadgeMd,
320 | Bookmark: BookmarkMd,
321 | Breakout: BreakoutMd,
322 | Button: ButtonMd,
323 | Card: CardMd,
324 | Carousel: CarouselMd,
325 | ChangeListener: ChangeListenerMd,
326 | Checkbox: CheckboxMd,
327 | CODE: HtmlCodeMd,
328 | ColorPicker: ColorPickerMd,
329 | Column: ColumnMd,
330 | ContentSeparator: ContentSeparatorMd,
331 | DataSource: DataSourceMd,
332 | DatePicker: DatePickerMd,
333 | DateInput: DateInputMd,
334 | DropdownMenu: DropdownMenuMd,
335 | EM: HtmlEMMd,
336 | Fragment: FragmentMd,
337 | MenuItem: MenuItemMd,
338 | SubMenuItem: SubMenuItemMd,
339 | EmojiSelector: EmojiSelectorMd,
340 | ExpandableItem: ExpandableItemMd,
341 | FileInput: FileInputMd,
342 | FileUploadDropZone: FileUploadDropZoneMd,
343 | FlowLayout: FlowLayoutMd,
344 | Footer: FooterMd,
345 | Form: FormMd,
346 | FormItem: FormItemMd,
347 | FormSection: FormSectionMd,
348 | Heading: HeadingMd,
349 | H1: H1Md,
350 | H2: H2Md,
351 | H3: H3Md,
352 | H4: H4Md,
353 | H5: H5Md,
354 | H6: H6Md,
355 | HoverCard: HoverCardMd,
356 | Icon: IconMd,
357 | IFrame: IFrameMd,
358 | Image: ImageMd,
359 | Items: ItemsMd,
360 | Link: LinkMd,
361 | List: ListMd,
362 | Logo: LogoMd,
363 | Markdown: MarkdownMd,
364 | MenuSeparator: MenuSeparatorMd,
365 | ModalDialog: ModalDialogMd,
366 | NavGroup: NavGroupMd,
367 | NavLink: NavLinkMd,
368 | NavPanel: NavPanelMd,
369 | NoResult: NoResultMd,
370 | NumberBox: NumberBoxMd,
371 | Option: OptionMd,
372 | PageMetaTitle: PageMetaTitleMd,
373 | Page: PageMd,
374 | Pages: PagesMd,
375 | Pagination: PaginationMd,
376 | PositionedContainer: PositionedContainerMd,
377 | ProgressBar: ProgressBarMd,
378 | Queue: QueueMd,
379 | RadioGroup: RadioGroupMd,
380 | RealTimeAdapter: RealTimeAdapterMd,
381 | Redirect: RedirectMd,
382 | Select: SelectMd,
383 | SelectionStore: SelectionStoreMd,
384 | Slider: SliderMd,
385 | Slot: SlotMd,
386 | SpaceFiller: SpaceFillerMd,
387 | Spinner: SpinnerMd,
388 | Splitter: SplitterMd,
389 | Tooltip: TooltipMd,
390 | HSplitter: HSplitterMd,
391 | VSplitter: VSplitterMd,
392 | Stack: StackMd,
393 | CHStack: CHStackMd,
394 | CVStack: CVStackMd,
395 | HStack: HStackMd,
396 | VStack: VStackMd,
397 | StickyBox: StickyBoxMd,
398 | Switch: SwitchMd,
399 | Table: TableMd,
400 | TableOfContents: TableOfContentsMd,
401 | TabItem: TabItemMd,
402 | Tabs: TabsMd,
403 | Text: TextMd,
404 | TextArea: TextAreaMd,
405 | TextBox: TextBoxMd,
406 | PasswordInput: PasswordMd,
407 | Theme: ThemeMd,
408 | TimeInput: TimeInputMd,
409 | Timer: TimerMd,
410 | ToneChangerButton: ToneChangerButtonMd,
411 | ToneSwitch: ToneSwitchMd,
412 | Tree: TreeMd,
413 | BarChart: BarChartMd,
414 | DonutChart: DonutChartMd,
415 | LabelList: LabelListMd,
416 | Legend: LegendMd,
417 | LineChart: LineChartMd,
418 | PieChart: PieChartMd,
419 | };
420 |
421 | export const collectedThemes: Record<string, ThemeDefinition> = {
422 | root: RootThemeDefinition,
423 | xmlui: XmlUiThemeDefinition,
424 | xmluiGreen: XmlUiGreenThemeDefinition,
425 | xmluiGray: XmlUiGrayThemeDefinition,
426 | xmluiOrange: XmlUiOrangeThemeDefinition,
427 | xmluiPurple: XmlUiPurpleThemeDefinition,
428 | xmluiCyan: XmlUiCyanThemeDefinition,
429 | xmluiRed: XmlUiRedThemeDefinition,
430 | };
431 |
```
--------------------------------------------------------------------------------
/docs/content/components/Form.md:
--------------------------------------------------------------------------------
```markdown
1 | # Form [#form]
2 |
3 | `Form` provides a structured container for collecting and validating user input, with built-in data binding, validation, and submission handling. It automatically manages form state and provides context for nested form controls to work together.
4 |
5 | **Key features:**
6 | - **Automatic data binding**: Form controls automatically sync with form data using `bindTo` properties
7 | - **Built-in validation**: Validates individual fields and overall form state before submission
8 | - **Context sharing**: Provides `$data` and other context values accessible to all nested components
9 | - **Submission handling**: Manages form submission workflow and prevents invalid submissions
10 |
11 | See [this guide](/forms) for details.
12 |
13 | **Context variables available during execution:**
14 |
15 | - `$data`: This property represents the value of the form data. You can access the fields of the form using the IDs in the `bindTo` property of nested `FormItem` instances. `$data` also provides an `update` method as a shortcut to the Form's exposed `update` method.
16 |
17 | ## Properties [#properties]
18 |
19 | ### `buttonRowTemplate` [#buttonrowtemplate]
20 |
21 | This property allows defining a custom component to display the buttons at the bottom of the form.
22 |
23 | The following example demonstrates using it:
24 |
25 | ```xmlui-pg copy display name="Example: buttonRowTemplate"
26 | ---app copy display {10-19}
27 | <App>
28 | <Form id="searchForm" padding="0.5rem"
29 | data="{{ search: 'Seattle', caseSensitive: false }}"
30 | onSubmit="() => {isSearching = true; delay(1000); isSearching = false; }"
31 | saveLabel="Search"
32 | var.isSearching="{false}">
33 | <Text>Please specify the name to include in the search:</Text>
34 | <FormItem bindTo="search" width="280px" />
35 | <FormItem type="checkbox" label="Case sensitive?" bindTo="caseSensitive" />
36 | <property name="buttonRowTemplate">
37 | <HStack gap="0.5rem" borderTop="1px solid #ddd" paddingVertical="1rem">
38 | <Button label="Test Search Server" type="button"
39 | themeColor="secondary" variant="outlined"
40 | onClick="toast('Search server is ok.')"/>
41 | <SpaceFiller/>
42 | <Button type="submit" enabled="{!isSearching}" icon="search"
43 | label="{isSearching ? 'Searching...' : 'Search'}"/>
44 | </HStack>
45 | </property>
46 | </Form>
47 | </App>
48 | ---desc
49 | This example mimics a one-second search and turns off the submit button during the operation. Also, it adds a Test Search Server button:
50 | ```
51 |
52 | ### `cancelLabel` (default: "Cancel") [#cancellabel-default-cancel]
53 |
54 | This property defines the label of the Cancel button.
55 |
56 | ### `completedNotificationMessage` [#completednotificationmessage]
57 |
58 | This property sets the message to display when the form is submitted successfully.
59 |
60 | ### `data` [#data]
61 |
62 | This property sets the initial value of the form's data structure. The form infrastructure uses this value to set the initial state of form items within the form. If this property isnot set, the form does not have an initial value.
63 |
64 | ### `enabled` (default: true) [#enabled-default-true]
65 |
66 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
67 |
68 | ### `enableSubmit` (default: true) [#enablesubmit-default-true]
69 |
70 | This property controls whether the submit button is enabled. When set to false, the submit button is disabled and the form cannot be submitted.
71 |
72 | ### `errorNotificationMessage` [#errornotificationmessage]
73 |
74 | This property sets the message to display when the form submission fails.
75 |
76 | ### `hideButtonRow` (default: false) [#hidebuttonrow-default-false]
77 |
78 | This property hides the button row entirely when set to true.
79 |
80 | ### `hideButtonRowUntilDirty` (default: false) [#hidebuttonrowuntildirty-default-false]
81 |
82 | This property hides the button row until the form data is modified (dirty).
83 |
84 | ### `inProgressNotificationMessage` [#inprogressnotificationmessage]
85 |
86 | This property sets the message to display when the form is being submitted.
87 |
88 | ### `itemLabelBreak` (default: true) [#itemlabelbreak-default-true]
89 |
90 | This boolean value indicates if form item labels can be split into multiple lines if it would overflow the available label width. Individual `FormItem` instances can override this property.
91 |
92 | ### `itemLabelPosition` (default: "top") [#itemlabelposition-default-top]
93 |
94 | This property sets the position of the item labels within the form.Individual `FormItem` instances can override this property.
95 |
96 | Available values:
97 |
98 | | Value | Description |
99 | | --- | --- |
100 | | `start` | The left side of the input (left-to-right) or the right side of the input (right-to-left) |
101 | | `end` | The right side of the input (left-to-right) or the left side of the input (right-to-left) |
102 | | `top` | The top of the input **(default)** |
103 | | `bottom` | The bottom of the input |
104 |
105 | ### `itemLabelWidth` [#itemlabelwidth]
106 |
107 | This property sets the width of the item labels within the form. Individual `FormItem` instances can override this property. If this property is not set, each form item nested in the form uses its calculated label width. These widths may be different for each item.
108 |
109 | ### `keepModalOpenOnSubmit` (default: false) [#keepmodalopenonsubmit-default-false]
110 |
111 | This property prevents the modal from closing when the form is submitted.
112 |
113 | ### `saveInProgressLabel` (default: "Saving...") [#saveinprogresslabel-default-saving-]
114 |
115 | This property defines the label of the Save button to display during the form data submit (save) operation.
116 |
117 | ### `saveLabel` (default: "Save") [#savelabel-default-save]
118 |
119 | This property defines the label of the Save button.
120 |
121 | ### `submitMethod` [#submitmethod]
122 |
123 | This property sets the HTTP method to use when submitting the form data. If not defined, `put` is used when the form has initial data; otherwise, `post`.
124 |
125 | ### `submitUrl` [#submiturl]
126 |
127 | URL to submit the form data.
128 |
129 | ### `swapCancelAndSave` (default: false) [#swapcancelandsave-default-false]
130 |
131 | By default, the Cancel button is to the left of the Save button. Set this property to `true` to swap them or `false` to keep their original location.
132 |
133 | ## Events [#events]
134 |
135 | ### `cancel` [#cancel]
136 |
137 | The form infrastructure fires this event when the form is canceled.
138 |
139 | ### `reset` [#reset]
140 |
141 | The form infrastructure fires this event when the form is reset.
142 |
143 | ### `submit` [#submit]
144 |
145 | The form infrastructure fires this event when the form is submitted. The event argument is the current `data` value to save.
146 |
147 | ```xmlui-pg copy {4} display name="Example: submit"
148 | <App>
149 | <Form padding="0.5rem"
150 | data="{{ name: 'Joe', age: 43 }}"
151 | onSubmit="(toSave) => toast(JSON.stringify(toSave))">
152 | <FlowLayout columnGap="12px" paddingBottom="6px">
153 | <FormItem bindTo="name" label="Customer name" width="50%" />
154 | <FormItem bindTo="age" label="Age" type="integer" width="50%"
155 | zeroOrPositive="true" />
156 | </FlowLayout>
157 | </Form>
158 | </App>
159 | ```
160 |
161 | ### `success` [#success]
162 |
163 | The form infrastructure fires this event when the form is submitted successfully.
164 |
165 | ### `willSubmit` [#willsubmit]
166 |
167 | The form infrastructure fires this event just before the form is submitted. The event argument is the current `data` value to be submitted. You can cancel the submission by returning `false` from the event handler.
168 |
169 | The following example allows saving customer data only when the age is an even number. The `willSubmit` event handler returns `false` if this condition is not met.
170 |
171 | ```xmlui-pg display copy {4-9} name="Example: willSubmit"
172 | <App>
173 | <Form padding="0.5rem"
174 | data="{{ name: 'Joe', age: 43 }}"
175 | onWillSubmit="(toSubmit) => {
176 | if (toSubmit.age % 2) {
177 | toast.error('Age must be an even number');
178 | return false;
179 | }
180 | }"
181 | onSubmit="(toSave) => toast(JSON.stringify(toSave))">
182 | <FlowLayout columnGap="12px" paddingBottom="6px">
183 | <FormItem bindTo="name" label="Customer name" width="50%" />
184 | <FormItem bindTo="age" label="Age" type="integer" width="50%"
185 | zeroOrPositive="true" />
186 | </FlowLayout>
187 | </Form>
188 | </App>
189 | ```
190 |
191 | ## Exposed Methods [#exposed-methods]
192 |
193 | ### `reset` [#reset]
194 |
195 | This method resets the form to its initial state, clearing all user input.
196 |
197 | **Signature**: `reset(): void`
198 |
199 | ### `update` [#update]
200 |
201 | You can pass a data object to update the form data. The properties in the passed data object are updated to their values accordingly. Other form properties remain intact.
202 |
203 | **Signature**: `update(data: Record<string, any>): void`
204 |
205 | - `data`: An object containing the form data to update.
206 |
207 | This method updates the form data with the change passed in its parameter. The parameter is a hash object, and this method updates the Form's properties accordingly.
208 |
209 | ```xmlui-pg copy display name="Example: update"
210 | <App>
211 | <Form id="myForm" padding="0.5rem"
212 | data="{{ name: 'Joe', age: 43, $update: 123 }}"
213 | onSubmit="(toSave) => toast(JSON.stringify(toSave))">
214 | <FlowLayout columnGap="12px" paddingBottom="6px">
215 | <FormItem bindTo="name" label="Customer name" width="50%" />
216 | <FormItem bindTo="age" label="Age" type="integer" width="50%"
217 | zeroOrPositive="true" />
218 | </FlowLayout>
219 | <Button onClick="() => $data.update({age: $data.age + 1})" >
220 | Increment age (1)
221 | </Button>
222 | <Button onClick="() => myForm.update({age: $data.age + 1})" >
223 | Increment age (2)
224 | </Button>
225 | <Button onClick="() => myForm.update({name: $data.name + '!', age: $data.age + 1})" >
226 | Update name and age
227 | </Button>
228 | </Form>
229 | </App>
230 | ```
231 |
232 | ### `validate` [#validate]
233 |
234 | This method triggers validation on all form fields without submitting the form. It displays validation errors and returns the validation result along with the cleaned form data. This is useful for implementing custom submit buttons or performing operations that require validated data without actually submitting the form.
235 |
236 | **Signature**: `validate(): Promise<{ isValid: boolean, data: Record<string, any>, errors: ValidationResult[], warnings: ValidationResult[], validationResults: Record<string, ValidationResult> }>`
237 |
238 | ## Styling [#styling]
239 |
240 | ### Theme Variables [#theme-variables]
241 |
242 | | Variable | Default Value (Light) | Default Value (Dark) |
243 | | --- | --- | --- |
244 | | [backgroundColor](../styles-and-themes/common-units/#color)-ValidationDisplay-error | $color-danger-100 | $color-danger-100 |
245 | | [backgroundColor](../styles-and-themes/common-units/#color)-ValidationDisplay-info | $color-primary-100 | $color-primary-100 |
246 | | [backgroundColor](../styles-and-themes/common-units/#color)-ValidationDisplay-valid | $color-success-100 | $color-success-100 |
247 | | [backgroundColor](../styles-and-themes/common-units/#color)-ValidationDisplay-warning | $color-warn-100 | $color-warn-100 |
248 | | [color](../styles-and-themes/common-units/#color)-accent-ValidationDisplay-error | $color-error | $color-error |
249 | | [color](../styles-and-themes/common-units/#color)-accent-ValidationDisplay-info | $color-info | $color-info |
250 | | [color](../styles-and-themes/common-units/#color)-accent-ValidationDisplay-valid | $color-valid | $color-valid |
251 | | [color](../styles-and-themes/common-units/#color)-accent-ValidationDisplay-warning | $color-warning | $color-warning |
252 | | [gap](../styles-and-themes/common-units/#size)-buttonRow-Form | $space-4 | $space-4 |
253 | | [gap](../styles-and-themes/common-units/#size)-Form | $space-4 | $space-4 |
254 | | [marginTop](../styles-and-themes/common-units/#size)-buttonRow-Form | $space-4 | $space-4 |
255 | | [textColor](../styles-and-themes/common-units/#color)-ValidationDisplay-error | $color-error | $color-error |
256 | | [textColor](../styles-and-themes/common-units/#color)-ValidationDisplay-info | $color-info | $color-info |
257 | | [textColor](../styles-and-themes/common-units/#color)-ValidationDisplay-valid | $color-valid | $color-valid |
258 | | [textColor](../styles-and-themes/common-units/#color)-ValidationDisplay-warning | $color-warning | $color-warning |
259 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/utils/extractParam.ts:
--------------------------------------------------------------------------------
```typescript
1 | import React, { type CSSProperties } from "react";
2 | import { isPlainObject } from "lodash-es";
3 |
4 | import type { ContainerState } from "../rendering/ContainerWrapper";
5 | import type { AppContextObject } from "../../abstractions/AppContextDefs";
6 |
7 | import { parseParameterString } from "../script-runner/ParameterParser";
8 | import { evalBinding } from "../script-runner/eval-tree-sync";
9 | import { LRUCache } from "../utils/LruCache";
10 | import type { ValueExtractor } from "../../abstractions/RendererDefs";
11 | import { layoutOptionKeys } from "../descriptorHelper";
12 | import { asOptionalBoolean } from "../rendering/valueExtractor";
13 |
14 | /**
15 | * Extract the value of the specified parameter from the given view container state
16 | * @param state The state of the view container
17 | * @param param Parameter to extract
18 | * @param appContext Application context to use
19 | * @param strict Strict evaluation?
20 | * @param extractContext
21 | * @returns
22 | */
23 | export function extractParam(
24 | state: ContainerState,
25 | param: any,
26 | appContext: AppContextObject | undefined = undefined,
27 | strict: boolean = false, // --- In this case we only allow string binding expression
28 | extractContext: { didResolve: boolean } = { didResolve: false },
29 | ): any {
30 | if (typeof param === "string") {
31 | const paramSegments = parseParameterString(param);
32 | if (paramSegments.length === 0) {
33 | // --- The param is an empty string, retrieve it
34 | return param;
35 | }
36 |
37 | // --- Cut the first segment, if it is whitespace-only
38 | if (paramSegments[0].type === "literal" && paramSegments[0].value.trim() === "") {
39 | paramSegments.shift();
40 | }
41 | if (paramSegments.length === 0) {
42 | // --- The param is an empty string, retrieve it
43 | return param;
44 | }
45 |
46 | // --- Cut the last segment, if it is whitespace-only
47 | const lastSegment = paramSegments[paramSegments.length - 1];
48 | if (lastSegment.type === "literal" && lastSegment.value.trim() === "") {
49 | paramSegments.pop();
50 | }
51 | if (paramSegments.length === 0) {
52 | // --- The param is an empty string, retrieve it
53 | return param;
54 | }
55 |
56 | if (paramSegments.length === 1) {
57 | // --- We have a single string literal or expression
58 | if (paramSegments[0].type === "literal") {
59 | // --- No expression to evaluate
60 | return paramSegments[0].value;
61 | } else {
62 | // --- We have a single expression to evaluate
63 | extractContext.didResolve = true;
64 | return evalBinding(paramSegments[0].value, {
65 | localContext: state,
66 | appContext,
67 | options: {
68 | defaultToOptionalMemberAccess: true,
69 | },
70 | });
71 | }
72 | }
73 | // --- At this point, we have multiple segments. Evaluate all expressions and convert them to strings
74 | let result = "";
75 | paramSegments.forEach((ps) => {
76 | if (ps.type === "literal") {
77 | result += ps.value;
78 | } else {
79 | extractContext.didResolve = true;
80 | const exprValue = evalBinding(ps.value, {
81 | localContext: state,
82 | appContext,
83 | options: {
84 | defaultToOptionalMemberAccess: true,
85 | },
86 | });
87 | if (exprValue?.toString) {
88 | result += exprValue.toString();
89 | }
90 | }
91 | });
92 | return result;
93 | }
94 |
95 | if (strict) {
96 | // --- As we allow only string parameters as binding expressions, we return with the provided
97 | // --- *not string* parameter without transforming it
98 | return param;
99 | }
100 |
101 | // --- Resolve each array item
102 | if (Array.isArray(param)) {
103 | const arrayExtractContext = { didResolve: false };
104 | let resolvedChildren = param.map((childParam) =>
105 | extractParam(state, childParam, appContext, false, arrayExtractContext),
106 | );
107 | if (arrayExtractContext.didResolve) {
108 | extractContext.didResolve = true;
109 | return resolvedChildren;
110 | }
111 | return param;
112 | }
113 |
114 | // --- Resolve each object property
115 | if (isPlainObject(param)) {
116 | const objectExtractContext = { didResolve: false };
117 | const substitutedObject: Record<string, any> = {};
118 | Object.entries(param).forEach(([key, value]) => {
119 | substitutedObject[key] = extractParam(state, value, appContext, false, objectExtractContext);
120 | });
121 | if (objectExtractContext.didResolve) {
122 | extractContext.didResolve = true;
123 | return substitutedObject;
124 | }
125 | return param;
126 | }
127 |
128 | // --- The param itself is the extracted value
129 | return param;
130 | }
131 |
132 | // --- Store stable object references for extracted parameter values
133 | const extractedObjectCache = new LRUCache(1024 * 10);
134 | /**
135 | * Get a stable object reference from an LRU cache
136 | * @param object Object to get the stable reference for
137 | *
138 | * We are doing this to prevent creating new objects with new references when the data hasn't changed this way we
139 | * can use these as dependencies for useEffect
140 | */
141 | export function withStableObjectReference(object: any) {
142 | if (typeof object === "function") {
143 | return object;
144 | }
145 | if (React.isValidElement(object) || (Array.isArray(object) && React.isValidElement(object[0]))) {
146 | //here could be some gnarly circular object references, JSON.stringify would blow up
147 | return object;
148 | }
149 | if (object?._ARROW_EXPR_) {
150 | //here could be some gnarly circular object references, JSON.stringify would blow up
151 | return object;
152 | }
153 | try {
154 | const stringObject = JSON.stringify(object);
155 | const cachedObject = extractedObjectCache.get(stringObject);
156 | if (cachedObject) {
157 | return cachedObject;
158 | }
159 | extractedObjectCache.set(stringObject, object);
160 | } catch (e) {
161 | console.log(object);
162 | console.warn("couldn't cache result", e);
163 | }
164 | return object;
165 | }
166 |
167 | export function shouldKeep(
168 | when: string | boolean | undefined,
169 | componentState: ContainerState,
170 | appContext?: AppContextObject,
171 | ) {
172 | if (when === undefined) {
173 | return true;
174 | }
175 | return asOptionalBoolean(extractParam(componentState, when, appContext, true));
176 | }
177 |
178 | /**
179 | * Resolves props that can either be regular properties or URL resources.
180 | * It also removes layoutCss props from regular properties.
181 | * @param props Component (rest) props
182 | * @param extractValue Value extractor function
183 | * @param layoutCss Component styles
184 | * @param resourceExtraction URL resource extractor function and array that specifies which props are URL resources
185 | * @returns properties that are resolved and cleaned of CSS styles
186 | */
187 | export function resolveAndCleanProps<T extends Record<string, any>>(
188 | props: Record<string, any>,
189 | extractValue: ValueExtractor,
190 | resourceExtraction?: {
191 | extractResourceUrl: (url?: string) => string | undefined;
192 | resourceProps?: string[];
193 | },
194 | ): T {
195 | const { extractResourceUrl, resourceProps } = resourceExtraction ?? {};
196 | const cleanedProps = removeStylesFromProps(props);
197 |
198 | const resultProps: Record<string, any> = {} as any;
199 | const result = Object.keys(cleanedProps).reduce((acc, propName) => {
200 | if (resourceProps && extractResourceUrl && resourceProps.includes(propName)) {
201 | acc[propName] = extractResourceUrl(cleanedProps[propName]);
202 | } else {
203 | acc[propName] = extractValue(cleanedProps[propName]);
204 | }
205 | return acc;
206 | }, resultProps);
207 |
208 | // --- Remove aliased CSS properties
209 | delete resultProps.canShrink;
210 | delete resultProps.radiusTopLeft;
211 | delete resultProps.radiusTopRight;
212 | delete resultProps.radiusBottomLeft;
213 | delete resultProps.radiusBottomRight;
214 |
215 | // --- Delete pseudo CSS properties
216 | delete resultProps.paddingHorizontal;
217 | delete resultProps.paddingVertical;
218 | delete resultProps.marginHorizontal;
219 | delete resultProps.marginVertical;
220 | delete resultProps.borderHorizontal;
221 | delete resultProps.borderVertical;
222 |
223 | return result as T;
224 | }
225 |
226 | /**
227 | * Removes unnecessary style related properties so only layoutCss contains them.
228 | * @param nodeProps properties to clean
229 | * @returns only component-specific properties
230 | */
231 | export function removeStylesFromProps(
232 | nodeProps: Record<string, any>,
233 | ) {
234 | if (nodeProps.hasOwnProperty("style")) {
235 | delete nodeProps["style"];
236 | }
237 | if (nodeProps.hasOwnProperty("class")) {
238 | delete nodeProps["class"];
239 | }
240 |
241 | const filterKeys = layoutOptionKeys;
242 | return Object.fromEntries(
243 | Object.entries(nodeProps).filter(([key]) => !filterKeys.includes(key)),
244 | );
245 | }
246 |
247 | type NodeProps = Record<string, any>;
248 | type ResourceUrlExtractor = (url?: string) => string | undefined;
249 |
250 | /**
251 | * Extracts props that can either be regular properties or URL resources.
252 | * It also removes layoutCss props from regular properties fed into it.
253 | * @param extractValue Value extractor function
254 | * @param extractResourceUrl URL resource extractor function that specifies which props are URL resources
255 | * @param layoutCss Component styles
256 | * @param props Component props
257 | * @returns properties that are resolved and cleaned of CSS styles
258 | */
259 | export class PropsTrasform<T extends NodeProps> {
260 | private nodeProps: T;
261 | private extractValue: ValueExtractor;
262 | private extractResourceUrl: ResourceUrlExtractor;
263 |
264 | private usedKeys: (keyof T)[] = [];
265 |
266 | constructor(
267 | extractValue: ValueExtractor,
268 | extractResourceUrl: ResourceUrlExtractor,
269 | props: T,
270 | ) {
271 | this.extractValue = extractValue;
272 | this.extractResourceUrl = extractResourceUrl;
273 | this.nodeProps = removeStylesFromProps(props) as T;
274 | }
275 |
276 | private mapValues(keys: (keyof T)[], fn: (value: any) => any) {
277 | this.usedKeys = Array.from(new Set(this.usedKeys.concat(keys)));
278 | return Object.fromEntries(keys.map((key) => [key, fn(this.nodeProps[key])]));
279 | }
280 |
281 | asValue<K extends keyof T>(...key: K[]) {
282 | return this.mapValues(key, this.extractValue) as T;
283 | }
284 |
285 | asUrlResource<K extends keyof T>(...key: K[]) {
286 | return this.mapValues(key, this.extractResourceUrl) as Record<K, string | undefined>;
287 | }
288 |
289 | asBoolean<K extends keyof T>(...key: K[]) {
290 | return this.mapValues(key, this.extractValue.asBoolean) as Record<
291 | string,
292 | ReturnType<ValueExtractor["asBoolean"]>
293 | >;
294 | }
295 |
296 | asOptionalBoolean<K extends keyof T>(...key: K[]) {
297 | return this.mapValues(key, this.extractValue.asOptionalBoolean) as Record<
298 | K,
299 | ReturnType<ValueExtractor["asOptionalBoolean"]>
300 | >;
301 | }
302 |
303 | asString<K extends keyof T>(...key: K[]) {
304 | return this.mapValues(key, this.extractValue.asString) as Record<
305 | string,
306 | ReturnType<ValueExtractor["asString"]>
307 | >;
308 | }
309 |
310 | asOptionalString<K extends keyof T>(...key: K[]) {
311 | return this.mapValues(key, this.extractValue.asOptionalString) as Record<
312 | string,
313 | ReturnType<ValueExtractor["asOptionalString"]>
314 | >;
315 | }
316 |
317 | asOptionalStringArray<K extends keyof T>(...key: K[]) {
318 | return this.mapValues(key, this.extractValue.asOptionalString) as Record<
319 | string,
320 | ReturnType<ValueExtractor["asOptionalStringArray"]>
321 | >;
322 | }
323 |
324 | asDisplayText<K extends keyof T>(...key: K[]) {
325 | return this.mapValues(key, this.extractValue.asDisplayText) as Record<
326 | string,
327 | ReturnType<ValueExtractor["asDisplayText"]>
328 | >;
329 | }
330 |
331 | asNumber<K extends keyof T>(...key: K[]) {
332 | return this.mapValues(key, this.extractValue.asNumber) as Record<
333 | string,
334 | ReturnType<ValueExtractor["asNumber"]>
335 | >;
336 | }
337 |
338 | asOptionalNumber<K extends keyof T>(...key: K[]) {
339 | return this.mapValues(key, this.extractValue.asOptionalNumber) as Record<
340 | K,
341 | ReturnType<ValueExtractor["asOptionalNumber"]>
342 | >;
343 | }
344 |
345 | asSize<K extends keyof T>(...key: K[]) {
346 | return this.mapValues(key, this.extractValue.asSize) as Record<
347 | K,
348 | ReturnType<ValueExtractor["asSize"]>
349 | >;
350 | }
351 |
352 | /**
353 | * Resolves props which have not been used yet.
354 | * If all keys have been referenced before this function is called, an empty object is returned.
355 | *
356 | * @returns props that have not been used yet
357 | */
358 | asRest(): T {
359 | const filteredKeys = Object.keys(this.nodeProps).filter(
360 | (propKey) => !this.usedKeys.includes(propKey as keyof T),
361 | );
362 | return this.mapValues(filteredKeys, this.extractValue) as T;
363 | }
364 | }
365 |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/configuration-management-enhancement-summary.md:
--------------------------------------------------------------------------------
```markdown
1 | # Configuration Management Enhancement - Implementation Summary
2 |
3 | ## Overview
4 | This document summarizes the implementation of enhanced configuration management for the XMLUI documentation generation scripts. This refactoring addressed scattered configuration loading patterns, added schema validation, standardized path resolution, and created a comprehensive configuration management system.
5 |
6 | ## Problems Addressed
7 |
8 | ### 1. Inconsistent Configuration Loading
9 | **Before:** Each script manually loaded configuration files with inconsistent error handling and path resolution.
10 | - Basic JSON parsing without validation
11 | - Hard-coded path construction using `join()`
12 | - Inconsistent error messages and handling
13 | - No schema validation or type checking
14 |
15 | **After:** Centralized configuration management with comprehensive features.
16 |
17 | ### 2. Hard-coded Path Construction
18 | **Before:** Path construction scattered throughout scripts using manual `join()` calls.
19 | - Magic string paths embedded in scripts
20 | - No standardized base path resolution
21 | - Project structure dependencies hard-coded
22 |
23 | **After:** Intelligent path resolution with multiple strategies and standardized output locations.
24 |
25 | ### 3. No Configuration Validation
26 | **Before:** No validation of configuration file contents.
27 | - Runtime errors on invalid configurations
28 | - No type checking or schema validation
29 | - Unclear error messages for configuration issues
30 |
31 | **After:** Comprehensive schema validation with clear error messages.
32 |
33 | ## Enhanced Configuration Management System
34 |
35 | ### Core Components
36 |
37 | #### 1. **ConfigurationManager Class**
38 | Centralized configuration loading with advanced features:
39 | - **Schema validation** against predefined schemas
40 | - **Search path resolution** - automatic file discovery
41 | - **Error handling** with clear, actionable messages
42 | - **Transformation support** for data preprocessing
43 | - **Environment variable integration** for overrides
44 |
45 | #### 2. **PathResolver Class**
46 | Intelligent path resolution system:
47 | - **Project root detection** - automatically finds project base
48 | - **Multiple resolution strategies** - script, project, cwd relative
49 | - **Standard output paths** - predefined locations for generated content
50 | - **Cross-platform compatibility** - handles Windows/Unix path differences
51 |
52 | #### 3. **ConfigValidator Class**
53 | Comprehensive validation system:
54 | - **Schema-based validation** with detailed error messages
55 | - **Type checking** for properties and nested values
56 | - **Allowed values validation** for enums and constrained fields
57 | - **Default value application** for missing optional properties
58 |
59 | ### Configuration Schemas
60 |
61 | #### **Components Configuration Schema:**
62 | ```javascript
63 | {
64 | required: ["excludeComponentStatuses"],
65 | optional: ["includeInternalComponents", "sortOrder", "customTemplates"],
66 | properties: {
67 | excludeComponentStatuses: {
68 | type: "array",
69 | itemType: "string",
70 | allowedValues: ["internal", "experimental", "deprecated", "stable"]
71 | },
72 | includeInternalComponents: { type: "boolean", default: false },
73 | sortOrder: {
74 | type: "string",
75 | allowedValues: ["alphabetical", "status", "category"],
76 | default: "alphabetical"
77 | }
78 | }
79 | }
80 | ```
81 |
82 | #### **Extensions Configuration Schema:**
83 | ```javascript
84 | {
85 | required: ["packageNames"],
86 | optional: ["excludePackages", "includeDevPackages"],
87 | properties: {
88 | packageNames: { type: "array", itemType: "string" },
89 | excludePackages: { type: "array", itemType: "string", default: [] },
90 | includeDevPackages: { type: "boolean", default: false }
91 | }
92 | }
93 | ```
94 |
95 | #### **Documentation Generator Schema:**
96 | ```javascript
97 | {
98 | required: ["outputFormat"],
99 | optional: ["includeExamples", "generateMetadata", "verboseLogging"],
100 | properties: {
101 | outputFormat: {
102 | type: "string",
103 | allowedValues: ["markdown", "html", "json"],
104 | default: "markdown"
105 | },
106 | includeExamples: { type: "boolean", default: true },
107 | generateMetadata: { type: "boolean", default: true },
108 | verboseLogging: { type: "boolean", default: false }
109 | }
110 | }
111 | ```
112 |
113 | ### Path Resolution Features
114 |
115 | #### **Smart Search Paths:**
116 | The system automatically searches for configuration files in:
117 | 1. Current working directory (`./`)
118 | 2. Script directory (`./scripts/generate-docs/`)
119 | 3. Docs config directory (`./docs/config/`)
120 | 4. Project root config (`./config/`)
121 |
122 | #### **Standard Output Paths:**
123 | Centralized definition of output locations:
124 | ```javascript
125 | {
126 | themes: "dist/themes",
127 | components: "docs/content/components",
128 | extensions: "docs/content/extensions",
129 | pages: "docs/pages",
130 | metadata: "dist/metadata",
131 | downloads: "docs/public/downloads"
132 | }
133 | ```
134 |
135 | #### **Flexible Resolution Strategies:**
136 | - `script` - Relative to script directory
137 | - `project` - Relative to project root
138 | - `cwd` - Relative to current working directory
139 |
140 | ## Scripts Updated
141 |
142 | ### 1. **create-theme-files.mjs**
143 | **Changes:**
144 | - Uses `pathResolver.getOutputPaths().themes` instead of manual path construction
145 | - Leverages enhanced configuration management for future theme configuration needs
146 |
147 | **Benefits:**
148 | - Automatic output directory resolution
149 | - Consistent with other scripts' path handling
150 | - Prepared for future theme configuration enhancements
151 |
152 | ### 2. **get-docs.mjs**
153 | **Changes:**
154 | - Uses `configManager.loadComponentsConfig()` and `configManager.loadExtensionsConfig()`
155 | - Uses `pathResolver.resolvePath()` for component and example folder paths
156 | - Consistent configuration loading with validation
157 |
158 | **Benefits:**
159 | - Automatic schema validation for configuration files
160 | - Standardized error handling for configuration issues
161 | - Simplified path construction logic
162 |
163 | ### 3. **input-handler.mjs**
164 | **Changes:**
165 | - Refactored to use enhanced configuration manager as backend
166 | - Maintains backward compatibility with existing API
167 | - Enhanced error handling and validation
168 |
169 | **Benefits:**
170 | - Improved error messages and validation
171 | - Consistent behavior with other configuration loading
172 | - Future-proof for additional configuration features
173 |
174 | ## Features and Benefits
175 |
176 | ### **Enhanced Error Handling**
177 | - **Clear error messages** with specific information about what went wrong
178 | - **File not found handling** with search path information
179 | - **JSON syntax error detection** with line number information when possible
180 | - **Permission error handling** for configuration files
181 |
182 | ### **Configuration Validation**
183 | - **Schema-based validation** ensures configuration files are correct
184 | - **Type checking** prevents runtime errors from wrong data types
185 | - **Allowed values validation** for enumerated fields
186 | - **Required property checking** with clear error messages
187 |
188 | ### **Path Resolution Intelligence**
189 | - **Automatic project root detection** by looking for package.json
190 | - **Multiple search strategies** for finding configuration files
191 | - **Cross-platform path handling** for Windows/Unix compatibility
192 | - **Standardized output directories** across all scripts
193 |
194 | ### **Developer Experience Improvements**
195 | - **Detailed logging** for configuration loading process
196 | - **Environment variable overrides** for CI/CD and development
197 | - **Default value application** for missing optional settings
198 | - **Backward compatibility** with existing configuration files
199 |
200 | ## Usage Examples
201 |
202 | ### **Basic Configuration Loading:**
203 | ```javascript
204 | import { configManager } from "./configuration-management.mjs";
205 |
206 | // Load and validate components configuration
207 | const config = await configManager.loadComponentsConfig();
208 |
209 | // Load with custom path and validation
210 | const customConfig = await configManager.loadConfig("./custom-config.json", "COMPONENTS");
211 | ```
212 |
213 | ### **Path Resolution:**
214 | ```javascript
215 | import { pathResolver } from "./configuration-management.mjs";
216 |
217 | // Get standard output paths
218 | const outputs = pathResolver.getOutputPaths();
219 | const themeDir = outputs.themes;
220 |
221 | // Resolve custom paths
222 | const componentDir = pathResolver.resolvePath("src/components", "project");
223 | const scriptFile = pathResolver.resolvePath("./script.mjs", "script");
224 | ```
225 |
226 | ### **Environment Integration:**
227 | ```javascript
228 | // Override configuration with environment variables
229 | const config = configManager.mergeWithEnvironment(baseConfig, "XMLUI_DOCS_");
230 | // XMLUI_DOCS_VERBOSE_LOGGING=true becomes config.verboseLogging = true
231 | ```
232 |
233 | ## Validation Results
234 |
235 | All enhanced configuration management features have been thoroughly tested:
236 |
237 | ### **Functionality Testing**
238 | - ✅ `npm run export-themes` - Works with new path resolution
239 | - ✅ Configuration loading - Handles missing files gracefully
240 | - ✅ Schema validation - Rejects invalid configurations with clear errors
241 | - ✅ Path resolution - Correctly resolves all path types
242 |
243 | ### **Error Handling Testing**
244 | - ✅ **Missing files** - Clear error messages with search paths
245 | - ✅ **Invalid JSON** - Syntax error reporting with file information
246 | - ✅ **Schema violations** - Detailed validation error messages
247 | - ✅ **Permission errors** - Appropriate error handling
248 |
249 | ### **Backward Compatibility**
250 | - ✅ **Existing configurations** - All current config files work unchanged
251 | - ✅ **API compatibility** - `loadConfig()` function maintains same interface
252 | - ✅ **Output consistency** - Generated files identical to pre-refactoring
253 |
254 | ## Performance and Resource Impact
255 |
256 | ### **Performance Characteristics**
257 | - **No performance degradation** - Configuration loading is still fast
258 | - **Caching opportunities** - Path resolution results can be cached
259 | - **Memory efficiency** - No significant memory overhead
260 | - **Startup time** - Minimal impact on script startup time
261 |
262 | ### **Resource Usage**
263 | - **File system** - More intelligent file searching reduces redundant operations
264 | - **Error recovery** - Better error handling reduces failed script runs
265 | - **Development time** - Significantly reduced debugging time for configuration issues
266 |
267 | ## Future Enhancement Opportunities
268 |
269 | ### **Phase 1 Extensions (Immediate)**
270 | - Add configuration file hot-reloading for development
271 | - Implement configuration merging from multiple sources
272 | - Add JSON Schema file generation for IDE support
273 |
274 | ### **Phase 2 Extensions (Short-term)**
275 | - YAML configuration file support
276 | - Configuration templates and generators
277 | - Advanced path aliasing and variable substitution
278 |
279 | ### **Phase 3 Extensions (Long-term)**
280 | - Configuration management UI/CLI tools
281 | - Integration with external configuration stores
282 | - Advanced validation rules and custom validators
283 |
284 | ## Risk Assessment
285 |
286 | ### **Risk Mitigation Achieved**
287 | - ✅ **Zero breaking changes** - Full backward compatibility maintained
288 | - ✅ **Graceful degradation** - Missing configurations handled appropriately
289 | - ✅ **Clear error messages** - Debugging and troubleshooting significantly improved
290 | - ✅ **Comprehensive testing** - All functionality validated
291 |
292 | ### **Benefits vs. Risks**
293 | - **High benefits** - Significantly improved maintainability and developer experience
294 | - **Low risk** - No breaking changes, comprehensive testing
295 | - **Future-proof** - Foundation for additional configuration enhancements
296 | - **Immediate value** - Better error handling and validation right away
297 |
298 | ## Conclusion
299 |
300 | The configuration management enhancement has successfully:
301 |
302 | 1. **Centralized configuration loading** with comprehensive error handling
303 | 2. **Added schema validation** for all configuration types
304 | 3. **Implemented intelligent path resolution** with multiple strategies
305 | 4. **Maintained full backward compatibility** while adding powerful new features
306 | 5. **Significantly improved developer experience** with better error messages and validation
307 |
308 | The enhanced configuration management system provides a robust foundation for future configuration needs while immediately improving the reliability and maintainability of the documentation generation scripts. All changes are low-risk, well-tested, and provide immediate value to developers working with the system.
309 |
310 | ---
311 | *Refactoring completed: 2024*
312 | *Impact: High - significantly improved configuration reliability and developer experience*
313 | *Risk: Low - no breaking changes, comprehensive validation*
314 | *Status: Complete and validated* ✅
315 |
```
--------------------------------------------------------------------------------
/docs/content/components/Slider.md:
--------------------------------------------------------------------------------
```markdown
1 | # Slider [#slider]
2 |
3 | `Slider` provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip.
4 |
5 | **Key features:**
6 | - **Range selection**: Single value or dual-thumb range selection with configurable minimum separation
7 | - **Step control**: Precise incremental selection with customizable step values
8 | - **Value formatting**: Custom display formatting for current values and visual feedback
9 |
10 | ## Properties [#properties]
11 |
12 | ### `autoFocus` (default: false) [#autofocus-default-false]
13 |
14 | If this property is set to `true`, the component gets the focus automatically when displayed.
15 |
16 | ### `enabled` (default: true) [#enabled-default-true]
17 |
18 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
19 |
20 | ### `initialValue` [#initialvalue]
21 |
22 | This property sets the component's initial value.
23 |
24 | ```xmlui-pg
25 | <Slider initialValue="5" />
26 | ```
27 |
28 | ### `maxValue` (default: 10) [#maxvalue-default-10]
29 |
30 | This property specifies the maximum value of the allowed input range.
31 |
32 | ```xmlui-pg
33 | <Slider maxValue="30" />
34 | ```
35 |
36 | ### `minStepsBetweenThumbs` (default: 1) [#minstepsbetweenthumbs-default-1]
37 |
38 | This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.
39 |
40 | ### `minValue` (default: 0) [#minvalue-default-0]
41 |
42 | This property specifies the minimum value of the allowed input range.
43 |
44 | ```xmlui-pg
45 | <Slider minValue="10" />
46 | ```
47 |
48 | ### `rangeStyle` [#rangestyle]
49 |
50 | This optional property allows you to apply custom styles to the range element of the slider.
51 |
52 | ### `readOnly` (default: false) [#readonly-default-false]
53 |
54 | Set this property to `true` to disallow changing the component value.
55 |
56 | ### `required` (default: false) [#required-default-false]
57 |
58 | Set this property to `true` to indicate it must have a value before submitting the containing form.
59 |
60 | ### `showValues` (default: true) [#showvalues-default-true]
61 |
62 | This property controls whether the slider shows the current values of the thumbs.
63 |
64 | ### `step` (default: 1) [#step-default-1]
65 |
66 | This property defines the increment value for the slider, determining the allowed intervals between selectable values.
67 |
68 | ### `thumbStyle` [#thumbstyle]
69 |
70 | This optional property allows you to apply custom styles to the thumb elements of the slider.
71 |
72 | ### `validationStatus` (default: "none") [#validationstatus-default-none]
73 |
74 | This property allows you to set the validation status of the input component.
75 |
76 | Available values:
77 |
78 | | Value | Description |
79 | | --- | --- |
80 | | `valid` | Visual indicator for an input that is accepted |
81 | | `warning` | Visual indicator for an input that produced a warning |
82 | | `error` | Visual indicator for an input that produced an error |
83 |
84 | ### `valueFormat` (default: "(value) => value.toString()") [#valueformat-default-value-value-tostring]
85 |
86 | This property allows you to customize how the values are displayed.
87 |
88 | ## Events [#events]
89 |
90 | ### `didChange` [#didchange]
91 |
92 | This event is triggered when value of Slider has changed.
93 |
94 | ### `gotFocus` [#gotfocus]
95 |
96 | This event is triggered when the Slider has received the focus.
97 |
98 | ### `lostFocus` [#lostfocus]
99 |
100 | This event is triggered when the Slider has lost the focus.
101 |
102 | ## Exposed Methods [#exposed-methods]
103 |
104 | ### `focus` [#focus]
105 |
106 | This method sets the focus on the slider component.
107 |
108 | **Signature**: `focus(): void`
109 |
110 | ### `setValue` [#setvalue]
111 |
112 | This API sets the value of the `Slider`. You can use it to programmatically change the value.
113 |
114 | **Signature**: `setValue(value: number | [number, number] | undefined): void`
115 |
116 | - `value`: The new value to set. Can be a single value or an array of values for range sliders.
117 |
118 | ### `value` [#value]
119 |
120 | This API retrieves the current value of the `Slider`. You can use it to get the value programmatically.
121 |
122 | **Signature**: `get value(): number | [number, number] | undefined`
123 |
124 | ## Styling [#styling]
125 |
126 | ### Theme Variables [#theme-variables]
127 |
128 | | Variable | Default Value (Light) | Default Value (Dark) |
129 | | --- | --- | --- |
130 | | [backgroundColor](../styles-and-themes/common-units/#color)-range-Slider | $color-primary | $color-primary |
131 | | [backgroundColor](../styles-and-themes/common-units/#color)-range-Slider | $color-primary | $color-primary |
132 | | [backgroundColor](../styles-and-themes/common-units/#color)-range-Slider--disabled | $color-surface-400 | $color-surface-800 |
133 | | [backgroundColor](../styles-and-themes/common-units/#color)-range-Slider--disabled | $color-surface-400 | $color-surface-800 |
134 | | [backgroundColor](../styles-and-themes/common-units/#color)-thumb-Slider | $color-primary-500 | $color-primary-400 |
135 | | [backgroundColor](../styles-and-themes/common-units/#color)-thumb-Slider | $color-primary-500 | $color-primary-400 |
136 | | [backgroundColor](../styles-and-themes/common-units/#color)-thumb-Slider--active | $color-primary-400 | $color-primary-400 |
137 | | [backgroundColor](../styles-and-themes/common-units/#color)-thumb-Slider--active | $color-primary-400 | $color-primary-400 |
138 | | [backgroundColor](../styles-and-themes/common-units/#color)-thumb-Slider--focus | $color-primary | $color-primary |
139 | | [backgroundColor](../styles-and-themes/common-units/#color)-thumb-Slider--focus | $color-primary | $color-primary |
140 | | [backgroundColor](../styles-and-themes/common-units/#color)-thumb-Slider--hover | $color-primary | $color-primary |
141 | | [backgroundColor](../styles-and-themes/common-units/#color)-thumb-Slider--hover | $color-primary | $color-primary |
142 | | [backgroundColor](../styles-and-themes/common-units/#color)-track-Slider | $color-surface-200 | $color-surface-200 |
143 | | [backgroundColor](../styles-and-themes/common-units/#color)-track-Slider | $color-surface-200 | $color-surface-200 |
144 | | [backgroundColor](../styles-and-themes/common-units/#color)-track-Slider--disabled | $color-surface-300 | $color-surface-600 |
145 | | [backgroundColor](../styles-and-themes/common-units/#color)-track-Slider--disabled | $color-surface-300 | $color-surface-600 |
146 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--default | transparent | transparent |
147 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--default | transparent | transparent |
148 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--default--focus | *none* | *none* |
149 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--default--hover | *none* | *none* |
150 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--error | *none* | *none* |
151 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--error--focus | *none* | *none* |
152 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--error--hover | *none* | *none* |
153 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--success | *none* | *none* |
154 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--success--focus | *none* | *none* |
155 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--success--hover | *none* | *none* |
156 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--warning | *none* | *none* |
157 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--warning--focus | *none* | *none* |
158 | | [borderColor](../styles-and-themes/common-units/#color)-Slider--warning--hover | *none* | *none* |
159 | | [borderColor](../styles-and-themes/common-units/#color)-thumb-Slider | $color-surface-50 | $color-surface-950 |
160 | | [borderColor](../styles-and-themes/common-units/#color)-thumb-Slider | $color-surface-50 | $color-surface-950 |
161 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Slider--default | $borderRadius | $borderRadius |
162 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Slider--default | $borderRadius | $borderRadius |
163 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Slider--error | *none* | *none* |
164 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Slider--success | *none* | *none* |
165 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Slider--warning | *none* | *none* |
166 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Slider--default | solid | solid |
167 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Slider--default | solid | solid |
168 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Slider--error | *none* | *none* |
169 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Slider--success | *none* | *none* |
170 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Slider--warning | *none* | *none* |
171 | | [borderStyle](../styles-and-themes/common-units/#border-style)-thumb-Slider | solid | solid |
172 | | [borderStyle](../styles-and-themes/common-units/#border-style)-thumb-Slider | solid | solid |
173 | | [borderWidth](../styles-and-themes/common-units/#size)-Slider--default | 0 | 0 |
174 | | [borderWidth](../styles-and-themes/common-units/#size)-Slider--default | 0 | 0 |
175 | | [borderWidth](../styles-and-themes/common-units/#size)-Slider--error | *none* | *none* |
176 | | [borderWidth](../styles-and-themes/common-units/#size)-Slider--success | *none* | *none* |
177 | | [borderWidth](../styles-and-themes/common-units/#size)-Slider--warning | *none* | *none* |
178 | | [borderWidth](../styles-and-themes/common-units/#size)-thumb-Slider | 2px | 2px |
179 | | [borderWidth](../styles-and-themes/common-units/#size)-thumb-Slider | 2px | 2px |
180 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--default | none | none |
181 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--default | none | none |
182 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--default--focus | *none* | *none* |
183 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--default--hover | *none* | *none* |
184 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--error | *none* | *none* |
185 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--error--focus | *none* | *none* |
186 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--error--hover | *none* | *none* |
187 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--success | *none* | *none* |
188 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--success--focus | *none* | *none* |
189 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--success--hover | *none* | *none* |
190 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--warning | *none* | *none* |
191 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--warning--focus | *none* | *none* |
192 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Slider--warning--hover | *none* | *none* |
193 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-thumb-Slider | *none* | *none* |
194 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-thumb-Slider--active | 0 0 0 6px rgb(from $color-primary r g b / 0.4) | 0 0 0 6px rgb(from $color-primary r g b / 0.4) |
195 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-thumb-Slider--active | 0 0 0 6px rgb(from $color-primary r g b / 0.4) | 0 0 0 6px rgb(from $color-primary r g b / 0.4) |
196 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-thumb-Slider--focus | 0 0 0 6px rgb(from $color-primary r g b / 0.4) | 0 0 0 6px rgb(from $color-primary r g b / 0.4) |
197 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-thumb-Slider--focus | 0 0 0 6px rgb(from $color-primary r g b / 0.4) | 0 0 0 6px rgb(from $color-primary r g b / 0.4) |
198 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-thumb-Slider--hover | 0 0 0 6px rgb(from $color-primary r g b / 0.4) | 0 0 0 6px rgb(from $color-primary r g b / 0.4) |
199 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-thumb-Slider--hover | 0 0 0 6px rgb(from $color-primary r g b / 0.4) | 0 0 0 6px rgb(from $color-primary r g b / 0.4) |
200 |
```