This is page 23 of 182. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── cool-queens-look.md
│ └── twelve-guests-care.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── netlify.toml
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Debug.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ ├── Main.xmlui.xs
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.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
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ ├── tsconfig.json
│ │ └── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── 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.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── 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.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
│ ├── containers.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
│ ├── state-management.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.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
│ │ │ ├── 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.mjs
│ ├── 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
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroup.md:
--------------------------------------------------------------------------------
```markdown
1 | %-DESC-START
2 |
3 | **Key features:**
4 |
5 | - **Hierarchical organization**: Creates nested menu structures by containing NavLinks and other NavGroups
6 | - **Expand/collapse behavior**: Users can toggle visibility of grouped navigation items
7 | - **Customizable icons**: Different icons for expanded/collapsed states and layout orientations
8 | - **Flexible placement**: Works within NavPanel for app navigation or standalone for custom menus
9 | - **Initial state control**: Configure whether groups start expanded or collapsed
10 |
11 | ## Using `NavGroup`
12 |
13 | The primary use of a `NavGroup` is to create an application menu with submenus, as the following example shows:
14 |
15 | ```xmlui-pg copy display name="Example: NavGroup in App" height="280px"
16 | ---app
17 | <App layout="condensed">
18 | <NavPanel>
19 | <NavLink label="Home" to="/" icon="home"/>
20 | <NavGroup label="Pages">
21 | <NavLink label="Page 1" to="/page/1"/>
22 | <NavGroup label="Page 2-4">
23 | <NavLink label="Page 2" to="/page/2"/>
24 | <NavLink label="Page 3" to="/page/3"/>
25 | <NavLink label="Page 4" to="/page/4"/>
26 | </NavGroup>
27 | <NavLink label="Page 5" to="/page/5"/>
28 | <NavLink label="Page Other" to="/page/Other"/>
29 | </NavGroup>
30 | </NavPanel>
31 | <Pages fallbackPath="/">
32 | <Page url="/">
33 | Home
34 | </Page>
35 | <Page url="/page/:id">
36 | <Text value="Page {$routeParams.id}" />
37 | </Page>
38 | </Pages>
39 | </App>
40 | ---desc
41 | Here, the highlighted `NavGroup` element nests other `NavLink` and `NavGroup` elements to create a hierarchical menu:
42 | ```
43 |
44 | You do not have to use `NavGroup` within `NavPanel`; you can nest it into other components to represent a menu, like in the following example:
45 |
46 | ```xmlui-pg copy display name="Example: NavGroup in a Stack" height="280px"
47 | <App>
48 | <HStack verticalAlignment="center">
49 | <Text>Use this menu:</Text>
50 | <NavGroup label="Pages">
51 | <NavLink label="Page 1" />
52 | <NavGroup label="Page 2-4">
53 | <NavLink label="Page 2" />
54 | <NavLink label="Page 3" />
55 | <NavLink label="Page 4" />
56 | </NavGroup>
57 | <NavLink label="Page 5" />
58 | <NavLink label="Page Other" />
59 | </NavGroup>
60 | </HStack>
61 | </App>
62 | ```
63 |
64 | ### Custom Icons
65 |
66 | You can also provide custom icons for a specific NavGroup component via it's respective property:
67 |
68 | - [iconHorizontalCollapsed](#iconHorizontalCollapsed)
69 | - [iconHorizontalExpanded](#iconHorizontalExpanded)
70 | - [iconVerticalCollapsed](#iconVerticalCollapsed)
71 | - [iconVerticalExpanded](#iconVerticalExpanded)
72 |
73 | See the following for an example of all variants:
74 |
75 | ```xmlui-pg copy display name="Example: custom icons in horizontal layout" height="250px"
76 | <App layout="horizontal">
77 | <NavGroup icon="email" label="Send To"
78 | iconVerticalExpanded="arrowup" iconVerticalCollapsed="arrowbottom">
79 | <NavLink icon="arrowup" label="Boss" />
80 | <NavGroup icon="users" label="Team"
81 | iconHorizontalExpanded="arrowleft" iconHorizontalCollapsed="arrowright">
82 | <NavLink label="Jane" />
83 | <NavLink label="Will" />
84 | </NavGroup>
85 | <NavLink icon="cube" label="Support" />
86 | </NavGroup>
87 | </App>
88 | ```
89 |
90 | %-DESC-END
91 |
92 | %-PROP-START icon
93 |
94 | Look at this example:
95 |
96 | ```xmlui-pg copy {3, 5} display name="Example: label and icon" height="280px"
97 | <App>
98 | <HStack verticalAlignment="center">
99 | <NavGroup icon="email" label="Send To" >
100 | <NavLink icon="arrowup" label="Boss" />
101 | <NavGroup icon="users" label="Team">
102 | <NavLink label="Jane" />
103 | <NavLink label="Will" />
104 | <NavLink label="Sandra" />
105 | </NavGroup>
106 | <NavLink icon="cube" label="Support" />
107 | </NavGroup>
108 | </HStack>
109 | </App>
110 | ```
111 |
112 | %-PROP-END
113 |
114 | %-PROP-START iconHorizontalCollapsed
115 |
116 | For an example, see the [Custom Icons section](#custom-icons).
117 |
118 | %-PROP-END
119 |
120 | %-PROP-START iconHorizontalExpanded
121 |
122 | For an example, see the [Custom Icons section](#custom-icons).
123 |
124 | %-PROP-END
125 |
126 | %-PROP-START iconVerticalCollapsed
127 |
128 | For an example, see the [Custom Icons section](#custom-icons).
129 |
130 | %-PROP-END
131 |
132 | %-PROP-START iconVerticalExpanded
133 |
134 | For an example, see the [Custom Icons section](#custom-icons).
135 |
136 | %-PROP-END
137 |
138 | %-PROP-START label
139 |
140 | This property sets the text displayed as the name of the `NavGroup`.
141 |
142 | For an example, see the [section on the icon property](#icon).
143 |
144 | %-PROP-END
145 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/style-parser/parser.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it, assert } from "vitest";
2 | import { StyleParser } from "../../../src/parsers/style-parser/StyleParser";
3 |
4 | describe("Style parser", () => {
5 | const sizeCases = [
6 | { src: "0", val: 0, unit: "" },
7 | { src: "0px", val: 0, unit: "px" },
8 | { src: "0cm", val: 0, unit: "cm" },
9 | { src: "0mm", val: 0, unit: "mm" },
10 | { src: "0in", val: 0, unit: "in" },
11 | { src: "0pt", val: 0, unit: "pt" },
12 | { src: "0pc", val: 0, unit: "pc" },
13 | { src: "0em", val: 0, unit: "em" },
14 | { src: "0rem", val: 0, unit: "rem" },
15 | { src: "0vw", val: 0, unit: "vw" },
16 | { src: "0vh", val: 0, unit: "vh" },
17 | { src: "0ex", val: 0, unit: "ex" },
18 | { src: "0ch", val: 0, unit: "ch" },
19 | { src: "0vmin", val: 0, unit: "vmin" },
20 | { src: "0vmax", val: 0, unit: "vmax" },
21 | { src: "0%", val: 0, unit: "%" },
22 | { src: "123px", val: 123, unit: "px" },
23 | { src: "123cm", val: 123, unit: "cm" },
24 | { src: "123.5mm", val: 123.5, unit: "mm" },
25 | { src: "123.5in", val: 123.5, unit: "in" },
26 | { src: "234.5pt", val: 234.5, unit: "pt" },
27 | { src: "-12.5pc", val: -12.5, unit: "pc" },
28 | { src: "-123.5em", val: -123.5, unit: "em" },
29 | { src: "45rem", val: 45, unit: "rem" },
30 | { src: "55vw", val: 55, unit: "vw" },
31 | { src: "678vh", val: 678, unit: "vh" },
32 | { src: "1ex", val: 1, unit: "ex" },
33 | { src: "3ch", val: 3, unit: "ch" },
34 | { src: "4vmin", val: 4, unit: "vmin" },
35 | { src: "-12.5vmax", val: -12.5, unit: "vmax" },
36 | { src: "66%", val: 66, unit: "%" },
37 | ];
38 |
39 | sizeCases.forEach((s) =>
40 | it(`parseSize '${s.src}'`, () => {
41 | // --- Arrange
42 | const sp = new StyleParser(s.src);
43 |
44 | // --- Act
45 | const size = sp.parseSize()!;
46 |
47 | // --- Assert
48 | expect(size.value).equal(s.val);
49 | expect(size.unit).equal(s.unit);
50 | })
51 | );
52 |
53 | const sizeErrorCases = ["12left", "12wavy"];
54 |
55 | sizeErrorCases.forEach((s) =>
56 | it(`parseSize '${s}'`, () => {
57 | // --- Arrange
58 | const sp = new StyleParser(s);
59 |
60 | // --- Act
61 | try {
62 | sp.parseSize();
63 | } catch (err: any) {
64 | expect(err.toString()).contains("Unexpected");
65 | return;
66 | }
67 | assert.fail("Exception expected");
68 | })
69 | );
70 |
71 | const borderCases = [
72 | { src: "0", wv: 0, wu: "", cv: undefined, sv: undefined },
73 | { src: "1px", wv: 1, wu: "px", cv: undefined, sv: undefined },
74 | { src: "dotted", wv: undefined, wu: undefined, cv: undefined, sv: "dotted" },
75 | { src: "blue", wv: undefined, wu: undefined, cv: "blue", sv: undefined },
76 | { src: "1px dotted", wv: 1, wu: "px", cv: undefined, sv: "dotted" },
77 | { src: "dotted 1px", wv: 1, wu: "px", cv: undefined, sv: "dotted" },
78 | { src: "1px blue", wv: 1, wu: "px", cv: "blue", sv: undefined },
79 | { src: "blue 1px", wv: 1, wu: "px", cv: "blue", sv: undefined },
80 | { src: "dotted blue", wv: undefined, wu: undefined, cv: "blue", sv: "dotted" },
81 | { src: "blue dotted", wv: undefined, wu: undefined, cv: "blue", sv: "dotted" },
82 | { src: "1px dotted blue", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
83 | { src: "1px blue dotted", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
84 | { src: "dotted 1px blue", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
85 | { src: "dotted blue 1px", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
86 | { src: "blue dotted 1px", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
87 | { src: "blue 1px dotted", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
88 | ];
89 |
90 | borderCases.forEach((c) =>
91 | it(`parseBorder ${c.src}`, () => {
92 | // --- Arrange
93 | const sp = new StyleParser(c.src);
94 |
95 | // --- Act
96 | const b = sp.parseBorder()!;
97 |
98 | // --- Assert
99 | expect(b.widthValue).equal(c.wv);
100 | expect(b.widthUnit).equal(c.wu);
101 | expect(b.styleValue).equal(c.sv);
102 | expect(b.color).equal(c.cv);
103 | })
104 | );
105 |
106 | const borderErrorCases = ["start"];
107 |
108 | borderErrorCases.forEach((s) =>
109 | it(`parseBorder error '${s}'`, () => {
110 | // --- Arrange
111 | const sp = new StyleParser(s);
112 |
113 | // --- Act
114 | try {
115 | sp.parseBorder();
116 | } catch (err: any) {
117 | expect(err.toString()).contains("Unexpected");
118 | return;
119 | }
120 | assert.fail("Exception expected");
121 | })
122 | );
123 | });
124 |
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/eval-tree-arrow-async.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 |
3 | import { evalBindingAsync } from "../../../src/components-core/script-runner/eval-tree-async";
4 | import { Parser } from "../../../src/parsers/scripting/Parser";
5 | import {createEvalContext} from "./test-helpers";
6 |
7 | describe("Evaluate arrow expressions (epx)", () => {
8 | it("Arrow #1", async () => {
9 | // --- Arrange
10 | const source = "(x => 2 * x)(4)";
11 | const context = createEvalContext({});
12 |
13 | // --- Act
14 | const value = await evalAsync(source, context);
15 |
16 | // --- Arrange
17 | expect(value).equal(8);
18 | });
19 |
20 | it("Arrow #2", async () => {
21 | // --- Arrange
22 | const source = "((x, y) => x + y)(1, 2)";
23 | const context = createEvalContext({});
24 |
25 | // --- Act
26 | const value = await evalAsync(source, context);
27 |
28 | // --- Arrange
29 | expect(value).equal(3);
30 | });
31 |
32 | it("Arrow #3", async () => {
33 | // --- Arrange
34 | const source = "((x, y) => { return x + y })(1, 2)";
35 | const context = createEvalContext({});
36 |
37 | // --- Act
38 | const value = await evalAsync(source, context);
39 |
40 | // --- Arrange
41 | expect(value).equal(3);
42 | });
43 |
44 | it("Arrow #4", async () => {
45 | // --- Arrange
46 | const source = "(x => (++x.h))(count)";
47 | const context = createEvalContext({
48 | localContext: {
49 | count: { h: 3 }
50 | }
51 | });
52 |
53 | // --- Act
54 | const value = await evalAsync(source, context);
55 |
56 | // --- Arrange
57 | expect(value).equal(4);
58 | });
59 |
60 | it("Arrow #5", async () => {
61 | // --- Arrange
62 | const source = "(x => x += 2)(count)";
63 | const context = createEvalContext({
64 | localContext: {
65 | count: 3
66 | }
67 | });
68 |
69 | // --- Act
70 | const value = await evalAsync(source, context);
71 |
72 | // --- Arrange
73 | expect(value).equal(5);
74 | });
75 |
76 | it("Arrow #6", async () => {
77 | // --- Arrange
78 | const source = "(x => x += 2)(count + 4)";
79 | const context = createEvalContext({
80 | localContext: {
81 | count: 3
82 | }
83 | });
84 |
85 | // --- Act
86 | const value = await evalAsync(source, context);
87 |
88 | // --- Arrange
89 | expect(value).equal(9);
90 | });
91 |
92 | it("Arrow #7", async () => {
93 | // --- Arrange
94 | const source = "[1,2,3,4,5].filter(x => x % 2 === 0)[1]";
95 | const context = createEvalContext({
96 | localContext: {
97 | count: 3
98 | }
99 | });
100 |
101 | // --- Act
102 | const value = await evalAsync(source, context);
103 |
104 | // --- Arrange
105 | expect(value).equal(4);
106 | });
107 |
108 | it("Arrow #8", async () => {
109 | // --- Arrange
110 | const source = "containsArray.array.filter(item => item % 2 === 0)[1]";
111 | const context = createEvalContext({
112 | localContext: {
113 | containsArray: {
114 | array: [5, 4, 3, 2, 1]
115 | }
116 | }
117 | });
118 |
119 | // --- Act
120 | const value = await evalAsync(source, context);
121 |
122 | // --- Arrange
123 | expect(value).equal(2);
124 | });
125 |
126 | it("Arrow #9", async () => {
127 | // --- Arrange
128 | const source = "array.reduce((acc, item) => acc + item, 0)";
129 | const context = createEvalContext({
130 | localContext: {
131 | array: [5, 4, 3, 2, 1]
132 | }
133 | });
134 |
135 | // --- Act
136 | const value = await evalAsync(source, context);
137 |
138 | // --- Arrange
139 | expect(value).equal(15);
140 | });
141 |
142 | it("Arrow with rest #1", async () => {
143 | // --- Arrange
144 | const source = "((...a) => a[0] + a[1])(1, 2)";
145 | const context = createEvalContext({});
146 |
147 | // --- Act
148 | const value = await evalAsync(source, context);
149 |
150 | // --- Arrange
151 | expect(value).equal(3);
152 | });
153 |
154 | it("Arrow with rest #2", async () => {
155 | // --- Arrange
156 | const source = "((x, ...a) => x + a[0] + a[1])(1, 2, 3)";
157 | const context = createEvalContext({});
158 |
159 | // --- Act
160 | const value = await evalAsync(source, context);
161 |
162 | // --- Arrange
163 | expect(value).equal(6);
164 | });
165 | });
166 |
167 |
168 | async function evalAsync(source: string, evalContext: any): Promise<any> {
169 | const wParser = new Parser(source);
170 | const tree = wParser.parseExpr();
171 | if (tree === null) {
172 | // --- This should happen only when an expression is empty
173 | return undefined;
174 | }
175 |
176 | // --- Check for expression termination
177 | if (!wParser.isEof) {
178 | throw new Error("Expression is not terminated properly");
179 | }
180 |
181 | // --- Ok, valid source, evaluate
182 | return await evalBindingAsync(tree, evalContext, undefined);
183 | }
```
--------------------------------------------------------------------------------
/tools/create-xmlui-hello-world/index.js:
--------------------------------------------------------------------------------
```javascript
1 | #!/usr/bin/env node
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const { execSync } = require('child_process');
6 |
7 | console.log('Creating minimal XMLUI test app for HelloWorld component...\n');
8 |
9 | // Get project name from command line or use default
10 | const projectName = process.argv[2] || 'test-hello-world';
11 | const projectPath = path.resolve(process.argv[2] ? process.argv[2] : path.join(process.env.HOME || process.env.USERPROFILE, projectName));
12 |
13 | // Create project directory
14 | if (!fs.existsSync(projectPath)) {
15 | fs.mkdirSync(projectPath, { recursive: true });
16 | fs.mkdirSync(path.join(projectPath, 'xmlui'), { recursive: true });
17 | } else {
18 | console.log(`Directory ${projectPath} already exists!`);
19 | process.exit(1);
20 | }
21 |
22 | // Check if we need to build the standalone XMLUI engine
23 | const xmluiStandalonePath = path.join(__dirname, '../../xmlui/dist/standalone/xmlui-standalone.umd.js');
24 | const docsStandalonePath = path.join(__dirname, '../../docs/public/resources/files/for-download/xmlui/xmlui-standalone.umd.js');
25 |
26 | let standaloneSource = null;
27 |
28 | if (fs.existsSync(docsStandalonePath)) {
29 | standaloneSource = docsStandalonePath;
30 | console.log('Using existing XMLUI standalone from docs...');
31 | } else if (fs.existsSync(xmluiStandalonePath)) {
32 | standaloneSource = xmluiStandalonePath;
33 | console.log('Using existing XMLUI standalone from build...');
34 | } else {
35 | console.log('Building XMLUI standalone engine...');
36 | try {
37 | execSync('npm run build:xmlui-standalone', {
38 | cwd: path.join(__dirname, '../../xmlui'),
39 | stdio: 'inherit'
40 | });
41 | standaloneSource = xmluiStandalonePath;
42 | console.log('XMLUI standalone built successfully!');
43 | } catch (error) {
44 | console.log('Failed to build XMLUI standalone. Please run: cd xmlui && npm run build:xmlui-standalone');
45 | process.exit(1);
46 | }
47 | }
48 |
49 | // Copy the standalone XMLUI engine
50 | const xmluiLatestPath = path.join(projectPath, 'xmlui/xmlui-latest.js');
51 | fs.copyFileSync(standaloneSource, xmluiLatestPath);
52 | console.log('Copied XMLUI engine to xmlui/xmlui-latest.js');
53 |
54 | // Check if HelloWorld extension exists and copy it
55 | const helloWorldSource = path.join(__dirname, '../../packages/xmlui-hello-world/dist/xmlui-hello-world.js');
56 | const xmluiHelloWorldPath = path.join(projectPath, 'xmlui/xmlui-hello-world.js');
57 |
58 | if (fs.existsSync(helloWorldSource)) {
59 | fs.copyFileSync(helloWorldSource, xmluiHelloWorldPath);
60 | console.log('Copied HelloWorld extension to xmlui/xmlui-hello-world.js');
61 | } else {
62 | console.log('HelloWorld extension not found. You may need to build it first:');
63 | console.log(' cd packages/xmlui-hello-world && npm run build:extension');
64 | // Create a placeholder file
65 | fs.writeFileSync(xmluiHelloWorldPath, '// HelloWorld extension not found - please build it first\n');
66 | }
67 |
68 | // Main.xmlui
69 | const mainXmlui = `<App xmlns:Extensions="component-ns:XMLUIExtensions">
70 | <VStack gap="2rem" padding="2rem">
71 | <Heading>HelloWorld Component Test</Heading>
72 | <Extensions:HelloWorld message="Hello from XMLUI!" />
73 | </VStack>
74 | </App>`;
75 |
76 | // index.html
77 | const indexHtml = `<!DOCTYPE html>
78 | <html lang="en">
79 | <head>
80 | <meta charset="UTF-8" />
81 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
82 | <title>HelloWorld Extension Test</title>
83 | <script src="xmlui/xmlui-latest.js"></script>
84 | <script src="xmlui/xmlui-hello-world.js"></script>
85 | </head>
86 | <body>
87 | </body>
88 | </html>`;
89 |
90 | // Write files
91 | fs.writeFileSync(path.join(projectPath, 'Main.xmlui'), mainXmlui);
92 | fs.writeFileSync(path.join(projectPath, 'index.html'), indexHtml);
93 |
94 | console.log(`\n Created minimal XMLUI test app at: ${projectPath}`);
95 | console.log(` Project structure:`);
96 | console.log(` ${path.basename(projectPath)}/`);
97 | console.log(` ├── Main.xmlui`);
98 | console.log(` ├── index.html`);
99 | console.log(` └── xmlui/`);
100 | console.log(` ├── xmlui-latest.js`);
101 | console.log(` └── xmlui-hello-world.js`);
102 |
103 | console.log(`\n To run the test app:`);
104 | console.log(` cd ${projectPath}`);
105 | console.log(` python3 -m http.server`);
106 | console.log(` # Or`);
107 | console.log(` npx serve`);
108 |
109 | if (!fs.existsSync(helloWorldSource)) {
110 | console.log(`\n Note: HelloWorld extension needs to be built first. Run:`);
111 | console.log(` cd packages/xmlui-hello-world && npm run build:extension`);
112 | }
113 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/CVStack.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { test, expect } from "../../testing/fixtures";
2 |
3 | // =============================================================================
4 | // BASIC FUNCTIONALITY TESTS
5 | // =============================================================================
6 |
7 | test.describe("Basic Functionality", () => {
8 | test("renders items vertically and centers them", async ({ initTestBed, page }) => {
9 | await initTestBed(`
10 | <CVStack testId="cvstack" width="200px" height="200px" backgroundColor="lightgray">
11 | <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
12 | <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
13 | <Stack testId="item3" height="32px" width="32px" backgroundColor="green" />
14 | </CVStack>
15 | `);
16 |
17 | const cvstack = page.getByTestId("cvstack");
18 | const item1 = page.getByTestId("item1");
19 | const item2 = page.getByTestId("item2");
20 | const item3 = page.getByTestId("item3");
21 |
22 | await expect(cvstack).toBeVisible();
23 | await expect(item1).toBeVisible();
24 | await expect(item2).toBeVisible();
25 | await expect(item3).toBeVisible();
26 |
27 | // Get bounding boxes to verify vertical layout and centering
28 | const cvstackBox = await cvstack.boundingBox();
29 | const item1Box = await item1.boundingBox();
30 | const item2Box = await item2.boundingBox();
31 | const item3Box = await item3.boundingBox();
32 |
33 | // Verify items are stacked vertically (item2 should be below item1, item3 below item2)
34 | expect(item2Box!.y).toBeGreaterThan(item1Box!.y + item1Box!.height - 1); // -1 for floating point tolerance
35 | expect(item3Box!.y).toBeGreaterThan(item2Box!.y + item2Box!.height - 1); // -1 for floating point tolerance
36 |
37 | // Verify items are horizontally centered within the container
38 | const cvstackCenterX = cvstackBox!.x + cvstackBox!.width / 2;
39 | const item1CenterX = item1Box!.x + item1Box!.width / 2;
40 | const item2CenterX = item2Box!.x + item2Box!.width / 2;
41 | const item3CenterX = item3Box!.x + item3Box!.width / 2;
42 |
43 | expect(Math.abs(item1CenterX - cvstackCenterX)).toBeLessThan(1);
44 | expect(Math.abs(item2CenterX - cvstackCenterX)).toBeLessThan(1);
45 | expect(Math.abs(item3CenterX - cvstackCenterX)).toBeLessThan(1);
46 |
47 | // Verify the entire content is vertically centered within the container
48 | const allItemsTopY = item1Box!.y;
49 | const allItemsBottomY = item3Box!.y + item3Box!.height;
50 | const allItemsHeight = allItemsBottomY - allItemsTopY;
51 | const cvstackCenterY = cvstackBox!.y + cvstackBox!.height / 2;
52 | const contentCenterY = allItemsTopY + allItemsHeight / 2;
53 |
54 | expect(Math.abs(contentCenterY - cvstackCenterY)).toBeLessThan(1);
55 | });
56 |
57 | test("renders empty CVStack", async ({ initTestBed, page }) => {
58 | await initTestBed(`<CVStack testId="cvstack"></CVStack>`);
59 |
60 | const cvstack = page.getByTestId("cvstack");
61 | await expect(cvstack).toBeAttached();
62 | await expect(cvstack).toBeEmpty();
63 | });
64 |
65 | test("ignores orientation property", async ({ initTestBed, page }) => {
66 | await initTestBed(`
67 | <CVStack testId="cvstack" orientation="horizontal" width="200px" height="100px" backgroundColor="lightgray">
68 | <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
69 | <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
70 | </CVStack>
71 | `);
72 |
73 | const cvstack = page.getByTestId("cvstack");
74 | const item1 = page.getByTestId("item1");
75 | const item2 = page.getByTestId("item2");
76 |
77 | await expect(item1).toBeVisible();
78 | await expect(item2).toBeVisible();
79 |
80 | // Get bounding boxes to verify still renders vertically and centered despite orientation="horizontal"
81 | const cvstackBox = await cvstack.boundingBox();
82 | const item1Box = await item1.boundingBox();
83 | const item2Box = await item2.boundingBox();
84 |
85 | // Verify items are still stacked vertically (orientation prop should be ignored)
86 | expect(item2Box!.y).toBeGreaterThan(item1Box!.y + item1Box!.height - 1);
87 |
88 | // Verify items are still horizontally centered
89 | const cvstackCenterX = cvstackBox!.x + cvstackBox!.width / 2;
90 | const item1CenterX = item1Box!.x + item1Box!.width / 2;
91 | expect(Math.abs(item1CenterX - cvstackCenterX)).toBeLessThan(1);
92 | });
93 | });
94 |
```
--------------------------------------------------------------------------------
/xmlui/src/index.scss:
--------------------------------------------------------------------------------
```scss
1 | @use "./components-core/theming/themes.scss" as t;
2 |
3 | /* 1. Declare the order of all layers in your application.
4 | 'dynamic' is last, so it will override all other layers.
5 | IF YOU ARE CHANGING THE ORDER, MAKE SURE TO UPDATE THE ORDER IN NestedApp, too.
6 | */
7 | @layer reset, base, components, dynamic;
8 |
9 | @layer base {
10 | /************************/
11 | /* Normalization */
12 | /************************/
13 |
14 | /* Normal box-sizing model */
15 | *, *::before, *::after {
16 | box-sizing: border-box;
17 | }
18 |
19 | /* Remove default margin */
20 | * {
21 | margin: 0;
22 | }
23 |
24 | /* Allow percentage-based heights in the application */
25 | html, body {
26 | height: 100%;
27 | }
28 |
29 | #root{
30 | min-height: 100%;
31 | height: 100%;
32 | }
33 |
34 |
35 | html {
36 | -webkit-text-size-adjust: 100%;
37 | tab-size: 4;
38 | line-height: 1.7;
39 | }
40 |
41 | body {
42 | line-height: inherit;
43 | margin: 0;
44 |
45 | }
46 |
47 | /* Create a root stacking context */
48 | #root, #__next {
49 | isolation: isolate;
50 | }
51 |
52 | //tailwind css preflight
53 | *, :before, :after {
54 | box-sizing: border-box;
55 | border: 0 solid #e5e7eb
56 | }
57 |
58 | hr {
59 | color: inherit;
60 | border-top-width: 1px;
61 | height: 0
62 | }
63 |
64 | abbr:where([title]) {
65 | -webkit-text-decoration: underline dotted;
66 | text-decoration: underline dotted
67 | }
68 |
69 | h1, h2, h3, h4, h5, h6 {
70 | // font-size: inherit;
71 | font-weight: inherit
72 | }
73 |
74 | a {
75 | color: inherit;
76 | -webkit-text-decoration: inherit;
77 | text-decoration: inherit
78 | }
79 |
80 | b, strong {
81 | font-weight: bolder
82 | }
83 |
84 | code, kbd, samp, pre {
85 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
86 | font-size: 1em
87 | }
88 |
89 | small {
90 | font-size: 80%
91 | }
92 |
93 | sub, sup {
94 | vertical-align: baseline;
95 | font-size: 75%;
96 | line-height: 0;
97 | position: relative
98 | }
99 |
100 | sub {
101 | bottom: -.25em
102 | }
103 |
104 | sup {
105 | top: -.5em
106 | }
107 |
108 | table {
109 | text-indent: 0;
110 | border-color: inherit;
111 | border-collapse: collapse
112 | }
113 |
114 | button, input, optgroup, select, textarea {
115 | font-feature-settings: inherit;
116 | font-variation-settings: inherit;
117 | font-family: inherit;
118 | font-size: 100%;
119 | font-weight: inherit;
120 | line-height: inherit;
121 | color: inherit;
122 | margin: 0;
123 | padding: 0
124 | }
125 |
126 | button, select {
127 | text-transform: none
128 | }
129 |
130 | button {
131 | -webkit-appearance: button;
132 | background-color: transparent;
133 | background-image: none
134 | }
135 |
136 | [type=button] {
137 | -webkit-appearance: button;
138 | background-color: transparent;
139 | background-image: none
140 | }
141 |
142 | [type=reset] {
143 | -webkit-appearance: button;
144 | background-color: transparent;
145 | background-image: none
146 | }
147 |
148 | [type=submit] {
149 | -webkit-appearance: button;
150 | background-color: transparent;
151 | background-image: none
152 | }
153 |
154 | :-moz-focusring {
155 | outline: auto
156 | }
157 |
158 | :-moz-ui-invalid {
159 | box-shadow: none
160 | }
161 |
162 | *:focus-visible {
163 | outline: t.$focus-outline;
164 | outline-offset: t.$outlineOffset--focus;
165 | }
166 |
167 | progress {
168 | vertical-align: baseline
169 | }
170 |
171 | ::-webkit-inner-spin-button {
172 | height: auto
173 | }
174 |
175 | ::-webkit-outer-spin-button {
176 | height: auto
177 | }
178 |
179 | [type=search] {
180 | -webkit-appearance: textfield;
181 | outline-offset: -2px
182 | }
183 |
184 | ::-webkit-search-decoration {
185 | -webkit-appearance: none
186 | }
187 |
188 | ::-webkit-file-upload-button {
189 | -webkit-appearance: button;
190 | font: inherit
191 | }
192 |
193 | summary {
194 | display: list-item
195 | }
196 |
197 | blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
198 | margin: 0
199 | }
200 |
201 | fieldset {
202 | margin: 0;
203 | padding: 0
204 | }
205 |
206 | legend {
207 | padding: 0
208 | }
209 |
210 | // ol, ul, menu {
211 | // margin: 0;
212 | // padding: 0;
213 | // list-style: none
214 | // }
215 |
216 | dialog {
217 | padding: 0
218 | }
219 |
220 | textarea {
221 | resize: vertical
222 | }
223 |
224 | input::-ms-input-placeholder {
225 | opacity: 1;
226 | color: #9ca3af
227 | }
228 |
229 | input::placeholder {
230 | opacity: 1;
231 | color: #9ca3af
232 | }
233 |
234 | textarea::-ms-input-placeholder {
235 | opacity: 1;
236 | color: #9ca3af
237 | }
238 |
239 | textarea::placeholder {
240 | opacity: 1;
241 | color: #9ca3af
242 | }
243 |
244 | button, [role=button] {
245 | cursor: pointer
246 | }
247 |
248 | :disabled {
249 | cursor: default
250 | }
251 |
252 | img, svg, video, canvas, audio, iframe, embed, object {
253 | vertical-align: middle;
254 | display: block
255 | }
256 |
257 | img, video {
258 | max-width: 100%;
259 | height: auto
260 | }
261 |
262 | [hidden] {
263 | display: none
264 | }
265 | }
266 |
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/eval-tree-func-decl.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 |
3 | import { evalBindingExpression } from "../../../src/components-core/script-runner/eval-tree-sync";
4 | import {createEvalContext} from "./test-helpers";
5 |
6 | describe("Evaluate function expressions (exp)", () => {
7 | it("Function decl #1", () => {
8 | // --- Arrange
9 | const source = "(function (x) {return 2 * x})(4)";
10 | const context = createEvalContext({});
11 |
12 | // --- Act
13 | const value = evalBindingExpression(source, context);
14 |
15 | // --- Arrange
16 | expect(value).equal(8);
17 | });
18 |
19 | it("Function decl #2", () => {
20 | // --- Arrange
21 | const source = "(function (x, y) {return x + y})(1, 2)";
22 | const context = createEvalContext({});
23 |
24 | // --- Act
25 | const value = evalBindingExpression(source, context);
26 |
27 | // --- Arrange
28 | expect(value).equal(3);
29 | });
30 |
31 | it("Function decl #3", () => {
32 | // --- Arrange
33 | const source = "(function myFunc(x, y) { return x + y })(1, 2)";
34 | const context = createEvalContext({});
35 |
36 | // --- Act
37 | const value = evalBindingExpression(source, context);
38 |
39 | // --- Arrange
40 | expect(value).equal(3);
41 | });
42 |
43 | it("Function decl #4", () => {
44 | // --- Arrange
45 | const source = "(function (x) { return (++x.h) })(count)";
46 | const context = createEvalContext({
47 | localContext: {
48 | count: { h: 3 }
49 | }
50 | });
51 |
52 | // --- Act
53 | const value = evalBindingExpression(source, context);
54 |
55 | // --- Arrange
56 | expect(value).equal(4);
57 | });
58 |
59 | it("Function decl #5", () => {
60 | // --- Arrange
61 | const source = "(function (x) { return x += 2; })(count)";
62 | const context = createEvalContext({
63 | localContext: {
64 | count: 3
65 | }
66 | });
67 |
68 | // --- Act
69 | const value = evalBindingExpression(source, context);
70 |
71 | // --- Arrange
72 | expect(value).equal(5);
73 | });
74 |
75 | it("Function decl #6", () => {
76 | // --- Arrange
77 | const source = "(function (x) { return x += 2 })(count + 4)";
78 | const context = createEvalContext({
79 | localContext: {
80 | count: 3
81 | }
82 | });
83 |
84 | // --- Act
85 | const value = evalBindingExpression(source, context);
86 |
87 | // --- Arrange
88 | expect(value).equal(9);
89 | });
90 |
91 | it("Function decl #7", () => {
92 | // --- Arrange
93 | const source = "[1,2,3,4,5].filter(function (x) { return x % 2 === 0; })[1]";
94 | const context = createEvalContext({
95 | localContext: {
96 | count: 3
97 | }
98 | });
99 |
100 | // --- Act
101 | const value = evalBindingExpression(source, context);
102 |
103 | // --- Arrange
104 | expect(value).equal(4);
105 | });
106 |
107 | it("Function decl #8", () => {
108 | // --- Arrange
109 | const source = "containsArray.array.filter(function (item) { return item % 2 === 0 })[1]";
110 | const context = createEvalContext({
111 | localContext: {
112 | containsArray: {
113 | array: [5, 4, 3, 2, 1]
114 | }
115 | }
116 | });
117 |
118 | // --- Act
119 | const value = evalBindingExpression(source, context);
120 |
121 | // --- Arrange
122 | expect(value).equal(2);
123 | });
124 |
125 | it("Function decl #9", () => {
126 | // --- Arrange
127 | const source = "array.reduce(function (acc, item) { return acc + item }, 0)";
128 | const context = createEvalContext({
129 | localContext: {
130 | array: [5, 4, 3, 2, 1]
131 | }
132 | });
133 |
134 | // --- Act
135 | const value = evalBindingExpression(source, context);
136 |
137 | // --- Arrange
138 | expect(value).equal(15);
139 | });
140 |
141 | it("Function decl with rest #1", () => {
142 | // --- Arrange
143 | const source = "(function (...a) { return a[0] + a[1] })(1, 2)";
144 | const context = createEvalContext({});
145 |
146 | // --- Act
147 | const value = evalBindingExpression(source, context);
148 |
149 | // --- Arrange
150 | expect(value).equal(3);
151 | });
152 |
153 | it("Function decl with rest #2", () => {
154 | // --- Arrange
155 | const source = "(function (x, ...a) { return x + a[0] + a[1] })(1, 2, 3)";
156 | const context = createEvalContext({});
157 |
158 | // --- Act
159 | const value = evalBindingExpression(source, context);
160 |
161 | // --- Arrange
162 | expect(value).equal(6);
163 | });
164 |
165 | it("Function decl reccursive #1", () => {
166 | // --- Arrange
167 | const source = "(function factorial(n) { return n <= 0 ? 1 : n * factorial(n - 1)})(3)";
168 | const context = createEvalContext({});
169 |
170 | // --- Act
171 | const value = evalBindingExpression(source, context);
172 |
173 | // --- Arrange
174 | expect(value).equal(6);
175 | });
176 | });
177 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Accordion/AccordionNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { forwardRef, useCallback, useEffect, useMemo, useState, type ForwardedRef } from "react";
2 | import * as RAccordion from "@radix-ui/react-accordion";
3 | import classnames from "classnames";
4 |
5 | import styles from "./Accordion.module.scss";
6 |
7 | import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";
8 | import { noop } from "../../components-core/constants";
9 | import { AccordionContext } from "../../components/Accordion/AccordionContext";
10 |
11 | type Props = {
12 | className?: string;
13 | style?: React.CSSProperties;
14 | children?: React.ReactNode;
15 | triggerPosition?: "start" | "end";
16 | collapsedIcon?: string;
17 | expandedIcon?: string;
18 | hideIcon?: boolean;
19 | rotateExpanded?: string;
20 | registerComponentApi?: RegisterComponentApiFn;
21 | onDisplayDidChange?: (changedValue: string[]) => void;
22 | };
23 |
24 | export const defaultProps: Pick<
25 | Props,
26 | "hideIcon" | "collapsedIcon" | "triggerPosition" | "rotateExpanded"
27 | > = {
28 | hideIcon: false,
29 | collapsedIcon: "chevrondown",
30 | triggerPosition: "end",
31 | rotateExpanded: "180deg",
32 | };
33 |
34 | export const AccordionComponent = forwardRef(function AccordionComponent(
35 | {
36 | className,
37 | style,
38 | children,
39 | hideIcon = defaultProps.hideIcon,
40 | expandedIcon,
41 | collapsedIcon = defaultProps.collapsedIcon,
42 | triggerPosition = defaultProps.triggerPosition,
43 | onDisplayDidChange = noop,
44 | registerComponentApi,
45 | rotateExpanded = defaultProps.rotateExpanded,
46 | ...rest
47 | }: Props,
48 | forwardedRef: ForwardedRef<HTMLDivElement>,
49 | ) {
50 | const [expandedItems, setExpandedItems] = useState<string[]>([]);
51 | const [itemElements, setItemElements] = useState<Set<string>>(new Set());
52 |
53 | const collapseItem = useCallback(
54 | (id: string) => {
55 | setExpandedItems((prev) => prev.filter((item) => item !== `${id}`));
56 | },
57 | [setExpandedItems],
58 | );
59 |
60 | const expandItem = useCallback(
61 | (id: string) => {
62 | if (!expandedItems.includes(`${id}`)) {
63 | setExpandedItems((prev) => [...prev, `${id}`]);
64 | }
65 | },
66 | [setExpandedItems, expandedItems],
67 | );
68 |
69 | const toggleItem = useCallback(
70 | (id: string) => {
71 | if (expandedItems.includes(`${id}`)) {
72 | collapseItem(id);
73 | } else {
74 | expandItem(id);
75 | }
76 | },
77 | [collapseItem, expandItem, expandedItems],
78 | );
79 |
80 | const register = useCallback(
81 | (id: string) => {
82 | setItemElements((prev) => {
83 | prev.add(id);
84 | return prev;
85 | });
86 | },
87 | [setItemElements],
88 | );
89 |
90 | const unRegister = useCallback(
91 | (id: string) => {
92 | setItemElements((prev) => {
93 | prev.delete(id);
94 | return prev;
95 | });
96 | },
97 | [setItemElements],
98 | );
99 |
100 | const focusItem = useCallback(
101 | (id: string) => {
102 | if (itemElements.has(`trigger_${id}`)) {
103 | const trigger = document.getElementById(`trigger_${id}`);
104 | if (trigger) {
105 | trigger.focus();
106 | }
107 | }
108 | },
109 | [itemElements],
110 | );
111 |
112 | const isExpanded = useCallback(
113 | (id: string) => {
114 | return expandedItems.includes(`${id}`);
115 | },
116 | [expandedItems],
117 | );
118 |
119 | useEffect(() => {
120 | registerComponentApi?.({
121 | expanded: isExpanded,
122 | expand: expandItem,
123 | collapse: collapseItem,
124 | toggle: toggleItem,
125 | focus: focusItem,
126 | });
127 | }, [registerComponentApi, expandItem, collapseItem, toggleItem, focusItem, isExpanded]);
128 |
129 | const contextValue = useMemo(
130 | () => ({
131 | register,
132 | unRegister,
133 | expandItem,
134 | expandedItems,
135 | hideIcon,
136 | expandedIcon,
137 | collapsedIcon,
138 | triggerPosition,
139 | rotateExpanded,
140 | }),
141 | [
142 | register,
143 | unRegister,
144 | expandedItems,
145 | hideIcon,
146 | expandedIcon,
147 | collapsedIcon,
148 | triggerPosition,
149 | expandItem,
150 | rotateExpanded,
151 | ],
152 | );
153 |
154 | useEffect(() => {
155 | onDisplayDidChange?.(expandedItems);
156 | }, [expandedItems, onDisplayDidChange]);
157 |
158 | return (
159 | <AccordionContext.Provider value={contextValue}>
160 | <RAccordion.Root
161 | {...rest}
162 | style={style}
163 | ref={forwardedRef}
164 | value={expandedItems}
165 | type="multiple"
166 | className={classnames(styles.root, className)}
167 | onValueChange={(value) => setExpandedItems(value)}
168 | >
169 | {children}
170 | </RAccordion.Root>
171 | </AccordionContext.Provider>
172 | );
173 | });
174 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/CHStack.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { test, expect } from "../../testing/fixtures";
2 |
3 | // =============================================================================
4 | // BASIC FUNCTIONALITY TESTS
5 | // =============================================================================
6 |
7 | test.describe("Basic Functionality", () => {
8 | test("renders items horizontally and centers them", async ({ initTestBed, page }) => {
9 | await initTestBed(`
10 | <CHStack testId="chstack" width="200px" height="200px" backgroundColor="lightgray">
11 | <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
12 | <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
13 | <Stack testId="item3" height="32px" width="32px" backgroundColor="green" />
14 | </CHStack>
15 | `);
16 |
17 | const chstack = page.getByTestId("chstack");
18 | const item1 = page.getByTestId("item1");
19 | const item2 = page.getByTestId("item2");
20 | const item3 = page.getByTestId("item3");
21 |
22 | await expect(chstack).toBeVisible();
23 | await expect(item1).toBeVisible();
24 | await expect(item2).toBeVisible();
25 | await expect(item3).toBeVisible();
26 |
27 | // Get bounding boxes to verify horizontal layout and centering
28 | const chstackBox = await chstack.boundingBox();
29 | const item1Box = await item1.boundingBox();
30 | const item2Box = await item2.boundingBox();
31 | const item3Box = await item3.boundingBox();
32 |
33 | // Verify items are stacked horizontally (item2 should be to the right of item1, item3 to the right of item2)
34 | expect(item2Box!.x).toBeGreaterThan(item1Box!.x + item1Box!.width - 1); // -1 for floating point tolerance
35 | expect(item3Box!.x).toBeGreaterThan(item2Box!.x + item2Box!.width - 1); // -1 for floating point tolerance
36 |
37 | // Verify items are vertically centered within the container
38 | const chstackCenterY = chstackBox!.y + chstackBox!.height / 2;
39 | const item1CenterY = item1Box!.y + item1Box!.height / 2;
40 | const item2CenterY = item2Box!.y + item2Box!.height / 2;
41 | const item3CenterY = item3Box!.y + item3Box!.height / 2;
42 |
43 | expect(Math.abs(item1CenterY - chstackCenterY)).toBeLessThan(1);
44 | expect(Math.abs(item2CenterY - chstackCenterY)).toBeLessThan(1);
45 | expect(Math.abs(item3CenterY - chstackCenterY)).toBeLessThan(1);
46 |
47 | // Verify the entire content is horizontally centered within the container
48 | const allItemsLeftX = item1Box!.x;
49 | const allItemsRightX = item3Box!.x + item3Box!.width;
50 | const allItemsWidth = allItemsRightX - allItemsLeftX;
51 | const chstackCenterX = chstackBox!.x + chstackBox!.width / 2;
52 | const contentCenterX = allItemsLeftX + allItemsWidth / 2;
53 |
54 | expect(Math.abs(contentCenterX - chstackCenterX)).toBeLessThan(1);
55 | });
56 |
57 | test("renders empty CHStack", async ({ initTestBed, page }) => {
58 | await initTestBed(`<CHStack testId="chstack"></CHStack>`);
59 |
60 | const chstack = page.getByTestId("chstack");
61 | await expect(chstack).toBeAttached();
62 | await expect(chstack).toBeEmpty();
63 | });
64 |
65 | test("ignores orientation property", async ({ initTestBed, page }) => {
66 | await initTestBed(`
67 | <CHStack testId="chstack" orientation="vertical" width="200px" height="100px" backgroundColor="lightgray">
68 | <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
69 | <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
70 | </CHStack>
71 | `);
72 |
73 | const chstack = page.getByTestId("chstack");
74 | const item1 = page.getByTestId("item1");
75 | const item2 = page.getByTestId("item2");
76 |
77 | await expect(item1).toBeVisible();
78 | await expect(item2).toBeVisible();
79 |
80 | // Get bounding boxes to verify still renders horizontally and centered despite orientation="vertical"
81 | const chstackBox = await chstack.boundingBox();
82 | const item1Box = await item1.boundingBox();
83 | const item2Box = await item2.boundingBox();
84 |
85 | // Verify items are still stacked horizontally (orientation prop should be ignored)
86 | expect(item2Box!.x).toBeGreaterThan(item1Box!.x + item1Box!.width - 1);
87 |
88 | // Verify items are still vertically centered
89 | const chstackCenterY = chstackBox!.y + chstackBox!.height / 2;
90 | const item1CenterY = item1Box!.y + item1Box!.height / 2;
91 | expect(Math.abs(item1CenterY - chstackCenterY)).toBeLessThan(1);
92 | });
93 | });
94 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Card/Card.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./Card.module.scss";
2 |
3 | import { createComponentRenderer } from "../../components-core/renderers";
4 | import { parseScssVar } from "../../components-core/theming/themeVars";
5 | import { createMetadata, dClick } from "../metadata-helpers";
6 | import { orientationOptionMd } from "../abstractions";
7 | import { Card, defaultProps } from "./CardNative";
8 |
9 | const COMP = "Card";
10 |
11 | export const CardMd = createMetadata({
12 | status: "stable",
13 | description:
14 | "`Card` is a versatile container that groups related content with a visual " +
15 | "boundary, typically featuring background color, padding, borders, and rounded " +
16 | "corners. It's ideal for organizing information, creating sections, and " +
17 | "establishing visual hierarchy in your interface.",
18 | props: {
19 | avatarUrl: {
20 | description:
21 | `The url for an avarar image. If not specified, but [\`showAvatar\`](#showAvatar) is true, ${COMP} will show the ` +
22 | `first letters of the [\`title\`](#title).`,
23 | type: "string",
24 | },
25 | showAvatar: {
26 | description: `Indicates whether the avatar should be displayed`,
27 | valueType: "boolean",
28 | defaultValue: defaultProps.showAvatar,
29 | },
30 | avatarSize: {
31 | description: `This prop sets the size of the avatar. The default value is \`sm\`.`,
32 | availableValues: ["xs", "sm", "md", "lg"],
33 | valueType: "string",
34 | },
35 | title: {
36 | description:
37 | "This prop sets the pre-styled title. If the property is not set, no title " +
38 | "is displayed in the Card.",
39 | valueType: "string",
40 | },
41 | subtitle: {
42 | description:
43 | "This prop sets the pre-styled subtitle. If the property is not set, no subtitle " +
44 | "is displayed in the Card.",
45 | valueType: "string",
46 | },
47 | linkTo: {
48 | description:
49 | "This optional property wraps the title in a \`Link\` component that is clickable to navigate.",
50 | valueType: "string",
51 | },
52 | orientation: {
53 | description:
54 | `An optional property that governs the ${COMP}'s orientation ` +
55 | `(whether the ${COMP} lays out its children in a row or a column). ` +
56 | `If the orientation is set to \`horizontal\`, the ${COMP} will display ` +
57 | `its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`,
58 | availableValues: orientationOptionMd,
59 | valueType: "string",
60 | defaultValue: defaultProps.orientation,
61 | },
62 | },
63 | events: {
64 | click: dClick(COMP),
65 | },
66 | themeVars: parseScssVar(styles.themeVars),
67 | defaultThemeVars: {
68 | [`padding-${COMP}`]: "$space-4",
69 | [`border-${COMP}`]: "1px solid $borderColor",
70 | [`borderRadius-${COMP}`]: "$borderRadius",
71 | [`boxShadow-${COMP}`]: "none",
72 | [`backgroundColor-${COMP}`]: "$color-surface-raised",
73 | [`gap-${COMP}`]: "var(--stack-gap-default)",
74 | [`gap-title-${COMP}`]: "$gap-none",
75 | [`gap-avatar-${COMP}`]: "$gap-normal",
76 | [`verticalAlignment-title-${COMP}`]: "center",
77 | },
78 | themeVarDescriptions: {
79 | [`gap-${COMP}`]: "The gap between the component's children.",
80 | [`gap-title-${COMP}`]: "The gap between the title and the subtitle",
81 | [`gap-avatar-${COMP}`]: "The gap between the avatar and the title panel",
82 | [`horizontalAlignment-title-${COMP}`]:
83 | "The horizontal alignment of panel with the title and subtitle",
84 | [`verticalAlignment-title-${COMP}`]:
85 | "The vertical alignment of the title and subtitle to the avatar",
86 | },
87 | });
88 |
89 | export const cardComponentRenderer = createComponentRenderer(
90 | "Card",
91 | CardMd,
92 | ({ node, extractValue, renderChild, className }) => {
93 | return (
94 | <Card
95 | className={className}
96 | title={extractValue.asOptionalString(node.props.title)}
97 | linkTo={extractValue.asOptionalString(node.props.linkTo)}
98 | subtitle={extractValue.asOptionalString(node.props.subtitle)}
99 | avatarUrl={extractValue.asOptionalString(node.props.avatarUrl)}
100 | showAvatar={extractValue.asOptionalBoolean(node.props.showAvatar)}
101 | avatarSize={extractValue.asOptionalString(node.props.avatarSize)}
102 | orientation={extractValue.asOptionalString(node.props.orientation)}
103 | >
104 | {renderChild(node.children, {
105 | type: "Stack",
106 | orientation: "vertical",
107 | })}
108 | </Card>
109 | );
110 | },
111 | );
112 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/ColorPicker/ColorPickerNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import type { CSSProperties, ForwardedRef } from "react";
2 | import { useEffect, useId, useTransition } from "react";
3 | import { forwardRef, useCallback, useRef } from "react";
4 | import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
5 | import { noop } from "../../components-core/constants";
6 | import type { ValidationStatus } from "../abstractions";
7 | import { useEvent } from "../../components-core/utils/misc";
8 | import styles from "./ColorPicker.module.scss";
9 | import classnames from "classnames";
10 | import { composeRefs } from "@radix-ui/react-compose-refs";
11 | import { PART_INPUT } from "../../components-core/parts";
12 |
13 | type Props = {
14 | id?: string;
15 | value?: string;
16 | initialValue?: string;
17 | style?: CSSProperties;
18 | className?: string;
19 | onDidChange?: (newValue: string) => void;
20 | onFocus?: () => void;
21 | onBlur?: () => void;
22 | updateState?: UpdateStateFn;
23 | registerComponentApi?: RegisterComponentApiFn;
24 | autoFocus?: boolean;
25 | tabIndex?: number;
26 | required?: boolean;
27 | readOnly?: boolean;
28 | enabled?: boolean;
29 | validationStatus?: ValidationStatus;
30 | };
31 |
32 | export const defaultProps: Pick<
33 | Props,
34 | "initialValue" | "value" | "enabled" | "validationStatus"
35 | > = {
36 | initialValue: "#000000",
37 | value: "#000000",
38 | enabled: true,
39 | validationStatus: "none",
40 | };
41 |
42 | export const ColorPicker = forwardRef(
43 | (
44 | {
45 | id,
46 | style,
47 | className,
48 | updateState,
49 | onDidChange = noop,
50 | onFocus = noop,
51 | onBlur = noop,
52 | registerComponentApi,
53 | enabled = defaultProps.enabled,
54 | readOnly,
55 | value = defaultProps.value,
56 | autoFocus,
57 | tabIndex = 0,
58 | required,
59 | validationStatus = defaultProps.validationStatus,
60 | initialValue = defaultProps.initialValue,
61 | ...rest
62 | }: Props,
63 | forwardedRef: ForwardedRef<HTMLInputElement>,
64 | ) => {
65 | const [isPending, startTransition] = useTransition();
66 | const inputRef = useRef<HTMLInputElement>(null);
67 | const composedRef = forwardedRef ? composeRefs(forwardedRef, inputRef) : inputRef;
68 |
69 | const updateValue = useCallback(
70 | (value: string) => {
71 | updateState({ value });
72 | onDidChange(value);
73 | },
74 | [onDidChange, updateState],
75 | );
76 |
77 |
78 | const updateValueWithTransition = useCallback(
79 | (value: string, immediate = false) => {
80 | if (immediate) {
81 | updateValue(value);
82 | } else {
83 | startTransition(() => {
84 | updateValue(value);
85 | });
86 | }
87 | },
88 | [updateValue, startTransition],
89 | );
90 |
91 | const onInputChange = useCallback(
92 | (event: any) => {
93 | updateValueWithTransition(event.target.value);
94 | },
95 | [updateValueWithTransition],
96 | );
97 |
98 | useEffect(() => {
99 | updateState({ value: initialValue }, { initial: true });
100 | }, [initialValue, updateState]);
101 |
102 | // --- Manage obtaining and losing the focus
103 | const handleOnFocus = useCallback(() => {
104 | onFocus?.();
105 | }, [onFocus]);
106 |
107 | const handleOnBlur = useCallback(() => {
108 | onBlur?.();
109 | }, [onBlur]);
110 |
111 | const focus = useCallback(() => {
112 | inputRef.current?.focus();
113 | }, []);
114 |
115 | const setValue = useEvent((newValue) => {
116 | updateValueWithTransition(newValue, true); // Immediate update for programmatic changes
117 | });
118 |
119 | useEffect(() => {
120 | registerComponentApi?.({
121 | focus,
122 | setValue,
123 | });
124 | }, [focus, registerComponentApi, setValue]);
125 |
126 | {/* Produces a 7 character RGB color output in hex as a string type */ }
127 | return (
128 | <input
129 | {...rest}
130 | id={id}
131 | className={classnames(className,styles.colorInput, {
132 | [styles.disabled]: !enabled,
133 | [styles.error]: validationStatus === "error",
134 | [styles.warning]: validationStatus === "warning",
135 | [styles.valid]: validationStatus === "valid",
136 | })}
137 | data-part-id={PART_INPUT}
138 | style={style}
139 | disabled={!enabled}
140 | onFocus={handleOnFocus}
141 | onChange={onInputChange}
142 | readOnly={readOnly}
143 | autoFocus={autoFocus}
144 | tabIndex={tabIndex}
145 | onBlur={handleOnBlur}
146 | required={required}
147 | type="color"
148 | inputMode="text"
149 | ref={composedRef}
150 | value={value}
151 | />
152 | );
153 | },
154 | );
155 |
156 | ColorPicker.displayName = "ColorPicker";
157 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Switch/Switch.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "../Toggle/Toggle.module.scss";
2 |
3 | import { createComponentRenderer } from "../../components-core/renderers";
4 | import { parseScssVar } from "../../components-core/theming/themeVars";
5 | import {
6 | createMetadata,
7 | dAutoFocus,
8 | dClick,
9 | dDidChange,
10 | dEnabled,
11 | dGotFocus,
12 | dInitialValue,
13 | dInternal,
14 | dLabel,
15 | dLabelBreak,
16 | dLabelPosition,
17 | dLabelWidth,
18 | dLostFocus,
19 | dReadonly,
20 | dRequired,
21 | dValidationStatus,
22 | } from "../metadata-helpers";
23 | import { defaultProps, Toggle } from "../Toggle/Toggle";
24 |
25 | const COMP = "Switch";
26 |
27 | export const SwitchMd = createMetadata({
28 | status: "stable",
29 | description: "`Switch` enables users to toggle between two states: on and off.",
30 | parts: {
31 | label: {
32 | description: "The label displayed for the switch.",
33 | },
34 | input: {
35 | description: "The switch input area.",
36 | },
37 | },
38 | props: {
39 | required: dRequired(),
40 | initialValue: dInitialValue(defaultProps.initialValue),
41 | autoFocus: dAutoFocus(),
42 | readOnly: dReadonly(),
43 | enabled: dEnabled(),
44 | validationStatus: dValidationStatus(defaultProps.validationStatus),
45 | description: dInternal(
46 | `(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
47 | `of the ${COMP} besides its label.`,
48 | ),
49 | },
50 | events: {
51 | click: dClick(COMP),
52 | gotFocus: dGotFocus(COMP),
53 | lostFocus: dLostFocus(COMP),
54 | didChange: dDidChange(COMP),
55 | },
56 | apis: {
57 | value: {
58 | description:
59 | `This property holds the current value of the ${COMP}, which can be either ` +
60 | `"true" (on) or "false" (off).`,
61 | signature: "get value():boolean",
62 | },
63 | setValue: {
64 | description: `This API sets the value of the \`${COMP}\`. You can use it to programmatically change the value.`,
65 | signature: "setValue(value: boolean): void",
66 | parameters: {
67 | value: "The new value to set. Can be either true (on) or false (off).",
68 | },
69 | },
70 | },
71 | themeVars: parseScssVar(styles.themeVars),
72 | limitThemeVarsToComponent: true,
73 | defaultThemeVars: {
74 | [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
75 | [`backgroundColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
76 | [`borderColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
77 | [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
78 | [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
79 | [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
80 | [`backgroundColor-${COMP}`]: "$color-surface-0",
81 | [`borderColor-${COMP}`]: "$color-surface-200",
82 | [`borderWidth-${COMP}`]: "1px",
83 | [`backgroundColor-indicator-${COMP}`]: "$color-surface-400",
84 | [`backgroundColor-${COMP}-indicator--disabled`]: "$backgroundColor-primary",
85 | [`backgroundColor-indicator-checked-${COMP}`]: "$backgroundColor-primary",
86 | [`borderColor-checked-${COMP}`]: "$color-primary-500",
87 | [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
88 | [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
89 |
90 | dark: {
91 | [`backgroundColor-indicator-${COMP}`]: "$color-surface-500",
92 | },
93 | },
94 | });
95 |
96 | export const switchComponentRenderer = createComponentRenderer(
97 | COMP,
98 | SwitchMd,
99 | ({
100 | node,
101 | extractValue,
102 | className,
103 | updateState,
104 | state,
105 | lookupEventHandler,
106 | registerComponentApi,
107 | }) => {
108 | return (
109 | <Toggle
110 | enabled={extractValue.asOptionalBoolean(node.props.enabled)}
111 | className={className}
112 | initialValue={extractValue.asOptionalBoolean(
113 | node.props.initialValue,
114 | defaultProps.initialValue,
115 | )}
116 | value={state?.value}
117 | readOnly={extractValue.asOptionalBoolean(node.props.readOnly)}
118 | validationStatus={extractValue(node.props.validationStatus)}
119 | updateState={updateState}
120 | autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
121 | onClick={lookupEventHandler("click")}
122 | onDidChange={lookupEventHandler("didChange")}
123 | onFocus={lookupEventHandler("gotFocus")}
124 | onBlur={lookupEventHandler("lostFocus")}
125 | required={extractValue.asOptionalBoolean(node.props.required)}
126 | variant="switch"
127 | registerComponentApi={registerComponentApi}
128 | />
129 | );
130 | },
131 | );
132 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/Stack.md:
--------------------------------------------------------------------------------
```markdown
1 | %-DESC-START
2 |
3 | **Key features:**
4 | - **Dynamic orientation**: Switch between horizontal and vertical layouts programmatically
5 | - **Comprehensive alignment**: Precise control over both horizontal and vertical child positioning
6 | - **Flexible spacing**: Configurable gaps between elements with theme-aware sizing
7 | - **Content wrapping**: Automatic wrapping when space constraints require it
8 | - **Order control**: Reverse child element order with the reverse property
9 | - **Foundation for variants**: Powers HStack, VStack, CHStack, and CVStack specialized components
10 |
11 | For common scenarios, consider the specialized variants: [HStack](/components/HStack) (horizontal), [VStack](/components/VStack) (vertical), [CHStack](/components/CHStack) (centered horizontal), and [CVStack](/components/CVStack) (centered vertical).
12 |
13 | %-DESC-END
14 |
15 | %-PROP-START gap
16 |
17 | In the following example we use pixels, characters (shorthand `ch`), and the `em` CSS unit size which is a relative size to the font size of the element (See size values).
18 |
19 | ```xmlui-pg copy {3, 10} display name="Example: gap"
20 | <App>
21 | <Stack orientation="horizontal" backgroundColor="cyan"
22 | gap="80px">
23 | <Stack height="40px" width="40px" backgroundColor="red" />
24 | <Stack height="40px" width="40px" backgroundColor="green" />
25 | <Stack height="40px" width="40px" backgroundColor="blue" />
26 | <Stack height="40px" width="40px" backgroundColor="yellow" />
27 | </Stack>
28 | <Stack orientation="horizontal" backgroundColor="cyan"
29 | gap="12ch">
30 | <Stack height="40px" width="40px" backgroundColor="red" />
31 | <Stack height="40px" width="40px" backgroundColor="green" />
32 | <Stack height="40px" width="40px" backgroundColor="blue" />
33 | <Stack height="40px" width="40px" backgroundColor="yellow" />
34 | </Stack>
35 | </App>
36 | ```
37 |
38 | %-PROP-END
39 |
40 | %-PROP-START horizontalAlignment
41 |
42 | >[!INFO]
43 | > The `start` and `end` values can be affected by i18n if the layout is in a right-to-left writing style.
44 |
45 | ```xmlui-pg copy {3} display name="Example: horizontalAlignment"
46 | <App>
47 | <Stack width="100%" horizontalAlignment="center" backgroundColor="cyan">
48 | <Stack width="36px" height="36px" backgroundColor="red" />
49 | </Stack>
50 | </App>
51 | ```
52 |
53 | %-PROP-END
54 |
55 | %-PROP-START reverse
56 |
57 | Default is **false**, which indicates a left-to-right layout.
58 |
59 | ```xmlui-pg copy display name="Example: reverse"
60 | <App>
61 | <Stack backgroundColor="cyan">
62 | <Stack gap="10px" orientation="horizontal">
63 | <Stack height="40px" width="40px" backgroundColor="red" />
64 | <Stack height="40px" width="40px" backgroundColor="green" />
65 | <Stack height="40px" width="40px" backgroundColor="blue" />
66 | </Stack>
67 | <Stack reverse="true" orientation="horizontal">
68 | <Stack height="40px" width="40px" backgroundColor="red" />
69 | <Stack height="40px" width="40px" backgroundColor="green" />
70 | <Stack height="40px" width="40px" backgroundColor="blue" />
71 | </Stack>
72 | </Stack>
73 | </App>
74 | ```
75 |
76 | %-PROP-END
77 |
78 | %-PROP-START verticalAlignment
79 |
80 | ```xmlui-pg copy {2} display name="Example: verticalAlignment"
81 | <App>
82 | <Stack height="100px" verticalAlignment="end" backgroundColor="cyan">
83 | <Stack width="36px" height="36px" backgroundColor="red" />
84 | </Stack>
85 | </App>
86 | ```
87 |
88 | %-PROP-END
89 |
90 | %-PROP-START wrapContent
91 |
92 | Optional boolean which wraps the content if set to true and the available space is not big enough. Works in all orientations.
93 |
94 | ```xmlui-pg copy display name="Example: wrapContent"
95 | <App>
96 | <Stack wrapContent="true" width="140px" orientation="horizontal" backgroundColor="cyan">
97 | <Stack height="40px" width="40px" backgroundColor="blue" />
98 | <Stack height="40px" width="40px" backgroundColor="blue" />
99 | <Stack height="40px" width="40px" backgroundColor="blue" />
100 | <Stack height="40px" width="40px" backgroundColor="blue" />
101 | </Stack>
102 | </App>
103 | ```
104 |
105 | %-PROP-END
106 |
107 | %-EVENT-START click
108 |
109 | Describes the logic that fires when the component is clicked.
110 |
111 | ```xmlui-pg copy display name="Example: click"
112 | <App>
113 | <HStack var.shown="{false}">
114 | <Stack height="40px" width="40px" backgroundColor="red" onClick="shown = !shown" />
115 | <Stack when="{shown}" height="40px" width="40px" backgroundColor="blue" />
116 | </HStack>
117 | </App>
118 | ```
119 |
120 | %-EVENT-END
121 |
122 | ## Styling
123 |
124 | `Stack` is a layout container; its purpose is to render its nested child components.
125 | `Stack` has no theme variables to change its visual appearance.
126 |
```
--------------------------------------------------------------------------------
/docs/content/components/ContentSeparator.md:
--------------------------------------------------------------------------------
```markdown
1 | # ContentSeparator [#contentseparator]
2 |
3 | `ContentSeparator` creates visual dividers between content sections using horizontal or vertical lines. It's essential for improving readability by breaking up dense content, separating list items, or creating clear boundaries between different UI sections.
4 |
5 | **Key features:**
6 | - **Flexible orientation**: Create horizontal dividers (default) or vertical dividers between content
7 | - **Customizable sizing**: Control thickness with the `size` property
8 | - **Automatic spacing**: Takes full width/height of container unless size is specified
9 |
10 | ## Properties [#properties]
11 |
12 | ### `orientation` (default: "horizontal") [#orientation-default-horizontal]
13 |
14 | Sets the main axis of the component
15 |
16 | Available values:
17 |
18 | | Value | Description |
19 | | --- | --- |
20 | | `horizontal` | The component will fill the available space horizontally **(default)** |
21 | | `vertical` | The component will fill the available space vertically |
22 |
23 | See the demo for an example under [`size`](#size).
24 |
25 | >[!INFO]
26 | > The component will not be displayed if the orientation is set to `vertical` but the height of the parent container is not explicitly set to a value other than 0 or percentage is used as the size unit (e.g. 20%).
27 | > This is true even if the `ContentSeparator` has siblings in the container.
28 | > The demo below illustrates this.
29 | > Notice how the first `ContentSeparator` does not show up while the second does:
30 |
31 | ```xmlui-pg copy display name="Example: no vertical space"
32 | <App>
33 | <HStack horizontalAlignment="center">
34 | <ContentSeparator orientation="vertical" size="8px" backgroundColor="blue" />
35 | </HStack>
36 | <HStack horizontalAlignment="center" height="48px">
37 | <ContentSeparator orientation="vertical" size="8px" backgroundColor="red" />
38 | </HStack>
39 | </App>
40 | ```
41 |
42 | ### `size` [#size]
43 |
44 | This property defines the component's height (if the `orientation` is horizontal) or the width (if the `orientation` is vertical). If not defined, the component uses the entire available width or height.
45 |
46 | ```xmlui-pg copy display name="Example: size"
47 | <App>
48 | <Heading level="h2">
49 | Lorem Ipsum
50 | </Heading>
51 | <ContentSeparator />
52 | Lorem ipsum dolor sit amet, consectetur adipiscing elit,
53 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
54 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
55 | ut aliquip ex ea commodo consequat.
56 | <ContentSeparator size="4px" />
57 | <HStack height="120px">
58 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
59 | dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
60 | non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
61 | <ContentSeparator orientation="vertical" size="10px" />
62 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem
63 | accusantium doloremque laudantium, totam rem aperiam,
64 | eaque ipsa quae ab illo inventore veritatis et quasi architecto
65 | beatae vitae dicta sunt explicabo.
66 | </HStack>
67 | </App>
68 | ```
69 |
70 | >[!INFO]
71 | > You can use the `width` and `height` layout properties to set the `ContentSeparator` dimensions.
72 | > For the horizontal separator, you can set the `height` property; the vertical separator offers the `width` property instead of `size`.
73 | > Nonetheless, we suggest you use the `size` property.
74 |
75 | ## Events [#events]
76 |
77 | This component does not have any events.
78 |
79 | ## Exposed Methods [#exposed-methods]
80 |
81 | This component does not expose any methods.
82 |
83 | ## Styling [#styling]
84 |
85 | ### Theme Variables [#theme-variables]
86 |
87 | | Variable | Default Value (Light) | Default Value (Dark) |
88 | | --- | --- | --- |
89 | | [backgroundColor](../styles-and-themes/common-units/#color)-ContentSeparator | $color-surface-200 | $color-surface-200 |
90 | | [marginBottom](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
91 | | [margin](../styles-and-themes/common-units/#size)Horizontal-ContentSeparator | 0 | 0 |
92 | | [marginLeft](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
93 | | [marginRight](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
94 | | [marginTop](../styles-and-themes/common-units/#size)-ContentSeparator | *none* | *none* |
95 | | [margin](../styles-and-themes/common-units/#size)Vertical-ContentSeparator | 0 | 0 |
96 | | [size](../styles-and-themes/common-units/#size)-ContentSeparator | 1px | 1px |
97 |
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/PlaygroundNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { useEffect, useId, useMemo, useReducer } from "react";
2 | import {
3 | appDescriptionInitialized,
4 | optionsInitialized,
5 | PlaygroundContext,
6 | playgroundReducer,
7 | } from "../state/store";
8 | import { INITIAL_PLAYGROUND_STATE, preprocessCode } from "../utils/helpers";
9 | import styles from "./PlaygroundNative.module.scss";
10 | import type { ApiInterceptorDefinition, ThemeDefinition, ThemeTone } from "xmlui";
11 | import { ErrorBoundary } from "xmlui";
12 | import { PlaygroundContent } from "./PlaygroundContent";
13 | import { Header } from "./Header";
14 |
15 | type PlaygroundProps = {
16 | name: string;
17 | description?: string;
18 | app: string;
19 | api?: ApiInterceptorDefinition;
20 | themes?: ThemeDefinition[];
21 | defaultTheme?: string;
22 | defaultTone?: ThemeTone;
23 | resources?: any;
24 | components: string[];
25 | previewOnly?: boolean;
26 | height?: number | string;
27 | initialEditorHeight?: string;
28 | swapped?: boolean;
29 | horizontal?: boolean;
30 | allowStandalone?: boolean;
31 | fixedTheme?: boolean;
32 | };
33 |
34 | const EMPTY_ARRAY: any[] = [];
35 | const EMPTY_OBJECT = {};
36 |
37 | export const Playground = ({
38 | name,
39 | description,
40 | app,
41 | themes = EMPTY_ARRAY,
42 | defaultTheme,
43 | defaultTone,
44 | resources = EMPTY_OBJECT,
45 | previewOnly = false,
46 | components = EMPTY_ARRAY,
47 | height,
48 | initialEditorHeight = "50%",
49 | swapped = false,
50 | horizontal = false,
51 | allowStandalone = true,
52 | api,
53 | fixedTheme = false,
54 | }: PlaygroundProps) => {
55 | const id = useId();
56 |
57 | const initializationProps = useMemo(
58 | () => ({
59 | name,
60 | description,
61 | app,
62 | themes,
63 | defaultTheme,
64 | defaultTone,
65 | resources,
66 | previewOnly,
67 | components,
68 | initialEditorHeight,
69 | swapped,
70 | horizontal,
71 | allowStandalone,
72 | api,
73 | fixedTheme,
74 | }),
75 | [
76 | name,
77 | description,
78 | app,
79 | themes,
80 | defaultTheme,
81 | defaultTone,
82 | resources,
83 | previewOnly,
84 | components,
85 | initialEditorHeight,
86 | swapped,
87 | horizontal,
88 | allowStandalone,
89 | api,
90 | fixedTheme,
91 | ],
92 | );
93 |
94 | useEffect(() => {
95 | if (initializationProps.app) {
96 | dispatch(
97 | appDescriptionInitialized({
98 | config: {
99 | name: initializationProps.name,
100 | description: initializationProps.description,
101 | logo: null,
102 | appGlobals: {},
103 | resources: initializationProps.resources,
104 | themes: initializationProps.themes,
105 | defaultTone: initializationProps.defaultTone,
106 | defaultTheme: initializationProps.defaultTheme,
107 | },
108 | components: initializationProps.components.map((c) => preprocessCode(c)),
109 | app: preprocessCode(initializationProps.app),
110 | api: initializationProps.api,
111 | }),
112 | );
113 |
114 | dispatch(
115 | optionsInitialized({
116 | orientation: initializationProps.horizontal ? "horizontal" : "vertical",
117 | swapped: initializationProps.swapped,
118 | activeTheme: initializationProps.defaultTheme,
119 | activeTone: initializationProps.defaultTone,
120 | content: "app",
121 | previewMode: initializationProps.previewOnly,
122 | allowStandalone: initializationProps.allowStandalone,
123 | id: 0,
124 | language: "xmlui",
125 | fixedTheme: initializationProps.fixedTheme,
126 | }),
127 | );
128 | }
129 | }, [initializationProps]);
130 |
131 | const [playgroundState, dispatch] = useReducer(playgroundReducer, INITIAL_PLAYGROUND_STATE);
132 |
133 | const playgroundContextValue = useMemo(() => {
134 | return {
135 | playgroundId: id,
136 | status: playgroundState.status,
137 | options: playgroundState.options,
138 | text: playgroundState.text,
139 | originalAppDescription: playgroundState.originalAppDescription,
140 | appDescription: playgroundState.appDescription,
141 | dispatch,
142 | error: playgroundState.error,
143 | };
144 | }, [
145 | id,
146 | playgroundState.status,
147 | playgroundState.options,
148 | playgroundState.text,
149 | playgroundState.originalAppDescription,
150 | playgroundState.appDescription,
151 | playgroundState.error,
152 | ]);
153 |
154 | return (
155 | <PlaygroundContext.Provider value={playgroundContextValue}>
156 | <ErrorBoundary>
157 | <div className={styles.playground}>
158 | <Header />
159 | <PlaygroundContent height={height} initialPrimarySize={initialEditorHeight} />
160 | </div>
161 | </ErrorBoundary>
162 | </PlaygroundContext.Provider>
163 | );
164 | };
165 |
```