This is page 85 of 144. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/%7Bsrc%7D?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── cyan-tools-design.md
│ ├── every-moments-teach.md
│ ├── full-symbols-accept.md
│ └── tricky-zoos-crash.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ ├── ContentSeparatorNative.tsx
│ │ │ └── test-padding.xmlui
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components-core/script-runner/eval-tree-async.ts:
--------------------------------------------------------------------------------
```typescript
import { isPlainObject } from "lodash-es";
import type { TemplateLiteralExpression } from "./ScriptingSourceTree";
import {
T_ARRAY_LITERAL,
T_ARROW_EXPRESSION,
T_ASSIGNMENT_EXPRESSION,
T_BINARY_EXPRESSION,
T_BLOCK_STATEMENT,
T_CALCULATED_MEMBER_ACCESS_EXPRESSION,
T_CONDITIONAL_EXPRESSION,
T_DESTRUCTURE,
T_EMPTY_STATEMENT,
T_EXPRESSION_STATEMENT,
T_FUNCTION_INVOCATION_EXPRESSION,
T_IDENTIFIER,
T_LITERAL,
T_MEMBER_ACCESS_EXPRESSION,
T_OBJECT_LITERAL,
T_POSTFIX_OP_EXPRESSION,
T_PREFIX_OP_EXPRESSION,
T_RETURN_STATEMENT,
T_SEQUENCE_EXPRESSION,
T_SPREAD_EXPRESSION,
T_TEMPLATE_LITERAL_EXPRESSION,
T_UNARY_EXPRESSION,
T_VAR_DECLARATION,
type ArrayLiteral,
type ArrowExpression,
type AssignmentExpression,
type BinaryExpression,
type CalculatedMemberAccessExpression,
type ConditionalExpression,
type Expression,
type FunctionInvocationExpression,
type Identifier,
type MemberAccessExpression,
type ObjectLiteral,
type PostfixOpExpression,
type PrefixOpExpression,
type ReturnStatement,
type SequenceExpression,
type Statement,
type UnaryExpression,
type VarDeclaration,
} from "./ScriptingSourceTree";
import type { BlockScope } from "../../abstractions/scripting/BlockScope";
import type { LogicalThread } from "../../abstractions/scripting/LogicalThread";
import type { BindingTreeEvaluationContext } from "./BindingTreeEvaluationContext";
import { processDeclarationsAsync, processStatementQueueAsync } from "./process-statement-async";
import {
evalArrow,
evalAssignmentCore,
evalBinaryCore,
evalCalculatedMemberAccessCore,
evalIdentifier,
evalLiteral,
evalMemberAccessCore,
evalPreOrPostCore,
evalTemplateLiteralCore,
evalUnaryCore,
getExprValue,
getRootIdScope,
isPromise,
setExprValue,
} from "./eval-tree-common";
import { ensureMainThread } from "./process-statement-common";
import { getAsyncProxy } from "./asyncProxy";
import { isBannedFunction } from "./bannedFunctions";
type EvaluatorAsyncFunction = (
thisStack: any[],
expr: Expression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
) => Promise<any>;
/**
* Evaluates a binding represented by the specified expression
* @param expr Expression to evaluate
* @param evalContext Evaluation context to use
* @param thread The logical thread to use for evaluation
* @param onStatementCompleted Execute this function when a statement is completed
*/
export async function evalBindingAsync(
expr: Expression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread | undefined,
): Promise<any> {
// --- Prepare the evaluation context
const thisStack: any[] = [];
ensureMainThread(evalContext);
thread ??= evalContext.mainThread;
// --- Evaluate the expression using the context
return await evalBindingExpressionTreeAsync(
thisStack,
expr,
evalContext,
thread ?? evalContext.mainThread!,
);
}
/**
* Executes the specified arrow function
* @param expr Arrow function expression to run
* @param evalContext Evaluation context to use
* @param onStatementCompleted Execute this function when a statement is completed
* @param thread The logical thread to use for evaluation
* @param args Arguments of the arrow function to execute
*/
export async function executeArrowExpression(
expr: ArrowExpression,
evalContext: BindingTreeEvaluationContext,
thread?: LogicalThread,
...args: any[]
): Promise<any> {
// --- Just an extra safety check
if (expr.type !== T_ARROW_EXPRESSION) {
throw new Error("executeArrowExpression expects an 'ArrowExpression' object.");
}
// --- This is the evaluator that an arrow expression uses internally
const evaluator: EvaluatorAsyncFunction = evalBindingExpressionTreeAsync;
// --- Compiles the Arrow function to a JavaScript function
const nativeFunction = await createArrowFunctionAsync(evaluator, expr);
// --- Run the compiled arrow function. Note, we have two prefix arguments:
// --- #1: The names of arrow function arguments
// --- #2: The evaluation context the arrow function runs in
// --- #others: The real arguments of the arrow function
return await nativeFunction(expr.args, evalContext, thread ?? evalContext.mainThread, ...args);
}
/**
* Evaluates the specified binding expression tree and retrieves the evaluated value
* @param expr Binding tree expression
* @param thisStack Stack of "this" object to use with function calls
* @param evalContext Evaluation context
* @param thread The logical thread to use for evaluation
* @param onStatementCompleted Execute this function when a statement is completed
* This code uses the JavaScript semantics and errors when evaluating the code.
* We use `thisStack` to keep track of the partial results of the evaluation tree so that we can set
* the real `this` context when invoking a function.
*/
async function evalBindingExpressionTreeAsync(
thisStack: any[],
expr: Expression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
if (!evalContext.options) {
evalContext.options = { defaultToOptionalMemberAccess: true };
}
// --- Prepare evaluation
const evaluator: EvaluatorAsyncFunction = evalBindingExpressionTreeAsync;
// --- Process the expression according to its type
try {
switch (expr.type) {
case T_TEMPLATE_LITERAL_EXPRESSION:
return evalTemplateLiteralAsync(evaluator, thisStack, expr, evalContext, thread);
case T_LITERAL:
return evalLiteral(thisStack, expr, thread);
case T_IDENTIFIER:
return evalIdentifier(thisStack, expr, evalContext, thread);
case T_MEMBER_ACCESS_EXPRESSION:
return await evalMemberAccessAsync(evaluator, thisStack, expr, evalContext, thread);
case T_CALCULATED_MEMBER_ACCESS_EXPRESSION:
return await evalCalculatedMemberAccessAsync(
evaluator,
thisStack,
expr,
evalContext,
thread,
);
case T_SEQUENCE_EXPRESSION:
return await evalSequenceAsync(evaluator, thisStack, expr, evalContext, thread);
case T_ARRAY_LITERAL:
return await evalArrayLiteralAsync(evaluator, thisStack, expr, evalContext, thread);
case T_OBJECT_LITERAL:
return await evalObjectLiteralAsync(evaluator, thisStack, expr, evalContext, thread);
case T_UNARY_EXPRESSION:
return await evalUnaryAsync(evaluator, thisStack, expr, evalContext, thread);
case T_BINARY_EXPRESSION:
return await evalBinaryAsync(evaluator, thisStack, expr, evalContext, thread);
case T_CONDITIONAL_EXPRESSION:
return await evalConditionalAsync(evaluator, thisStack, expr, evalContext, thread);
case T_ASSIGNMENT_EXPRESSION:
return await evalAssignmentAsync(evaluator, thisStack, expr, evalContext, thread);
case T_PREFIX_OP_EXPRESSION:
case T_POSTFIX_OP_EXPRESSION:
return await evalPreOrPostAsync(evaluator, thisStack, expr, evalContext, thread);
case T_FUNCTION_INVOCATION_EXPRESSION:
// --- Special async handling
return await evalFunctionInvocationAsync(evaluator, thisStack, expr, evalContext, thread);
case T_ARROW_EXPRESSION:
return evalArrow(thisStack, expr, thread);
case T_SPREAD_EXPRESSION:
throw new Error("Cannot use spread expression (...) with the current intermediate value.");
default:
throw new Error(`Unknown expression tree node: ${(expr as any).type}`);
}
} catch (e) {
//TODO decorate error with expression details (startColumn, startLine, startPosition, etc.)
throw e;
}
}
async function evalMemberAccessAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: MemberAccessExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
await evaluator(thisStack, expr.obj, evalContext, thread);
await completeExprValue(expr.obj, thread);
// --- At this point we definitely keep the parent object on `thisStack`, as it will be the context object
// --- of a FunctionInvocationExpression, if that follows the MemberAccess. Other operations would call
// --- `thisStack.pop()` to remove the result from the previous `evalBindingExpressionTree` call.
return evalMemberAccessCore(thisStack, expr, evalContext, thread);
}
async function evalCalculatedMemberAccessAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: CalculatedMemberAccessExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
await evaluator(thisStack, expr.obj, evalContext, thread);
await completeExprValue(expr.obj, thread);
await evaluator(thisStack, expr.member, evalContext, thread);
thisStack.pop();
await completeExprValue(expr.member, thread);
return evalCalculatedMemberAccessCore(thisStack, expr, evalContext, thread);
}
function evalSequenceAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: SequenceExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
if (!expr.exprs || expr.exprs.length === 0) {
throw new Error(`Missing expression sequence`);
}
const result = expr.exprs.map(async (e) => {
const value = await evaluator(thisStack, e, evalContext, thread);
setExprValue(e, { value }, thread);
thisStack.pop();
return value;
});
const lastObj = result[result.length - 1];
thisStack.push(lastObj);
return lastObj;
}
async function evalArrayLiteralAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: ArrayLiteral,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
const value: any[] = [];
for (const item of expr.items) {
if (item.type === T_SPREAD_EXPRESSION) {
const spreadArray = await evaluator(thisStack, item.expr, evalContext, thread);
thisStack.pop();
if (!Array.isArray(spreadArray)) {
throw new Error("Spread operator within an array literal expects an array operand.");
}
value.push(...spreadArray);
} else {
value.push(await evaluator(thisStack, item, evalContext, thread));
thisStack.pop();
thisStack.push(value);
}
}
// --- Done.
setExprValue(expr, { value }, thread);
thisStack.push(value);
return value;
}
async function evalObjectLiteralAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: ObjectLiteral,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
const objectHash: any = {};
for (const prop of expr.props) {
if (!Array.isArray(prop)) {
// --- We're using a spread expression
const spreadItems = await evaluator(thisStack, prop.expr, evalContext, thread);
thisStack.pop();
if (Array.isArray(spreadItems)) {
// --- Spread of an array
for (let i = 0; i < spreadItems.length; i++) {
objectHash[i] = spreadItems[i];
}
} else if (typeof spreadItems === "object") {
// --- Spread of a hash object
for (const [key, value] of Object.entries(spreadItems)) {
objectHash[key] = value;
}
}
continue;
}
// --- We're using key/[value] pairs
let key: any;
switch (prop[0].type) {
case T_LITERAL:
key = prop[0].value;
break;
case T_IDENTIFIER:
key = prop[0].name;
break;
default:
key = await evaluator(thisStack, prop[0], evalContext, thread);
thisStack.pop();
break;
}
objectHash[key] = await evaluator(thisStack, prop[1], evalContext, thread);
thisStack.pop();
}
// --- Done.
setExprValue(expr, { value: objectHash }, thread);
thisStack.push(objectHash);
return objectHash;
}
async function evalUnaryAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: UnaryExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
await evaluator(thisStack, expr.expr, evalContext, thread);
thisStack.pop();
await completeExprValue(expr.expr, thread);
return evalUnaryCore(expr, thisStack, evalContext, thread);
}
async function evalBinaryAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: BinaryExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
await evaluator(thisStack, expr.left, evalContext, thread);
thisStack.pop();
const l = await completeExprValue(expr.left, thread);
if (expr.op === "&&" && !l) {
setExprValue(expr, { value: l }, thread);
thisStack.push(l);
return l;
}
if (expr.op === "||" && l) {
setExprValue(expr, { value: l }, thread);
thisStack.push(l);
return l;
}
await evaluator(thisStack, expr.right, evalContext, thread);
thisStack.pop();
await completeExprValue(expr.right, thread);
return evalBinaryCore(expr, thisStack, evalContext, thread);
}
async function evalConditionalAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: ConditionalExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
await evaluator(thisStack, expr.cond, evalContext, thread);
thisStack.pop();
const condition = await completeExprValue(expr.cond, thread);
const value = await evaluator(
thisStack,
condition ? expr.thenE : expr.elseE,
evalContext,
thread,
);
setExprValue(expr, { value }, thread);
return value;
}
async function evalAssignmentAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: AssignmentExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
const leftValue = expr.leftValue;
const rootScope = getRootIdScope(leftValue, evalContext, thread);
const updatesState = rootScope && rootScope.type !== "block";
if (updatesState && evalContext.onWillUpdate) {
void evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
}
await evaluator(thisStack, leftValue, evalContext, thread);
thisStack.pop();
await completeExprValue(leftValue, thread);
await evaluator(thisStack, expr.expr, evalContext, thread);
thisStack.pop();
await completeExprValue(expr.expr, thread);
const value = evalAssignmentCore(thisStack, expr, evalContext, thread);
if (updatesState && evalContext.onDidUpdate) {
void evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
}
return value;
}
async function evalPreOrPostAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: PrefixOpExpression | PostfixOpExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
const rootScope = getRootIdScope(expr.expr, evalContext, thread);
const updatesState = rootScope && rootScope.type !== "block";
if (updatesState && evalContext.onWillUpdate) {
void evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
}
await evaluator(thisStack, expr.expr, evalContext, thread);
thisStack.pop();
await completeExprValue(expr.expr, thread);
const value = evalPreOrPostCore(thisStack, expr, evalContext, thread);
if (updatesState && evalContext.onDidUpdate) {
void evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
}
return value;
}
async function evalFunctionInvocationAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: FunctionInvocationExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
let functionObj: any;
let implicitContextObject: any = null;
// --- Check for contexted object
if (expr.obj.type === T_MEMBER_ACCESS_EXPRESSION) {
const hostObject = await evaluator(thisStack, expr.obj.obj, evalContext, thread);
await completeExprValue(expr.obj.obj, thread);
functionObj = evalMemberAccessCore(thisStack, expr.obj, evalContext, thread);
if (expr.obj.obj.type === T_IDENTIFIER && hostObject?._SUPPORT_IMPLICIT_CONTEXT) {
implicitContextObject = hostObject;
}
} else {
// --- Get the object on which to invoke the function
await evaluator(thisStack, expr.obj, evalContext, thread);
functionObj = await completeExprValue(expr.obj, thread);
}
thisStack.pop();
// --- Keep function arguments here, we pass it to the function later
const functionArgs: any[] = [];
// --- The functionObj may be an ArrowExpression. In this care we need to create the invokable arrow function
if (functionObj?._ARROW_EXPR_) {
functionArgs.push(
functionObj.args,
evalContext,
thread,
...expr.arguments.map((a) => ({ ...a, _EXPRESSION_: true })),
);
functionObj = await createArrowFunctionAsync(evaluator, functionObj as ArrowExpression);
} else if (expr.obj.type === T_ARROW_EXPRESSION) {
// --- We delay evaluating expression values. We pass the argument names as the first parameter, and then
// --- all parameter expressions
functionArgs.push(
expr.obj.args.map((a) => (a as Identifier).name),
evalContext,
thread,
...expr.arguments.map((a) => ({ ...a, _EXPRESSION_: true })),
);
} else {
// --- We evaluate the argument values to pass to a JavaScript function
for (let i = 0; i < expr.arguments.length; i++) {
const arg = expr.arguments[i];
if (arg.type === T_SPREAD_EXPRESSION) {
await evaluator([], arg.expr, evalContext, thread);
const funcArg = await completeExprValue(arg.expr, thread);
if (!Array.isArray(funcArg)) {
throw new Error("Spread operator within a function invocation expects an array operand.");
}
functionArgs.push(...funcArg);
} else {
if (arg.type === T_ARROW_EXPRESSION) {
const funcArg = createArrowFunctionAsync(evaluator, arg);
const wrappedFunc = (...args: any[]) => {
return funcArg(arg.args, evalContext, thread, ...args);
};
functionArgs.push(wrappedFunc);
} else {
await evaluator([], arg, evalContext, thread);
const funcArg = await completeExprValue(arg, thread);
if (funcArg?._ARROW_EXPR_) {
const wrappedFuncArg = createArrowFunctionAsync(evaluator, funcArg);
const wrappedFunc = (...args: any[]) =>
wrappedFuncArg(funcArg.args, evalContext, thread, ...args);
functionArgs.push(wrappedFunc);
} else {
functionArgs.push(funcArg);
}
}
}
}
// --- We can pass implicit arguments to JavaScript function
if (implicitContextObject) {
// --- Let's obtain the implicit context
if (evalContext.implicitContextGetter) {
const implicitContext = evalContext.implicitContextGetter(implicitContextObject);
functionArgs.unshift(implicitContext);
} else {
throw new Error("Cannot use implicitContextGetter, it is undefined");
}
}
}
// --- Check if the function is banned from running
const bannedInfo = isBannedFunction(functionObj);
if (bannedInfo.banned) {
throw new Error(
`Function ${bannedInfo.func?.name ?? "unknown"} is not allowed to call. ${bannedInfo?.help ?? ""}`,
);
}
// --- We use context for "this"
const currentContext = thisStack.length > 0 ? thisStack.pop() : evalContext.localContext;
// --- We need to use proxies for JavaScript functions (such as Array.prototype.filter) not supporting
// --- async arguments
functionObj = getAsyncProxy(functionObj, functionArgs, currentContext);
// --- Now, invoke the function
const rootScope = getRootIdScope(expr.obj, evalContext, thread);
const updatesState = rootScope && rootScope.type !== "block";
if (updatesState && evalContext.onWillUpdate) {
void evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
}
const value = evalContext.options?.defaultToOptionalMemberAccess
? (functionObj as Function)?.call(currentContext, ...functionArgs)
: (functionObj as Function).call(currentContext, ...functionArgs);
let returnValue = await completePromise(value);
if (updatesState && evalContext.onDidUpdate) {
void evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
}
// --- Done.
setExprValue(expr, { value: returnValue }, thread);
thisStack.push(returnValue);
return returnValue;
}
function createArrowFunctionAsync(
evaluator: EvaluatorAsyncFunction,
expr: ArrowExpression,
): Function {
// --- Use this function, it evaluates the arrow function
return async (...args: any[]) => {
// --- Prepare the variables to pass
const runTimeEvalContext = args[1] as BindingTreeEvaluationContext;
const runtimeThread = args[2] as LogicalThread;
// --- Create the thread that runs the arrow function
const workingThread: LogicalThread = {
parent: runtimeThread,
childThreads: [],
blocks: [{ vars: {} }],
loops: [],
breakLabelValue: -1,
closures: (expr as any).closureContext,
};
runtimeThread.childThreads.push(workingThread);
// --- Create a block for a named arrow function
if (expr.name) {
const functionBlock: BlockScope = { vars: {} };
workingThread.blocks ??= [];
workingThread.blocks.push(functionBlock);
functionBlock.vars[expr.name] = expr;
functionBlock.constVars = new Set([expr.name]);
}
// --- Assign argument values to names
const arrowBlock: BlockScope = { vars: {} };
workingThread.blocks ??= [];
workingThread.blocks.push(arrowBlock);
const argSpecs = args[0] as Expression[];
let restFound = false;
for (let i = 0; i < argSpecs.length; i++) {
// --- Turn argument specification into processable variable declarations
const argSpec = argSpecs[i];
let decl: VarDeclaration | undefined;
switch (argSpec.type) {
case T_IDENTIFIER: {
decl = {
type: T_VAR_DECLARATION,
id: argSpec.name,
} as VarDeclaration;
break;
}
case T_DESTRUCTURE: {
decl = {
type: T_VAR_DECLARATION,
id: argSpec.id,
aDestr: argSpec.aDestr,
oDestr: argSpec.oDestr,
} as VarDeclaration;
break;
}
case T_SPREAD_EXPRESSION: {
restFound = true;
decl = {
type: T_VAR_DECLARATION,
id: (argSpec.expr as unknown as Identifier).name,
} as VarDeclaration;
break;
}
default:
throw new Error("Unexpected arrow argument specification");
}
if (decl) {
if (restFound) {
// --- Get the rest of the arguments
const restArgs = args.slice(i + 3);
let argVals: any[] = [];
for (const arg of restArgs) {
if (arg?._EXPRESSION_) {
argVals.push(await evaluator([], arg, runTimeEvalContext, runtimeThread));
} else {
argVals.push(arg);
}
}
await processDeclarationsAsync(
arrowBlock,
runTimeEvalContext,
runtimeThread,
[decl],
false,
true,
argVals,
);
} else {
// --- Get the actual value to work with
let argVal = args[i + 3];
if (argVal?._EXPRESSION_) {
argVal = await evaluator([], argVal, runTimeEvalContext, runtimeThread);
}
await processDeclarationsAsync(
arrowBlock,
runTimeEvalContext,
runtimeThread,
[decl],
false,
true,
argVal,
);
}
}
}
// --- Evaluate the arrow expression body
let returnValue: any;
let statements: Statement[];
switch (expr.statement.type) {
case T_EMPTY_STATEMENT:
statements = [];
break;
case T_EXPRESSION_STATEMENT:
// --- Create a new thread for the call
statements = [
{
type: T_RETURN_STATEMENT,
expr: expr.statement.expr,
} as ReturnStatement,
];
break;
case T_BLOCK_STATEMENT:
// --- Create a new thread for the call
statements = expr.statement.stmts;
break;
default:
throw new Error(
`Arrow expression with a body of '${expr.statement.type}' is not supported yet.`,
);
}
// --- Process the statement with a new processor
await processStatementQueueAsync(statements, runTimeEvalContext, workingThread);
// --- Return value is in a return value slot
returnValue = workingThread.returnValue;
// --- Remove the current working thread
const workingIndex = runtimeThread.childThreads.indexOf(workingThread);
if (workingIndex < 0) {
throw new Error("Cannot find thread to remove.");
}
runtimeThread.childThreads.splice(workingIndex, 1);
// --- Remove the function level block
workingThread.blocks.pop();
// --- Return the function value
return returnValue;
};
}
// --- Completes all promises within the input
function completePromise(input: any): Promise<any> {
const visited = new Map<any, any>();
return completePromiseInternal(input);
async function completePromiseInternal(input: any): Promise<any> {
// --- No need to resolve undefined or null
if (input === undefined || input === null) return input;
// --- Already visited?
const resolved = visited.get(input);
if (resolved) return resolved;
// --- Resolve the chain of promises
if (isPromise(input)) {
const awaited = await input;
visited.set(input, awaited);
return completePromiseInternal(awaited);
}
// --- In any other cases, we keep the input reference
visited.set(input, input);
// --- Resolve promises within an array
if (Array.isArray(input)) {
for (let i = 0; i < input.length; i++) {
const completedPromise = await completePromiseInternal(input[i]);
if (input[i] !== completedPromise) {
//prevent write if it's the same reference (can cause problems in frozen objects)
input.splice(i, 1, completedPromise);
}
}
return input;
}
// --- Resolve promises in object properties
if (isPlainObject(input)) {
for (const key of Object.keys(input)) {
let completedPromise = await completePromiseInternal(input[key]);
if (input[key] !== completedPromise) {
//prevent write if it's the same reference (can cause problems in frozen objects)
input[key] = completedPromise;
}
}
return input;
}
// --- Done.
return input;
}
}
async function evalTemplateLiteralAsync(
evaluator: EvaluatorAsyncFunction,
thisStack: any[],
expr: TemplateLiteralExpression,
evalContext: BindingTreeEvaluationContext,
thread: LogicalThread,
): Promise<any> {
const segmentValues = new Array(expr.segments.length);
for (let i = 0; i < expr.segments.length; ++i) {
await evaluator(thisStack, expr.segments[i], evalContext, thread);
thisStack.pop();
const evaledValue = await completeExprValue(expr.segments[i], thread);
segmentValues[i] = evaledValue;
}
const value = evalTemplateLiteralCore(segmentValues);
setExprValue(expr, { value }, thread);
thisStack.push(value);
return value;
}
export async function completeExprValue(expr: Expression, thread: LogicalThread): Promise<any> {
const exprValue = getExprValue(expr, thread);
const awaited = await completePromise(exprValue?.value);
setExprValue(expr, { ...exprValue, value: awaited }, thread);
return awaited;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/transformThemeVars.ts:
--------------------------------------------------------------------------------
```typescript
import Color from "color";
import { type HVar, parseHVar } from "../theming/hvar";
import { StyleParser } from "../../parsers/style-parser/StyleParser";
import { toCssVar } from "./layout-resolver";
export function isThemeVarName(varName: any) {
return typeof varName === "string" && varName?.startsWith("$");
}
export function resolveThemeVar(
varName: string | undefined,
theme: Record<string, string> = {},
): string {
let safeVarName = varName;
if (isThemeVarName(varName)) {
safeVarName = varName.substring(1);
}
const value = theme[safeVarName];
if (typeof value === "string" && isThemeVarName(value)) {
return resolveThemeVar(value, theme);
}
return value;
}
export function generateBaseTones(theme: Record<string, string> | undefined) {
if (!theme) {
return {};
}
const resolvedTheme = resolveThemeVars(theme);
return {
...generateBaseTonesForColor("color-primary", resolvedTheme),
...generateBaseTonesForColor("color-secondary", resolvedTheme),
...generateBaseTonesForColor("color-info", resolvedTheme),
...generateBaseTonesForColor("color-success", resolvedTheme),
...generateBaseTonesForColor("color-warn", resolvedTheme),
...generateBaseTonesForColor("color-danger", resolvedTheme),
...generateBaseTonesForColor("color-surface", resolvedTheme, { distributeEven: true }),
};
}
export function generateBaseSpacings(theme: Record<string, string> | undefined) {
if (!theme) {
return {};
}
const resolvedTheme = resolveThemeVars(theme);
const base = resolvedTheme["space-base"];
if (!base || typeof base !== "string") {
return {};
}
let baseTrimmed = base.trim();
if (baseTrimmed.startsWith(".")) {
//if we have something like .5rem
baseTrimmed = `0${baseTrimmed}`;
}
const baseNum = parseFloat(baseTrimmed);
let baseUnit = baseTrimmed.replace(baseNum + "", "") || "px";
// a) non-baseNum -> "0px"
if (Number.isNaN(baseNum)) {
return {};
}
const scale = [
0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40,
44, 48, 52, 56, 60, 64, 72, 80, 96,
];
const ret: Record<string, string> = {};
scale.forEach((step) => {
ret[`space-${(step + "").replace(".", "_")}`] = `${step * baseNum}${baseUnit}`;
});
return ret;
}
export function generateBaseFontSizes(theme: Record<string, string> | undefined) {
if (!theme) {
return {};
}
const resolvedTheme = resolveThemeVars(theme);
const base = resolvedTheme["fontSize"];
if (!base || typeof base !== "string") {
return {};
}
let baseTrimmed = base.trim();
if (baseTrimmed.startsWith(".")) {
//if we have something like .5rem
baseTrimmed = `0${baseTrimmed}`;
}
const baseNum = parseFloat(baseTrimmed);
let baseUnit = baseTrimmed.replace(baseNum + "", "") || "px";
// a) non-baseNum -> "0px"
if (Number.isNaN(baseNum)) {
return {};
}
const ret: Record<string, string> = {};
ret[`fontSize-tiny`] = `${0.625 * baseNum}${baseUnit}`;
ret[`fontSize-xs`] = `${0.75 * baseNum}${baseUnit}`;
ret[`fontSize-code`] = `${0.85 * baseNum}${baseUnit}`;
ret[`fontSize-sm`] = `${0.875 * baseNum}${baseUnit}`;
ret[`fontSize-base`] = base;
ret[`fontSize-lg`] = `${1.125 * baseNum}${baseUnit}`;
ret[`fontSize-xl`] = `${1.25 * baseNum}${baseUnit}`;
ret[`fontSize-2xl`] = `${1.5 * baseNum}${baseUnit}`;
ret[`fontSize-3xl`] = `${1.875 * baseNum}${baseUnit}`;
ret[`fontSize-4xl`] = `${2.25 * baseNum}${baseUnit}`;
ret[`fontSize-5xl`] = `${3 * baseNum}${baseUnit}`;
ret[`fontSize-6xl`] = `${3.75 * baseNum}${baseUnit}`;
ret[`fontSize-7xl`] = `${4.5 * baseNum}${baseUnit}`;
ret[`fontSize-8xl`] = `${6 * baseNum}${baseUnit}`;
ret[`fontSize-9xl`] = `${8 * baseNum}${baseUnit}`;
return ret;
}
export function generateTextFontSizes(theme: Record<string, string> | undefined) {
if (!theme) {
return {};
}
const resolvedTheme = resolveThemeVars(theme);
const base = resolvedTheme["fontSize-Text"];
if (!base || typeof base !== "string") {
return {};
}
// --- Get the CSS variable name of fontSize-Text-keyboard
const ret: Record<string, string> = {};
ret[`fontSize-Text-keyboard`] = `calc(${toCssVar("$fontSize-Text")} * 0.875)`;
ret[`fontSize-Text-sample`] = `calc(${toCssVar("$fontSize-Text")} * 0.875)`;
ret[`fontSize-Text-sup`] = `calc(${toCssVar("$fontSize-Text")} * 0.625)`;
ret[`fontSize-Text-sub`] = `calc(${toCssVar("$fontSize-Text")} * 0.625)`;
ret[`fontSize-Text-title`] = `calc(${toCssVar("$fontSize-Text")} * 1.5)`;
ret[`fontSize-Text-subtitle`] = `calc(${toCssVar("$fontSize-Text")} * 1.25)`;
ret[`fontSize-Text-small`] = `calc(${toCssVar("$fontSize-Text")} * 0.875)`;
ret[`fontSize-Text-placeholder`] = `calc(${toCssVar("$fontSize-Text")} * 0.875)`;
ret[`fontSize-Text-paragraph`] = toCssVar("$fontSize-Text");
ret[`fontSize-Text-subheading`] = `calc(${toCssVar("$fontSize-Text")} * 0.625)`;
ret[`fontSize-Text-tableheading`] = `calc(${toCssVar("$fontSize-Text")} * 0.625)`;
ret[`fontSize-Text-secondary`] = `calc(${toCssVar("$fontSize-Text")} * 0.875)`;
return ret;
}
export function generateButtonTones(theme?: Record<string, string>) {
if (!theme) {
return {};
}
const resolvedTheme = resolveThemeVars(theme);
const variants = ["primary", "secondary", "attention"];
let ret = {};
variants.forEach((variant) => {
const solidTones = mapTones(
findClosest(resolvedTheme, `color-Button-${variant}-solid`),
(tones) => {
return {
[`backgroundColor-Button-${variant}-solid`]: tones.base,
[`backgroundColor-Button-${variant}-solid--hover`]: tones.tone1,
[`backgroundColor-Button-${variant}-solid--active`]: tones.tone2,
[`borderColor-Button-${variant}-solid`]: tones.base,
[`borderColor-Button-${variant}-solid--hover`]: tones.base,
[`borderColor-Button-${variant}-solid--active`]: tones.base,
[`textColor-Button-${variant}-solid`]: tones.tone3,
[`textColor-Button-${variant}-solid--hover`]: tones.tone3,
[`textColor-Button-${variant}-solid--active`]: tones.tone3,
};
},
);
const outlinedTones = mapTones(
findClosest(resolvedTheme, `color-Button-${variant}-outlined`),
(tones) => {
return {
[`backgroundColor-Button-${variant}-outlined--hover`]: tones.alpha1,
[`backgroundColor-Button-${variant}-outlined--active`]: tones.alpha2,
[`borderColor-Button-${variant}-outlined`]: tones.base,
[`borderColor-Button-${variant}-outlined--hover`]: tones.tone1,
[`borderColor-Button-${variant}-outlined--active`]: tones.tone2,
[`textColor-Button-${variant}-outlined`]: tones.base,
[`textColor-Button-${variant}-outlined--hover`]: tones.tone1,
[`textColor-Button-${variant}-outlined--active`]: tones.tone2,
};
},
);
const ghostTones = mapTones(
findClosest(resolvedTheme, `color-Button-${variant}-ghost`),
(tones) => {
return {
[`backgroundColor-Button-${variant}-ghost--active`]: tones.alpha2,
[`backgroundColor-Button-${variant}-ghost--hover`]: tones.alpha1,
[`textColor-Button-${variant}-ghost`]: tones.base,
[`textColor-Button-${variant}-ghost--hover`]: tones.tone1,
[`textColor-Button-${variant}-ghost--active`]: tones.tone2,
};
},
);
ret = {
...ret,
...solidTones,
...outlinedTones,
...ghostTones,
};
});
return ret;
}
const paddingRegEx = /^padding-(?!(?:horizontal|vertical|left|right|top|bottom)-)(.+)$/;
const paddingHorizontalRegEx = /^paddingHorizontal-(.+)$/;
const paddingVerticalRegEx = /^paddingVertical-(.+)$/;
/**
* Segment the padding values into top, right, bottom, left to provide consistency
*/
export function generatePaddingSegments(theme?: Record<string, string>) {
if (!theme) {
return {};
}
const result = { ...theme };
// --- Iterate through theme variables and split padding values
Object.entries(theme).forEach(([key, value]) => {
if (value === null || value === undefined) {
// --- We want to allow theme files to use null or undefined as a synonim for
// --- "pretend this theme variable is not defined".
delete result[key];
return;
}
// --- Check the "paddingHorizontal" theme variables
let match = paddingHorizontalRegEx.exec(key);
if (match) {
// --- We have a paddingHorizontal value to segment
const remainder = match[1];
result[`paddingLeft-${remainder}`] ??= value;
result[`paddingRight-${remainder}`] ??= value;
}
// --- Check the "paddingVertical" theme variables
match = paddingVerticalRegEx.exec(key);
if (match) {
// --- We have a paddingVertical value to segment
const remainder = match[1];
result[`paddingTop-${remainder}`] ??= value;
result[`paddingBottom-${remainder}`] ??= value;
}
// --- Check the "padding" theme variables
match = paddingRegEx.exec(key);
if (!match) return;
const remainder = match[1];
// --- Check for horizontal and vertical padding values
const horizontal = theme[`paddingHorizontal-${remainder}`];
const vertical = theme[`paddingVertical-${remainder}`];
// --- We have a padding value to segment
const segments = value.trim().replace(/ +/g, " ").split(" ");
switch (segments.length) {
case 1:
result[`paddingTop-${remainder}`] ??= vertical ?? segments[0];
result[`paddingRight-${remainder}`] ??= horizontal ?? segments[0];
result[`paddingBottom-${remainder}`] ??= vertical ?? segments[0];
result[`paddingLeft-${remainder}`] ??= horizontal ?? segments[0];
break;
case 2:
result[`paddingTop-${remainder}`] ??= vertical ?? segments[0];
result[`paddingRight-${remainder}`] ??= horizontal ?? segments[1];
result[`paddingBottom-${remainder}`] ??= vertical ?? segments[0];
result[`paddingLeft-${remainder}`] ??= horizontal ?? segments[1];
break;
case 3:
result[`paddingTop-${remainder}`] ??= vertical ?? segments[0];
result[`paddingRight-${remainder}`] ??= horizontal ?? segments[1];
result[`paddingBottom-${remainder}`] ??= vertical ?? segments[2];
result[`paddingLeft-${remainder}`] ??= horizontal ?? segments[1];
break;
case 4:
result[`paddingTop-${remainder}`] ??= vertical ?? segments[0];
result[`paddingRight-${remainder}`] ??= horizontal ?? segments[1];
result[`paddingBottom-${remainder}`] ??= vertical ?? segments[2];
result[`paddingLeft-${remainder}`] ??= horizontal ?? segments[3];
break;
default:
return;
}
});
// --- Done
return result;
}
const borderRegEx = /^border-(.+)$/;
const thicknessBorderRegEx = /^borderWidth-(.+)$/;
const thicknessBorderHorizontalRegEx = /^borderHorizontalWidth-(.+)$/;
const thicknessBorderVerticalRegEx = /^borderVerticalWidth-(.+)$/;
const styleBorderRegEx = /^borderStyle-(.+)$/;
const styleBorderHorizontalRegEx = /^borderHorizontalStyle-(.+)$/;
const styleBorderVerticalRegEx = /^borderVerticalStyle-(.+)$/;
const borderLeftRegEx = /^borderLeft-(.+)$/;
const borderRightRegEx = /^borderRight-(.+)$/;
const borderTopRegEx = /^borderTop-(.+)$/;
const borderBottomRegEx = /^borderBottom-(.+)$/;
const borderHorizontalRegEx = /^borderHorizontal-(.+)$/;
const borderVerticalRegEx = /^borderVertical-(.+)$/;
const colorBorderRegEx = /^borderColor-(.+)$/;
const colorBorderHorizontalRegEx = /^borderHorizontalColor-(.+)$/;
const colorBorderVerticalRegEx = /^borderVerticalColor-(.+)$/;
/**
* Segment the border values to provide consistency
*/
export function generateBorderSegments(theme?: Record<string, string>) {
if (!theme) {
return {};
}
const result = { ...theme };
// --- Iterate through theme variables and split border values
Object.entries(theme).forEach(([key, value]) => {
// --- Check "border-" theme variables
let match = borderRegEx.exec(key);
if (match) {
const remainder = match[1];
// --- Flow down the border value
result[`borderLeft-${remainder}`] = value;
result[`borderRight-${remainder}`] = value;
result[`borderTop-${remainder}`] = value;
result[`borderBottom-${remainder}`] = value;
// --- We have a border value to segment
const border = getBorderSegments(value);
result[`borderWidth-${remainder}`] ??= border.thickness;
result[`borderStyle-${remainder}`] ??= border.style;
result[`borderColor-${remainder}`] ??= border.color;
}
// --- Check "borderWidth-" theme variables
match = thicknessBorderRegEx.exec(key);
if (match) {
// --- We have a borderWidth value to flow down
const remainder = match[1];
result[`borderLeftWidth-${remainder}`] = value;
result[`borderRightWidth-${remainder}`] = value;
result[`borderTopWidth-${remainder}`] = value;
result[`borderBottomWidth-${remainder}`] = value;
}
// --- Check "borderStyle-" theme variables
match = styleBorderRegEx.exec(key);
if (match) {
// --- We have a borderStyle value to flow down
const remainder = match[1];
result[`borderLeftStyle-${remainder}`] = value;
result[`borderRightStyle-${remainder}`] = value;
result[`borderTopStyle-${remainder}`] = value;
result[`borderBottomStyle-${remainder}`] = value;
}
// --- Check "borderColor-" theme variables
match = colorBorderRegEx.exec(key);
if (match) {
// --- We have a borderColor value to flow down
const remainder = match[1];
result[`borderLeftColor-${remainder}`] = value;
result[`borderRightColor-${remainder}`] = value;
result[`borderTopColor-${remainder}`] = value;
result[`borderBottomColor-${remainder}`] = value;
}
// --- Check "borderHorizontal" theme variables
match = borderHorizontalRegEx.exec(key);
if (match) {
// --- We have a borderHorizontal value to segment
const remainder = match[1];
// --- Flow down the border value
result[`borderLeft-${remainder}`] = value;
result[`borderRight-${remainder}`] = value;
const border = getBorderSegments(value);
if (border.thickness) {
result[`borderLeftWidth-${remainder}`] = border.thickness;
result[`borderRightWidth-${remainder}`] = border.thickness;
}
if (border.style) {
result[`borderLeftStyle-${remainder}`] = border.style;
result[`borderRightStyle-${remainder}`] = border.style;
}
if (border.color) {
result[`borderLeftColor-${remainder}`] = border.color;
result[`borderRightColor-${remainder}`] = border.color;
}
}
// --- Check "borderVertical" theme variables
match = borderVerticalRegEx.exec(key);
if (match) {
// --- We have a borderVertical value to segment
const remainder = match[1];
// --- Flow down the border value
result[`borderTop-${remainder}`] = value;
result[`borderBottom-${remainder}`] = value;
const border = getBorderSegments(value);
if (border.thickness) {
result[`borderTopWidth-${remainder}`] = border.thickness;
result[`borderBottomWidth-${remainder}`] = border.thickness;
}
if (border.style) {
result[`borderTopStyle-${remainder}`] = border.style;
result[`borderBottomStyle-${remainder}`] = border.style;
}
if (border.color) {
result[`borderTopColor-${remainder}`] = border.color;
result[`borderBottomColor-${remainder}`] = border.color;
}
}
// --- Check "borderLeft" theme variables
match = borderLeftRegEx.exec(key);
if (match) {
// --- We have a borderLeft value to segment
const remainder = match[1];
const border = getBorderSegments(value);
if (border.thickness && !theme[`borderLeftWidth-${remainder}`]) {
result[`borderLeftWidth-${remainder}`] = border.thickness;
}
if (border.style && !theme[`borderLeftStyle-${remainder}`]) {
result[`borderLeftStyle-${remainder}`] = border.style;
}
if (border.color && !theme[`borderLeftColor-${remainder}`]) {
result[`borderLeftColor-${remainder}`] = border.color;
}
}
// --- Check "borderRight" theme variables
match = borderRightRegEx.exec(key);
if (match) {
// --- We have a borderRight value to segment
const remainder = match[1];
const border = getBorderSegments(value);
if (border.thickness) {
result[`borderRightWidth-${remainder}`] = border.thickness;
}
if (border.style) {
result[`borderRightStyle-${remainder}`] = border.style;
}
if (border.color) {
result[`borderRightColor-${remainder}`] = border.color;
}
}
// --- Check "borderTop" theme variables
match = borderTopRegEx.exec(key);
if (match) {
// --- We have a borderTop value to segment
const remainder = match[1];
const border = getBorderSegments(value);
if (border.thickness) {
result[`borderTopWidth-${remainder}`] = border.thickness;
}
if (border.style) {
result[`borderTopStyle-${remainder}`] = border.style;
}
if (border.color) {
result[`borderTopColor-${remainder}`] = border.color;
}
}
// --- Check "borderBottom" theme variables
match = borderBottomRegEx.exec(key);
if (match) {
// --- We have a borderBottom value to segment
const remainder = match[1];
const border = getBorderSegments(value);
if (border.thickness) {
result[`borderBottomWidth-${remainder}`] = border.thickness;
}
if (border.style) {
result[`borderBottomStyle-${remainder}`] = border.style;
}
if (border.color) {
result[`borderBottomColor-${remainder}`] = border.color;
}
}
// --- Check "borderHorizontalWidth" theme variables
match = thicknessBorderHorizontalRegEx.exec(key);
if (match) {
// --- We have a borderHorizontalWidth value to flow down
const remainder = match[1];
result[`borderLeftWidth-${remainder}`] = value;
result[`borderRightWidth-${remainder}`] = value;
}
// --- Check "borderVerticalWidth" theme variables
match = thicknessBorderVerticalRegEx.exec(key);
if (match) {
// --- We have a borderVerticalWidth value to flow down
const remainder = match[1];
result[`borderTopWidth-${remainder}`] = value;
result[`borderBottomWidth-${remainder}`] = value;
}
// --- Check "borderHorizontalStyle" theme variables
match = styleBorderHorizontalRegEx.exec(key);
if (match) {
// --- We have a borderHorizontalStyle value to flow down
const remainder = match[1];
result[`borderLeftStyle-${remainder}`] = value;
result[`borderRightStyle-${remainder}`] = value;
}
// --- Check "borderVerticalStyle" theme variables
match = styleBorderVerticalRegEx.exec(key);
if (match) {
// --- We have a borderVerticalStyle value to flow down
const remainder = match[1];
result[`borderTopStyle-${remainder}`] = value;
result[`borderBottomStyle-${remainder}`] = value;
}
// --- Check "borderHorizontalColor" theme variables
match = colorBorderHorizontalRegEx.exec(key);
if (match) {
// --- We have a borderHorizontalColor value to flow down
const remainder = match[1];
result[`borderLeftColor-${remainder}`] = value;
result[`borderRightColor-${remainder}`] = value;
}
// --- Check "borderVerticalColor" theme variables
match = colorBorderVerticalRegEx.exec(key);
if (match) {
// --- We have a borderVerticalColor value to flow down
const remainder = match[1];
result[`borderTopColor-${remainder}`] = value;
result[`borderBottomColor-${remainder}`] = value;
}
});
// --- Done
return result;
function getBorderSegments(value: string) {
try {
const sParser = new StyleParser(value);
const parsed = sParser.parseBorder();
// --- Get the parsed result
const result = {
style: parsed.styleValue,
thickness:
parsed.widthValue !== undefined
? `${parsed.widthValue}${parsed.widthUnit ?? "px"}`
: undefined,
color:
parsed.color === undefined
? undefined
: typeof parsed.color === "string"
? parsed.color
: parsed.color.toString(),
};
// --- All theme variables are present?
if (parsed.themeId1 && parsed.themeId2 && parsed.themeId3) {
return {
thickness: parsed.themeId1.id,
style: parsed.themeId2.id,
color: parsed.themeId3.id,
};
}
// --- Two theme variables are present?
if (parsed.themeId1 && parsed.themeId2) {
if (result.thickness) {
return {
thickness: result.thickness,
style: parsed.themeId1.id,
color: parsed.themeId2.id,
};
}
if (result.style) {
return {
thickness: parsed.themeId1.id,
style: result.style,
color: parsed.themeId2.id,
};
}
return {
thickness: parsed.themeId1.id,
style: parsed.themeId2.id,
color: result.color,
};
}
// --- One theme variable is present?
if (parsed.themeId1) {
if (result.thickness && result.style) {
return {
thickness: result.thickness,
style: result.style,
color: parsed.themeId1.id,
};
}
if (result.thickness && result.color) {
return {
thickness: result.thickness,
style: parsed.themeId1.id,
color: result.color,
};
}
if (result.style && result.color) {
return {
thickness: parsed.themeId1.id,
style: result.style,
color: result.color,
};
}
}
return {
thickness: result.thickness?.trim(),
style: result.style?.trim(),
color: result.color?.trim(),
};
} catch (e) {
return {
thickness: undefined,
style: undefined,
color: undefined,
};
}
}
}
function findClosest(theme: Record<string, string>, themeVarName: string) {
if (theme[themeVarName]) {
return theme[themeVarName];
}
const hVar = parseHVar(themeVarName);
if (!hVar) {
return null;
}
let closest: HVar | null = null;
let closestKey: string | null = null;
Object.keys(theme).forEach((themeVar) => {
const parsedVar = parseHVar(themeVar);
if (
!parsedVar ||
parsedVar.component !== hVar.component ||
parsedVar.attribute !== hVar.attribute
) {
return;
}
if (parsedVar.states.length) {
return;
}
if (
parsedVar.traits.every((tr) => hVar.traits.includes(tr)) &&
(!closest || closest.traits.length <= parsedVar.traits.length)
) {
closest = parsedVar;
closestKey = themeVar;
return;
}
});
if (closestKey) {
// console.log("found closest for", themeVarName, closestKey);
return theme[closestKey];
}
return null;
}
function resolveThemeVars(theme: Record<string, string>) {
const ret: Record<string, string> = {};
Object.keys(theme).forEach((key) => {
ret[key] = resolveThemeVar(key, theme);
});
return ret;
}
function getRgbChannelsString(colorStr?: string) {
if (!colorStr) {
return undefined;
}
const color = Color(colorStr);
let rgb = color.rgb();
return `${rgb.red()},${rgb.green()},${rgb.blue()}`;
}
function generateBaseTonesForColor(
varName: string,
theme: Record<string, string>,
options = { distributeEven: false },
) {
try {
const { distributeEven } = options;
const color = theme[varName];
if (!color || typeof color !== "string") {
return {};
}
const baseColor = Color(color);
let color0;
let color50;
let color100;
let color200;
let color300;
let color400;
let color500;
let color600;
let color700;
let color800;
let color900;
let color950;
let color1000;
if (distributeEven) {
color0 = baseColor.lightness(100);
color50 = baseColor.lightness(98);
color100 = baseColor.lightness(95);
color200 = baseColor.lightness(83);
color300 = baseColor.lightness(75);
color400 = baseColor.lightness(63);
color500 = baseColor.lightness(52);
color600 = baseColor.lightness(40);
color700 = baseColor.lightness(32);
color800 = baseColor.lightness(27);
color900 = baseColor.lightness(16);
color950 = baseColor.lightness(13);
color1000 = baseColor.lightness(9);
} else {
const baseL = baseColor.hsl().l();
const darkStep = baseL / 5;
const lightStep = (100 - baseL) / 5;
color0 = baseColor.lightness(100);
color50 = baseColor.lightness(baseL + lightStep * 4.5);
color100 = baseColor.lightness(baseL + lightStep * 4);
color200 = baseColor.lightness(baseL + lightStep * 3);
color300 = baseColor.lightness(baseL + lightStep * 2);
color400 = baseColor.lightness(baseL + lightStep * 1);
color500 = baseColor.lightness(baseL);
color600 = baseColor.lightness(baseL - darkStep * 1);
color700 = baseColor.lightness(baseL - darkStep * 2);
color800 = baseColor.lightness(baseL - darkStep * 3);
color900 = baseColor.lightness(baseL - darkStep * 4);
color950 = baseColor.lightness(baseL - darkStep * 4.5);
color1000 = baseColor.lightness(baseL - darkStep * 5);
}
return {
[`const-${varName}-0`]: color0.toString(),
[`const-${varName}-50`]: color50.toString(),
[`const-${varName}-100`]: color100.toString(),
[`const-${varName}-200`]: color200.toString(),
[`const-${varName}-300`]: color300.toString(),
[`const-${varName}-400`]: color400.toString(),
[`const-${varName}-500`]: color500.toString(),
[`const-${varName}-600`]: color600.toString(),
[`const-${varName}-700`]: color700.toString(),
[`const-${varName}-800`]: color800.toString(),
[`const-${varName}-900`]: color900.toString(),
[`const-${varName}-950`]: color950.toString(),
[`const-${varName}-1000`]: color1000.toString(),
};
} catch (e) {
console.error("Error generating base tones for color:", varName);
return {};
}
}
function mapTones(
baseColor: string | undefined | null,
mapper: (tones: ColorTones) => Record<string, string>,
) {
const tones = generateTones(baseColor);
if (!tones) {
return {};
}
return mapper(tones);
}
function generateTones(baseColorStr: string | null | undefined): ColorTones | null {
if (!baseColorStr || typeof baseColorStr !== "string" || baseColorStr.startsWith("$"))
return null; //TODO illesg here the startsWidth $ should be something else
const baseColor = Color(baseColorStr);
let tone1;
let tone2;
let tone3;
if (baseColor.isLight()) {
tone1 = baseColor.darken(0.2).toString();
tone2 = baseColor.darken(0.1).toString();
tone3 = baseColor.darken(0.95).toString();
} else {
tone1 = baseColor.lighten(0.2).toString();
tone2 = baseColor.lighten(0.1).toString();
tone3 = baseColor.lighten(0.95).toString();
}
const alpha1 = baseColor.alpha(0.1).toString();
const alpha2 = baseColor.alpha(0.2).toString();
return {
base: baseColorStr,
tone1,
tone2,
tone3,
alpha1,
alpha2,
};
}
type ColorTones = {
base: string;
tone1: string;
tone2: string;
tone3: string;
alpha1: string;
alpha2: string;
};
```
--------------------------------------------------------------------------------
/docs/content/components/Select.md:
--------------------------------------------------------------------------------
```markdown
# Select [#select]
`Select` provides a dropdown interface for choosing from a list of options, supporting both single and multiple selection modes. It offers extensive customization capabilities including search functionality, custom templates, and comprehensive form integration.
**Key features:**
- **Flexible selection modes**: Single selection by default, with optional multi-select capability
- **Option containers**: Uses Option components to define selectable items with separate values and labels
- **Search functionality**: Optional filtering to quickly find options in large lists
- **Custom templates**: Configurable option display, value presentation, and empty state templates
- **Dynamic options**: Supports both static [Option](/components/Option) children and dynamic lists via [Items](/components/Items).
## Using `Select` [#using-select]
The component accepts `Option` components as children defining a particular option's label-value pair.
`Option` requires a `value` property and while also having a `label` that is displayed in the list.
If the `label` is not specified `value` is shown.
```xmlui-pg copy display name="Example: using Select" height="200px"
<App>
<Select>
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
You can use `Select` with dynamic options:
```xmlui-pg copy display name="Example: using Select with dynamic options" height="200px"
<App>
<Select>
<Items data="{['one', 'two', 'three']}" >
<Option value="{$itemIndex}" label="{$item}" />
</Items>
</Select>
</App>
```
**Context variables available during execution:**
- `$item`: Represents the current option's data (label and value properties)
- `$itemContext`: Provides utility methods like `removeItem()` for multi-select scenarios
## Properties [#properties]
### `autoFocus` (default: false) [#autofocus-default-false]
If this property is set to `true`, the component gets the focus automatically when displayed.
### `clearable` (default: false) [#clearable-default-false]
This property enables a clear button that allows the user to clear the selected value(s).
### `dropdownHeight` [#dropdownheight]
This property sets the height of the dropdown list. If not set, the height is determined automatically.
```xmlui-pg copy display name="Example: dropdownHeight" height="300px"
<App>
<Select dropdownHeight="180px">
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
<Option value="opt4" label="fourth"/>
<Option value="opt5" label="fifth"/>
<Option value="opt6" label="sixth"/>
<Option value="opt7" label="seventh"/>
<Option value="opt8" label="eighth"/>
<Option value="opt9" label="ninth"/>
<Option value="opt10" label="tenth"/>
<Option value="opt11" label="eleventh"/>
<Option value="opt12" label="twelfth"/>
</Select>
</App>
```
### `emptyListTemplate` [#emptylisttemplate]
This optional property provides the ability to customize what is displayed when the list of options is empty.
Click on the second field to see the custom empty list indicator.
```xmlui-pg copy {9-11} display name="Example: emptyListTemplate" height="260px"
<App>
<VStack>
<Text value="Default:" />
<Select />
</VStack>
<VStack>
<Text value="Custom:" />
<Select>
<property name="emptyListTemplate">
<Text variant="strong" value="Nothing to see here!" />
</property>
</Select>
</VStack>
</App>
```
### `enabled` (default: true) [#enabled-default-true]
This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
```xmlui-pg copy display name="Example: enabled"
<App>
<Select enabled="false" />
</App>
```
### `initialValue` [#initialvalue]
This property sets the component's initial value.
```xmlui-pg copy display name="Example: initialValue" height="200px"
<App>
<Select initialValue="opt3">
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
### `inProgress` (default: false) [#inprogress-default-false]
This property indicates whether the component is in progress. It can be used to show a loading message.
### `inProgressNotificationMessage` (default: "") [#inprogressnotificationmessage-default-]
This property indicates the message to display when the component is in progress.
### `multiSelect` (default: false) [#multiselect-default-false]
The `true` value of the property indicates if the user can select multiple items.
```xmlui-pg copy display name="Example: multiSelect" height="300px"
<App>
<Select multiSelect="true" dropdownHeight="180px" >
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
<Option value="opt4" label="fourth"/>
<Option value="opt5" label="fifth"/>
<Option value="opt6" label="sixth"/>
<Option value="opt7" label="seventh"/>
<Option value="opt8" label="eighth"/>
<Option value="opt9" label="ninth"/>
<Option value="opt10" label="tenth"/>
<Option value="opt11" label="eleventh"/>
<Option value="opt12" label="twelfth"/>
</Select>
</App>
```
### `optionLabelTemplate` [#optionlabeltemplate]
This property allows replacing the default template to display an option in the dropdown list.
In the template definition, you can use the `$item` context property to access the particular item's `label` and `value`.
```xmlui-pg copy {3-9} display name="Example: optionLabelTemplate" height="300px"
<App>
<Select initialValue="{0}" placeholder="Select..." searchable>
<property name="optionLabelTemplate">
<HStack
paddingHorizontal="$padding-tight"
border="2px dotted $color-primary-500">
<Text>{$item.label}</Text>
</HStack>
</property>
<Option value="{0}" label="zero"/>
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
### `optionTemplate` [#optiontemplate]
This property allows replacing the default template to display an option in the dropdown list.
```xmlui-pg copy display name="Example: optionTemplate" height="200px"
<App>
<Select>
<property name="optionTemplate">
<HStack verticalAlignment="center" gap="$space-0_5">
<Icon name="info" />
<Text value="{$item.label}" variant="strong" />
</HStack>
</property>
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
### `placeholder` (default: "") [#placeholder-default-]
An optional placeholder text that is visible in the input field when its empty.
```xmlui-pg copy display name="Example: placeholder" height="200px"
<App>
<Select placeholder="Please select an item">
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
### `readOnly` (default: false) [#readonly-default-false]
Set this property to `true` to disallow changing the component value.
### `required` (default: false) [#required-default-false]
Set this property to `true` to indicate it must have a value before submitting the containing form.
### `searchable` (default: false) [#searchable-default-false]
This property enables the search functionality in the dropdown list.
### `validationStatus` (default: "none") [#validationstatus-default-none]
This property allows you to set the validation status of the input component.
Available values:
| Value | Description |
| --- | --- |
| `valid` | Visual indicator for an input that is accepted |
| `warning` | Visual indicator for an input that produced a warning |
| `error` | Visual indicator for an input that produced an error |
```xmlui-pg copy display name="Example: validationStatus" height="280px"
<App>
<Select />
<Select validationStatus="valid" />
<Select validationStatus="warning" />
<Select validationStatus="error" />
</App>
```
### `valueTemplate` [#valuetemplate]
This property allows replacing the default template to display a selected value when multiple selections (`multiSelect` is `true`) are enabled.
In the template definition, you can use the `$item` context property to access the particular item's `label` and `value`. The `$itemContext` property provides a `removeItem` method to delete a value from the current selection.
```xmlui-pg copy {3-15} display name="Example: valueTemplate" height="300px"
<App>
<Select initialValue="{0}" placeholder="Select..." multiSelect>
<property name="valueTemplate">
<HStack
paddingLeft="$padding-tight"
border="2px dotted $color-primary-500"
verticalAlignment="center">
<Text>{$item.label}</Text>
<Button
variant="ghost"
icon="close"
size="xs"
onClick="$itemContext.removeItem()"/>
</HStack>
</property>
<Option value="{0}" label="zero"/>
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
## Events [#events]
### `didChange` [#didchange]
This event is triggered when value of Select has changed.
```xmlui-pg copy display name="Example: didChange" height="260px"
<App>
<variable name="newValue" value="(none)" />
<Text value="{newValue}" />
<Select onDidChange="(newItem) => newValue = newItem">
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
### `gotFocus` [#gotfocus]
This event is triggered when the Select has received the focus.
```xmlui-pg copy {5-6} display name="Example: gotFocus/lostFocus" height="260px"
<App>
<variable name="isFocused" value="{false}" />
<Text value="Input control is focused: {isFocused}" />
<Select
onGotFocus="isFocused = true"
onLostFocus="isFocused = false">
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
### `lostFocus` [#lostfocus]
This event is triggered when the Select has lost the focus.
## Exposed Methods [#exposed-methods]
### `focus` [#focus]
This method focuses the `Select` component. You can use it to programmatically focus the component.
**Signature**: `focus(): void`
```xmlui-pg copy display name="Example: focus()" height="260px"
<App>
<Button label="Focus Input" onClick="inputControl.focus()" />
<Select id="inputControl">
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
</App>
```
### `reset` [#reset]
This method resets the component to its initial value, or clears the selection if no initial value was provided.
**Signature**: `reset(): void`
### `setValue` [#setvalue]
This API sets the value of the `Select`. You can use it to programmatically change the value.
**Signature**: `setValue(value: string | string[] | undefined): void`
- `value`: The new value to set. Can be a single value or an array of values for multi-select.
```xmlui-pg copy display name="Example: setValue()" height="260px"
<App>
<Select id="inputControl">
<Option value="opt1" label="first"/>
<Option value="opt2" label="second"/>
<Option value="opt3" label="third"/>
</Select>
<HStack>
<Button
label="Select 2nd Item"
onClick="inputControl.setValue('opt2')" />
<Button
label="Remove Selection"
onClick="inputControl.setValue('')" />
</HStack>
</App>
```
### `value` [#value]
This API retrieves the current value of the `Select`. You can use it to get the value programmatically.
**Signature**: `get value(): string | string[] | undefined`
## Parts [#parts]
The component has some parts that can be styled through layout properties and theme variables separately:
- **`clearButton`**: The button to clear the selected value(s).
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-item-Select | $backgroundColor-dropdown-item | $backgroundColor-dropdown-item |
| [backgroundColor](../styles-and-themes/common-units/#color)-item-Select--active | $backgroundColor-dropdown-item--active | $backgroundColor-dropdown-item--active |
| [backgroundColor](../styles-and-themes/common-units/#color)-item-Select--hover | $backgroundColor-dropdown-item--hover | $backgroundColor-dropdown-item--hover |
| [backgroundColor](../styles-and-themes/common-units/#color)-menu-Select | $color-surface-raised | $color-surface-raised |
| [backgroundColor](../styles-and-themes/common-units/#color)-menu-Select | $color-surface-raised | $color-surface-raised |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--default | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--default--hover | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--disabled | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--error | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--error--hover | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--success | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--success--hover | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--warning | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select--warning--hover | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select-badge | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select-badge | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select-badge--active | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select-badge--active | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select-badge--hover | $color-primary-400 | $color-primary-400 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Select-badge--hover | $color-primary-400 | $color-primary-400 |
| [border](../styles-and-themes/common-units/#border)-Select | *none* | *none* |
| [borderBottom](../styles-and-themes/common-units/#border)-Select | *none* | *none* |
| [borderBottomColor](../styles-and-themes/common-units/#color)-Select | *none* | *none* |
| [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Select | *none* | *none* |
| [borderBottomWidth](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-menu-Select | $borderColor | $borderColor |
| [borderColor](../styles-and-themes/common-units/#color)-menu-Select | $borderColor | $borderColor |
| [borderColor](../styles-and-themes/common-units/#color)-Select | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Select--default | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Select--default--hover | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Select--disabled | initial | initial |
| [borderColor](../styles-and-themes/common-units/#color)-Select--disabled | initial | initial |
| [borderColor](../styles-and-themes/common-units/#color)-Select--error | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Select--error--hover | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Select--success | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Select--success--hover | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Select--warning | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Select--warning--hover | *none* | *none* |
| [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Select | *none* | *none* |
| [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Select | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Select | *none* | *none* |
| [borderHorizontalColor](../styles-and-themes/common-units/#color)-Select | *none* | *none* |
| [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Select | *none* | *none* |
| [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [borderLeft](../styles-and-themes/common-units/#border)-Select | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Select | *none* | *none* |
| [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Select | *none* | *none* |
| [borderLeftWidth](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-menu-Select | $borderRadius | $borderRadius |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-menu-Select | $borderRadius | $borderRadius |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Select--default | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Select--error | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Select--success | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Select--warning | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Select-badge | $borderRadius | $borderRadius |
| [borderRight](../styles-and-themes/common-units/#border)-Select | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Select | *none* | *none* |
| [borderRightStyle](../styles-and-themes/common-units/#border-style)-Select | *none* | *none* |
| [borderRightWidth](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Select | *none* | *none* |
| [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Select | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Select | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Select--default | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Select--error | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Select--success | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Select--warning | *none* | *none* |
| [borderTop](../styles-and-themes/common-units/#border)-Select | *none* | *none* |
| [borderTopColor](../styles-and-themes/common-units/#color)-Select | *none* | *none* |
| [borderTopStyle](../styles-and-themes/common-units/#border-style)-Select | *none* | *none* |
| [borderTopWidth](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Select | *none* | *none* |
| [borderVerticalColor](../styles-and-themes/common-units/#color)-Select | *none* | *none* |
| [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Select | *none* | *none* |
| [borderVerticalWidth](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-menu-Select | 1px | 1px |
| [borderWidth](../styles-and-themes/common-units/#size)-menu-Select | 1px | 1px |
| [borderWidth](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Select--default | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Select--error | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Select--success | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Select--warning | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-menu-Select | $boxShadow-md | $boxShadow-md |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-menu-Select | $boxShadow-md | $boxShadow-md |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Select--default | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Select--default--hover | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Select--error | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Select--error--hover | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Select--success | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Select--success--hover | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Select--warning | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Select--warning--hover | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-placeholder-Select--default | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-placeholder-Select--error | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-placeholder-Select--success | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-placeholder-Select--warning | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-Select--default | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-Select--error | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-Select--success | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-Select--warning | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-Select-badge | $fontSize-sm | $fontSize-sm |
| [fontSize](../styles-and-themes/common-units/#size)-Select-badge | $fontSize-sm | $fontSize-sm |
| [minHeight](../styles-and-themes/common-units/#size)-item-Select | $space-7 | $space-7 |
| [minHeight](../styles-and-themes/common-units/#size)-Select | $space-7 | $space-7 |
| [opacity](../styles-and-themes/common-units/#opacity)-Select--disabled | 0.5 | 0.5 |
| [opacity](../styles-and-themes/common-units/#opacity)-text-item-Select--disabled | 0.5 | 0.5 |
| [outlineColor](../styles-and-themes/common-units/#color)-Select--default--focus | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-Select--error--focus | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-Select--focus | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-Select--success--focus | *none* | *none* |
| [outlineColor](../styles-and-themes/common-units/#color)-Select--warning--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Select--default--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Select--error--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Select--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Select--success--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Select--warning--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Select--default--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Select--error--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Select--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Select--success--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Select--warning--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Select--default--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Select--error--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Select--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Select--success--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Select--warning--focus | *none* | *none* |
| [padding](../styles-and-themes/common-units/#size)-item-Select | *none* | *none* |
| [padding](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [paddingBottom](../styles-and-themes/common-units/#size)-item-Select | *none* | *none* |
| [paddingBottom](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-item-Select | $space-2 | $space-2 |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-Select | $space-2 | $space-2 |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-Select-badge | $space-2_5 | $space-2_5 |
| [paddingLeft](../styles-and-themes/common-units/#size)-item-Select | *none* | *none* |
| [paddingLeft](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [paddingRight](../styles-and-themes/common-units/#size)-item-Select | *none* | *none* |
| [paddingRight](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [paddingTop](../styles-and-themes/common-units/#size)-item-Select | *none* | *none* |
| [paddingTop](../styles-and-themes/common-units/#size)-Select | *none* | *none* |
| [paddingVertical](../styles-and-themes/common-units/#size)-item-Select | $space-2 | $space-2 |
| [paddingVertical](../styles-and-themes/common-units/#size)-Select | $space-2 | $space-2 |
| [paddingVertical](../styles-and-themes/common-units/#size)-Select-badge | $space-0_5 | $space-0_5 |
| [textColor](../styles-and-themes/common-units/#color)-indicator-Select | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-item-Select--disabled | $color-surface-200 | $color-surface-200 |
| [textColor](../styles-and-themes/common-units/#color)-placeholder-Select | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-placeholder-Select--default | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-placeholder-Select--error | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-placeholder-Select--success | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-placeholder-Select--warning | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--default | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--default--hover | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--disabled | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--error | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--error--hover | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--success | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--success--hover | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--warning | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select--warning--hover | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select-badge | $const-color-surface-50 | $const-color-surface-50 |
| [textColor](../styles-and-themes/common-units/#color)-Select-badge | $const-color-surface-50 | $const-color-surface-50 |
| [textColor](../styles-and-themes/common-units/#color)-Select-badge--active | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Select-badge--hover | *none* | *none* |
```