This is page 103 of 188. Use http://codebase.md/xmlui-org/xmlui/xmlui-latest.js?format=md&lines=true&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   ├── config.json
│   └── full-boxes-care.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/DatePicker/DatePicker.module.scss:
--------------------------------------------------------------------------------

```scss
  1 | @use "../../components-core/theming/themes" as t;
  2 | 
  3 | // --- This code snippet is required to collect the theme variables used in this module
  4 | $themeVars: (
  5 | );
  6 | 
  7 | @function createThemeVar($componentVariable) {
  8 |   $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  9 |   @return t.getThemeVar($themeVars, $componentVariable);
 10 | }
 11 | 
 12 | $componentName: "DatePicker";
 13 | $themeVars: t.composePaddingVars($themeVars, $componentName);
 14 | 
 15 | // Variables for default variant
 16 | $borderRadius-DatePicker--default: createThemeVar("Input:borderRadius-#{$componentName}--default");
 17 | $borderColor-DatePicker--default: createThemeVar("Input:borderColor-#{$componentName}--default");
 18 | $borderWidth-DatePicker--default: createThemeVar("Input:borderWidth-#{$componentName}--default");
 19 | $borderStyle-DatePicker--default: createThemeVar("Input:borderStyle-#{$componentName}--default");
 20 | $backgroundColor-DatePicker--default: createThemeVar("Input:backgroundColor-#{$componentName}--default");
 21 | $boxShadow-DatePicker--default: createThemeVar("Input:boxShadow-#{$componentName}--default");
 22 | $textColor-DatePicker--default: createThemeVar("Input:textColor-#{$componentName}--default");
 23 | $borderColor-DatePicker--default--hover: createThemeVar("Input:borderColor-#{$componentName}--default--hover");
 24 | $backgroundColor-DatePicker--default--hover: createThemeVar("Input:backgroundColor-#{$componentName}--default--hover");
 25 | $boxShadow-DatePicker--default--hover: createThemeVar("Input:boxShadow-#{$componentName}--default--hover");
 26 | $textColor-DatePicker--default--hover: createThemeVar("Input:textColor-#{$componentName}--default--hover");
 27 | $outlineWidth-DatePicker--default--focus: createThemeVar("Input:outlineWidth-#{$componentName}--default--focus");
 28 | $outlineColor-DatePicker--default--focus: createThemeVar("Input:outlineColor-#{$componentName}--default--focus");
 29 | $outlineStyle-DatePicker--default--focus: createThemeVar("Input:outlineStyle-#{$componentName}--default--focus");
 30 | $outlineOffset-DatePicker--default--focus: createThemeVar("Input:outlineOffset-#{$componentName}--default--focus");
 31 | $textColor-placeholder-DatePicker--default: createThemeVar("Input:textColor-placeholder-#{$componentName}--default");
 32 | $fontSize-placeholder-DatePicker--default: createThemeVar("Input:fontSize-placeholder-#{$componentName}--default");
 33 | $color-adornment-DatePicker--default: createThemeVar("Input:color-adornment-#{$componentName}--default");
 34 | 
 35 | // Variables for error variant
 36 | $borderRadius-DatePicker--error: createThemeVar("Input:borderRadius-#{$componentName}--error");
 37 | $borderColor-DatePicker--error: createThemeVar("Input:borderColor-#{$componentName}--error");
 38 | $borderWidth-DatePicker--error: createThemeVar("Input:borderWidth-#{$componentName}--error");
 39 | $borderStyle-DatePicker--error: createThemeVar("Input:borderStyle-#{$componentName}--error");
 40 | $backgroundColor-DatePicker--error: createThemeVar("Input:backgroundColor-#{$componentName}--error");
 41 | $boxShadow-DatePicker--error: createThemeVar("Input:boxShadow-#{$componentName}--error");
 42 | $textColor-DatePicker--error: createThemeVar("Input:textColor-#{$componentName}--error");
 43 | $borderColor-DatePicker--error--hover: createThemeVar("Input:borderColor-#{$componentName}--error--hover");
 44 | $backgroundColor-DatePicker--error--hover: createThemeVar("Input:backgroundColor-#{$componentName}--error--hover");
 45 | $boxShadow-DatePicker--error--hover: createThemeVar("Input:boxShadow-#{$componentName}--error--hover");
 46 | $textColor-DatePicker--error--hover: createThemeVar("Input:textColor-#{$componentName}--error--hover");
 47 | $outlineWidth-DatePicker--error--focus: createThemeVar("Input:outlineWidth-#{$componentName}--error--focus");
 48 | $outlineColor-DatePicker--error--focus: createThemeVar("Input:outlineColor-#{$componentName}--error--focus");
 49 | $outlineStyle-DatePicker--error--focus: createThemeVar("Input:outlineStyle-#{$componentName}--error--focus");
 50 | $outlineOffset-DatePicker--error--focus: createThemeVar("Input:outlineOffset-#{$componentName}--error--focus");
 51 | $textColor-placeholder-DatePicker--error: createThemeVar("Input:textColor-placeholder-#{$componentName}--error");
 52 | $fontSize-placeholder-DatePicker--error: createThemeVar("Input:fontSize-placeholder-#{$componentName}--error");
 53 | $color-adornment-DatePicker--error: createThemeVar("Input:color-adornment-#{$componentName}--error");
 54 | 
 55 | // Variables for warning variant
 56 | $borderRadius-DatePicker--warning: createThemeVar("Input:borderRadius-#{$componentName}--warning");
 57 | $borderColor-DatePicker--warning: createThemeVar("Input:borderColor-#{$componentName}--warning");
 58 | $borderWidth-DatePicker--warning: createThemeVar("Input:borderWidth-#{$componentName}--warning");
 59 | $borderStyle-DatePicker--warning: createThemeVar("Input:borderStyle-#{$componentName}--warning");
 60 | $backgroundColor-DatePicker--warning: createThemeVar("Input:backgroundColor-#{$componentName}--warning");
 61 | $boxShadow-DatePicker--warning: createThemeVar("Input:boxShadow-#{$componentName}--warning");
 62 | $textColor-DatePicker--warning: createThemeVar("Input:textColor-#{$componentName}--warning");
 63 | $borderColor-DatePicker--warning--hover: createThemeVar("Input:borderColor-#{$componentName}--warning--hover");
 64 | $backgroundColor-DatePicker--warning--hover: createThemeVar("Input:backgroundColor-#{$componentName}--warning--hover");
 65 | $boxShadow-DatePicker--warning--hover: createThemeVar("Input:boxShadow-#{$componentName}--warning--hover");
 66 | $textColor-DatePicker--warning--hover: createThemeVar("Input:textColor-#{$componentName}--warning--hover");
 67 | $outlineWidth-DatePicker--warning--focus: createThemeVar("Input:outlineWidth-#{$componentName}--warning--focus");
 68 | $outlineColor-DatePicker--warning--focus: createThemeVar("Input:outlineColor-#{$componentName}--warning--focus");
 69 | $outlineStyle-DatePicker--warning--focus: createThemeVar("Input:outlineStyle-#{$componentName}--warning--focus");
 70 | $outlineOffset-DatePicker--warning--focus: createThemeVar("Input:outlineOffset-#{$componentName}--warning--focus");
 71 | $textColor-placeholder-DatePicker--warning: createThemeVar("Input:textColor-placeholder-#{$componentName}--warning");
 72 | $fontSize-placeholder-DatePicker--warning: createThemeVar("Input:fontSize-placeholder-#{$componentName}--warning");
 73 | $color-adornment-DatePicker--warning: createThemeVar("Input:color-adornment-#{$componentName}--warning");
 74 | 
 75 | // Variables for success variant
 76 | $borderRadius-DatePicker--success: createThemeVar("Input:borderRadius-#{$componentName}--success");
 77 | $borderColor-DatePicker--success: createThemeVar("Input:borderColor-#{$componentName}--success");
 78 | $borderWidth-DatePicker--success: createThemeVar("Input:borderWidth-#{$componentName}--success");
 79 | $borderStyle-DatePicker--success: createThemeVar("Input:borderStyle-#{$componentName}--success");
 80 | $backgroundColor-DatePicker--success: createThemeVar("Input:backgroundColor-#{$componentName}--success");
 81 | $boxShadow-DatePicker--success: createThemeVar("Input:boxShadow-#{$componentName}--success");
 82 | $textColor-DatePicker--success: createThemeVar("Input:textColor-#{$componentName}--success");
 83 | $borderColor-DatePicker--success--hover: createThemeVar("Input:borderColor-#{$componentName}--success--hover");
 84 | $backgroundColor-DatePicker--success--hover: createThemeVar("Input:backgroundColor-#{$componentName}--success--hover");
 85 | $boxShadow-DatePicker--success--hover: createThemeVar("Input:boxShadow-#{$componentName}--success--hover");
 86 | $textColor-DatePicker--success--hover: createThemeVar("Input:textColor-#{$componentName}--success--hover");
 87 | $outlineWidth-DatePicker--success--focus: createThemeVar("Input:outlineWidth-#{$componentName}--success--focus");
 88 | $outlineColor-DatePicker--success--focus: createThemeVar("Input:outlineColor-#{$componentName}--success--focus");
 89 | $outlineStyle-DatePicker--success--focus: createThemeVar("Input:outlineStyle-#{$componentName}--success--focus");
 90 | $outlineOffset-DatePicker--success--focus: createThemeVar("Input:outlineOffset-#{$componentName}--success--focus");
 91 | $textColor-placeholder-DatePicker--success: createThemeVar("Input:textColor-placeholder-#{$componentName}--success");
 92 | $fontSize-placeholder-DatePicker--success: createThemeVar("Input:fontSize-placeholder-#{$componentName}--success");
 93 | $color-adornment-DatePicker--success: createThemeVar("Input:color-adornment-#{$componentName}--success");
 94 | 
 95 | // Variables for @layer section
 96 | $fontSize-DatePicker: createThemeVar("Input:fontSize-DatePicker");
 97 | $backgroundColor-DatePicker--disabled: createThemeVar("Input:backgroundColor-DatePicker--disabled");
 98 | $textColor-DatePicker--disabled: createThemeVar("Input:textColor-DatePicker--disabled");
 99 | $borderColor-DatePicker--disabled: createThemeVar("Input:borderColor-DatePicker--disabled");
100 | $boxShadow-menu-DatePicker: createThemeVar("Input:boxShadow-menu-DatePicker");
101 | $backgroundColor-menu-DatePicker: createThemeVar("Input:backgroundColor-menu-DatePicker");
102 | $borderRadius-menu-DatePicker: createThemeVar("Input:borderRadius-menu-DatePicker");
103 | 
104 | // --- CSS properties of a particular Select variant
105 | @mixin variant($variantName) {
106 |   border-radius: createThemeVar("Input:borderRadius-#{$componentName}--#{$variantName}");
107 |   border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}");
108 |   border-width: createThemeVar("Input:borderWidth-#{$componentName}--#{$variantName}");
109 |   border-style: createThemeVar("Input:borderStyle-#{$componentName}--#{$variantName}");
110 |   background-color: createThemeVar("Input:backgroundColor-#{$componentName}--#{$variantName}");
111 |   box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}");
112 |   color: createThemeVar("Input:textColor-#{$componentName}--#{$variantName}");
113 | 
114 |   &:hover {
115 |     border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}--hover");
116 |     background-color: createThemeVar("Input:backgroundColor-#{$componentName}--#{$variantName}--hover"
117 |     );
118 |     box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}--hover");
119 |     color: createThemeVar("Input:textColor-#{$componentName}--#{$variantName}--hover");
120 |   }
121 | 
122 |   &:focus {
123 |     outline-width: createThemeVar("Input:outlineWidth-#{$componentName}--#{$variantName}--focus");
124 |     outline-color: createThemeVar("Input:outlineColor-#{$componentName}--#{$variantName}--focus");
125 |     outline-style: createThemeVar("Input:outlineStyle-#{$componentName}--#{$variantName}--focus");
126 |     outline-offset: createThemeVar("Input:outlineOffset-#{$componentName}--#{$variantName}--focus");
127 |   }
128 | 
129 |   .placeholder {
130 |     color: createThemeVar("Input:textColor-placeholder-#{$componentName}--#{$variantName}");
131 |     font-size: createThemeVar("Input:fontSize-placeholder-#{$componentName}--#{$variantName}");
132 |   }
133 | 
134 |   .adornment {
135 |     color: createThemeVar("Input:color-adornment-#{$componentName}--#{$variantName}");
136 |   }
137 | }
138 | 
139 | $rdp-accent-color: createThemeVar("Input:backgroundColor-item-DatePicker--active");
140 | $backgroundColor-item-DatePicker--hover: createThemeVar("Input:backgroundColor-item-DatePicker--hover"
141 |   );
142 | $rdp-selected-color: createThemeVar("Input:textColor-value-DatePicker");
143 | $rdp-cell-size: 40px;
144 | $rdp-caption-font-size: 18px;
145 | $rdp-outline: 2px solid t.useVar($rdp-accent-color);
146 | $rdp-outline-selected: 3px solid t.useVar($rdp-accent-color);
147 | $minHeight: createThemeVar("Input:minHeight-#{$componentName}");
148 | $borderColor-selectedItem-DatePicker: createThemeVar("Input:borderColor-selectedItem-DatePicker");
149 | 
150 | @layer components {
151 |   .datePicker {
152 |     display: flex;
153 |     align-items: center;
154 |     cursor: pointer;
155 |     flex-direction: row;
156 |     width: 100%;
157 |     min-height: $minHeight;
158 |     border-width: 1px;
159 |     border-style: solid;
160 |     transition: background-color ease-in 0.1s;
161 |     overflow: hidden;
162 |     gap: t.$space-2;
163 |     font-size: $fontSize-DatePicker;
164 |     @include t.paddingVars($themeVars, $componentName);
165 | 
166 |     @include variant("default");
167 | 
168 |     &.error {
169 |       @include variant("error");
170 |     }
171 | 
172 |     &.warning {
173 |       @include variant("warning");
174 |     }
175 | 
176 |     &.valid {
177 |       @include variant("success");
178 |     }
179 | 
180 |     &.disabled {
181 |       cursor: not-allowed;
182 |       background-color: $backgroundColor-DatePicker--disabled;
183 |       color: $textColor-DatePicker--disabled;
184 |       border-color: $borderColor-DatePicker--disabled;
185 | 
186 |       .indicator,
187 |       .datePickerInput {
188 |         cursor: not-allowed;
189 |       }
190 |     }
191 |   }
192 | 
193 |   .inlinePickerMenu {
194 |     padding: 0;
195 |     overflow-y: auto;
196 |     width: 100%;
197 |     max-width: fit-content;
198 |     height: fit-content;
199 | 
200 |     @include variant("default");
201 | 
202 |     &.error {
203 |       @include variant("error");
204 |     }
205 | 
206 |     &.warning {
207 |       @include variant("warning");
208 |     }
209 | 
210 |     &.valid {
211 |       @include variant("success");
212 |     }
213 |   }
214 | 
215 |   .datePickerMenu {
216 |     padding: t.$space-4;
217 |     overflow-y: auto;
218 |     height: fit-content;
219 |     box-shadow: $boxShadow-menu-DatePicker;
220 |     background-color: $backgroundColor-menu-DatePicker;
221 |     border-radius: $borderRadius-menu-DatePicker;
222 |     border: 1px solid $rdp-accent-color;
223 |   }
224 | 
225 |   /* Variables declaration */
226 |   /* prettier-ignore */
227 |   .root {
228 |     --rdp-day-height: 44px;
229 |     /* The height of the day cells. */
230 |     --rdp-day-width: 44px;
231 |     /* The width of the day cells. */
232 | 
233 |     --rdp-day_button-border-radius: 100%;
234 |     /* The border radius of the day cells. */
235 |     --rdp-day_button-border: 2px solid transparent;
236 |     /* The border of the day cells. */
237 |     --rdp-day_button-height: 42px;
238 |     /* The height of the day cells. */
239 |     --rdp-day_button-width: 42px;
240 |     /* The width of the day cells. */
241 | 
242 |     --rdp-disabled-opacity: 0.5;
243 |     /* The opacity of the disabled days. */
244 |     --rdp-outside-opacity: 0.75;
245 |     /* The opacity of the days outside the current month. */
246 | 
247 |     --rdp-dropdown-gap: 0.5rem;
248 |     /* The gap between the dropdowns used in the month captons. */
249 | 
250 |     --rdp-months-gap: 2rem;
251 |     /* The gap between the months in the multi-month view. */
252 | 
253 |     --rdp-nav_button-disabled-opacity: 0.5;
254 |     /* The opacity of the disabled navigation buttons. */
255 |     --rdp-nav_button-height: 2.25rem;
256 |     /* The height of the navigation buttons. */
257 |     --rdp-nav_button-width: 2.25rem;
258 |     /* The width of the navigation buttons. */
259 |     --rdp-nav-height: 2.75rem;
260 |     /* The height of the navigation bar. */
261 | 
262 |     --rdp-range_middle-color: inherit;
263 |     /* The color of the range text. */
264 | 
265 |     --rdp-range_start-color: white;
266 |     /* The color of the range text. */
267 |     --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, $backgroundColor-item-DatePicker--hover 50%);
268 |     /* Used for the background of the start of the selected range. */
269 |     --rdp-range_start-date-background-color: $rdp-accent-color;
270 |     /* The background color of the date when at the start of the selected range. */
271 | 
272 |     --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);
273 |     /* Used for the background of the end of the selected range. */
274 |     --rdp-range_end-color: white;
275 |     /* The color of the range text. */
276 |     --rdp-range_end-date-background-color: $rdp-accent-color;
277 |     /* The background color of the date when at the end of the selected range. */
278 | 
279 |     --rdp-week_number-border-radius: 100%;
280 |     /* The border radius of the week number. */
281 |     --rdp-week_number-border: 2px solid transparent;
282 |     /* The border of the week number. */
283 | 
284 |     --rdp-week_number-height: var(--rdp-day-height);
285 |     /* The height of the week number cells. */
286 |     --rdp-week_number-opacity: 0.75;
287 |     /* The opacity of the week number. */
288 |     --rdp-week_number-width: var(--rdp-day-width);
289 |     /* The width of the week number cells. */
290 |     --rdp-weeknumber-text-align: center;
291 |     /* The text alignment of the weekday cells. */
292 | 
293 |     --rdp-weekday-opacity: 0.75;
294 |     /* The opacity of the weekday. */
295 |     --rdp-weekday-padding: 0.5rem 0rem;
296 |     /* The padding of the weekday. */
297 |     --rdp-weekday-text-align: center;
298 |     /* The text alignment of the weekday cells. */
299 | 
300 |     --rdp-gradient-direction: 90deg;
301 | 
302 |     --rdp-animation_duration: 0.3s;
303 |     --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
304 |   }
305 | 
306 |   .root[dir="rtl"] {
307 |     --rdp-gradient-direction: -90deg;
308 |   }
309 | 
310 |   .root[data-broadcast-calendar="true"] {
311 |     --rdp-outside-opacity: unset;
312 |   }
313 | 
314 |   /* Root of the component. */
315 |   .root {
316 |     position: relative;
317 |     /* Required to position the navigation toolbar. */
318 |     box-sizing: border-box;
319 |   }
320 | 
321 |   .root * {
322 |     box-sizing: border-box;
323 |   }
324 | 
325 |   .day {
326 |     width: var(--rdp-day-width);
327 |     height: var(--rdp-day-height);
328 |     text-align: center;
329 |   }
330 | 
331 |   .day_button {
332 |     background: none;
333 |     padding: 0;
334 |     margin: 0;
335 |     cursor: pointer;
336 |     font: inherit;
337 |     color: inherit;
338 |     justify-content: center;
339 |     align-items: center;
340 |     display: flex;
341 | 
342 |     width: var(--rdp-day_button-width);
343 |     height: var(--rdp-day_button-height);
344 |     border: var(--rdp-day_button-border);
345 |     border-radius: var(--rdp-day_button-border-radius);
346 | 
347 |     &:hover {
348 |       background-color: $backgroundColor-item-DatePicker--hover;
349 |     }
350 |   }
351 | 
352 |   .day_button:disabled {
353 |     cursor: revert;
354 |   }
355 | 
356 |   .caption_label {
357 |     z-index: 1;
358 | 
359 |     position: relative;
360 |     display: inline-flex;
361 |     align-items: center;
362 |     padding-left: t.$space-2;
363 |     padding-right: t.$space-2;
364 | 
365 |     white-space: nowrap;
366 |     border: 0;
367 |   }
368 | 
369 |   .dropdown:focus-visible~.caption_label {
370 |     outline: 5px auto t.$outlineColor--focus;
371 |   }
372 | 
373 |   .button_next,
374 |   .button_previous {
375 |     border: none;
376 |     background: none;
377 |     padding: 0;
378 |     margin: 0;
379 |     cursor: pointer;
380 |     font: inherit;
381 |     color: inherit;
382 |     -moz-appearance: none;
383 |     -webkit-appearance: none;
384 |     display: inline-flex;
385 |     align-items: center;
386 |     justify-content: center;
387 |     position: relative;
388 |     appearance: none;
389 | 
390 |     width: var(--rdp-nav_button-width);
391 |     height: var(--rdp-nav_button-height);
392 | 
393 |     &:hover {
394 |       background-color: $backgroundColor-item-DatePicker--hover;
395 |     }
396 |   }
397 | 
398 |   .button_next:disabled,
399 |   .button_next[aria-disabled="true"],
400 |   .button_previous:disabled,
401 |   .button_previous[aria-disabled="true"] {
402 |     cursor: revert;
403 | 
404 |     opacity: var(--rdp-nav_button-disabled-opacity);
405 |   }
406 | 
407 |   .chevron {
408 |     display: inline-block;
409 |     fill: currentColor;
410 |   }
411 | 
412 |   .root[dir="rtl"] .nav .chevron {
413 |     transform: rotate(180deg);
414 |     transform-origin: 50%;
415 |   }
416 | 
417 |   .dropdowns {
418 |     position: relative;
419 |     display: inline-flex;
420 |     align-items: center;
421 |     gap: 0;
422 |   }
423 | 
424 |   .dropdown {
425 |     z-index: 2;
426 | 
427 |     /* Reset */
428 |     opacity: 0;
429 |     appearance: none;
430 |     position: absolute;
431 |     inset-block-start: 0;
432 |     inset-block-end: 0;
433 |     inset-inline-start: 0;
434 |     width: 100%;
435 |     margin: 0;
436 |     padding: 0;
437 |     cursor: inherit;
438 |     border: none;
439 |     line-height: inherit;
440 |   }
441 | 
442 |   .dropdown_root {
443 |     position: relative;
444 |     display: inline-flex;
445 |     align-items: center;
446 |     padding: t.$space-1_5;
447 | 
448 |     &:hover {
449 |       background-color: $backgroundColor-item-DatePicker--hover;
450 |       cursor: pointer;
451 |     }
452 |   }
453 | 
454 |   .dropdown_root[data-disabled="true"] .chevron {
455 |     opacity: var(--rdp-disabled-opacity);
456 |   }
457 | 
458 |   .month_caption {
459 |     display: flex;
460 |     align-content: center;
461 |     padding: t.$space-3 t.$space-3 t.$space-3 t.$space-1;
462 |     height: var(--rdp-nav-height);
463 |     font-weight: bold;
464 |     font-size: large;
465 |   }
466 | 
467 |   .root[data-nav-layout="around"] .month,
468 |   .root[data-nav-layout="after"] .month {
469 |     position: relative;
470 |   }
471 | 
472 |   .root[data-nav-layout="around"] .month_caption {
473 |     justify-content: center;
474 |     margin-inline-start: var(--rdp-nav_button-width);
475 |     margin-inline-end: var(--rdp-nav_button-width);
476 |     position: relative;
477 |   }
478 | 
479 |   .root[data-nav-layout="around"] .button_previous {
480 |     position: absolute;
481 |     inset-inline-start: 0;
482 |     top: 0;
483 |     height: var(--rdp-nav-height);
484 |     display: inline-flex;
485 |   }
486 | 
487 |   .root[data-nav-layout="around"] .button_next {
488 |     position: absolute;
489 |     inset-inline-end: 0;
490 |     top: 0;
491 |     height: var(--rdp-nav-height);
492 |     display: inline-flex;
493 |     justify-content: center;
494 |   }
495 | 
496 |   .months {
497 |     position: relative;
498 |     display: flex;
499 |     flex-wrap: wrap;
500 |     gap: var(--rdp-months-gap);
501 |     max-width: fit-content;
502 |   }
503 | 
504 |   .month_grid {
505 |     border-collapse: collapse;
506 |   }
507 | 
508 |   .nav {
509 |     position: absolute;
510 |     inset-block-start: 0;
511 |     inset-inline-end: 0;
512 | 
513 |     display: flex;
514 |     align-items: center;
515 | 
516 |     height: var(--rdp-nav-height);
517 |   }
518 | 
519 |   .weekday {
520 |     opacity: var(--rdp-weekday-opacity);
521 |     padding: var(--rdp-weekday-padding);
522 |     font-weight: 500;
523 |     font-size: smaller;
524 |     color: t.$textColor-secondary;
525 |     text-align: var(--rdp-weekday-text-align);
526 |     text-transform: var(--rdp-weekday-text-transform);
527 |   }
528 | 
529 |   .week_number {
530 |     opacity: var(--rdp-week_number-opacity);
531 |     font-weight: 400;
532 |     font-size: small;
533 |     height: var(--rdp-week_number-height);
534 |     width: var(--rdp-week_number-width);
535 |     border: var(--rdp-week_number-border);
536 |     border-radius: var(--rdp-week_number-border-radius);
537 |     text-align: var(--rdp-weeknumber-text-align);
538 |   }
539 | 
540 |   /* DAY MODIFIERS */
541 |   .today:not(.outside) {
542 |     color: t.$color-primary-500;
543 |   }
544 | 
545 |   .selected {
546 |     font-weight: bold;
547 |     font-size: large;
548 |   }
549 | 
550 |   .selected .day_button {
551 |     border: 2px solid $borderColor-selectedItem-DatePicker;
552 |   }
553 | 
554 |   .outside {
555 |     opacity: var(--rdp-outside-opacity);
556 |   }
557 | 
558 |   .disabled {
559 |     opacity: var(--rdp-disabled-opacity);
560 |   }
561 | 
562 |   .hidden {
563 |     visibility: hidden;
564 |     color: var(--rdp-range_start-color);
565 |   }
566 | 
567 |   .range_start {
568 |     background: var(--rdp-range_start-background);
569 |   }
570 | 
571 |   .range_start .day_button {
572 |     background-color: var(--rdp-range_start-date-background-color);
573 |     color: var(--rdp-range_start-color);
574 |   }
575 | 
576 |   .range_middle {
577 |     background-color: var(--rdp-range_middle-background-color);
578 |   }
579 | 
580 |   .range_middle .day_button {
581 |     border-color: transparent;
582 |     border: unset;
583 |     border-radius: unset;
584 |     color: var(--rdp-range_middle-color);
585 |   }
586 | 
587 |   .range_end {
588 |     background: var(--rdp-range_end-background);
589 |     color: var(--rdp-range_end-color);
590 |   }
591 | 
592 |   .range_end .day_button {
593 |     color: var(--rdp-range_start-color);
594 |     background-color: var(--rdp-range_end-date-background-color);
595 |   }
596 | 
597 |   .range_start.range_end {
598 |     background: revert;
599 |   }
600 | 
601 |   .focusable {
602 |     cursor: pointer;
603 |   }
604 | 
605 |   .datePickerValue {
606 |     display: flex;
607 |     flex: 1;
608 |   }
609 | 
610 |   @keyframes rdp-slide_in_left {
611 |     0% {
612 |       transform: translateX(-100%);
613 |     }
614 | 
615 |     100% {
616 |       transform: translateX(0);
617 |     }
618 |   }
619 | 
620 |   @keyframes rdp-slide_in_right {
621 |     0% {
622 |       transform: translateX(100%);
623 |     }
624 | 
625 |     100% {
626 |       transform: translateX(0);
627 |     }
628 |   }
629 | 
630 |   @keyframes rdp-slide_out_left {
631 |     0% {
632 |       transform: translateX(0);
633 |     }
634 | 
635 |     100% {
636 |       transform: translateX(-100%);
637 |     }
638 |   }
639 | 
640 |   @keyframes rdp-slide_out_right {
641 |     0% {
642 |       transform: translateX(0);
643 |     }
644 | 
645 |     100% {
646 |       transform: translateX(100%);
647 |     }
648 |   }
649 | 
650 |   .weeks_before_enter {
651 |     animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
652 |   }
653 | 
654 |   .weeks_before_exit {
655 |     animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
656 |   }
657 | 
658 |   .weeks_after_enter {
659 |     animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
660 |   }
661 | 
662 |   .weeks_after_exit {
663 |     animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
664 |   }
665 | 
666 |   .root[dir="rtl"] .weeks_after_enter {
667 |     animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
668 |   }
669 | 
670 |   .root[dir="rtl"] .weeks_before_exit {
671 |     animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
672 |   }
673 | 
674 |   .root[dir="rtl"] .weeks_before_enter {
675 |     animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
676 |   }
677 | 
678 |   .root[dir="rtl"] .weeks_after_exit {
679 |     animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
680 |   }
681 | 
682 |   @keyframes rdp-fade_in {
683 |     from {
684 |       opacity: 0;
685 |     }
686 | 
687 |     to {
688 |       opacity: 1;
689 |     }
690 |   }
691 | 
692 |   @keyframes rdp-fade_out {
693 |     from {
694 |       opacity: 1;
695 |     }
696 | 
697 |     to {
698 |       opacity: 0;
699 |     }
700 |   }
701 | 
702 |   .caption_after_enter {
703 |     animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
704 |   }
705 | 
706 |   .caption_after_exit {
707 |     animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
708 |   }
709 | 
710 |   .caption_before_enter {
711 |     animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
712 |   }
713 | 
714 |   .caption_before_exit {
715 |     animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
716 |   }
717 | }
718 | 
719 | // --- We export the theme variables to add them to the component renderer
720 | :export {
721 |   themeVars: t.json-stringify($themeVars);
722 | }
```

--------------------------------------------------------------------------------
/xmlui/src/components/AutoComplete/AutoCompleteNative.tsx:
--------------------------------------------------------------------------------

```typescript
  1 | import {
  2 |   type CSSProperties,
  3 |   type ForwardedRef,
  4 |   forwardRef,
  5 |   type ReactNode,
  6 |   useId,
  7 |   useCallback,
  8 |   useEffect,
  9 |   useMemo,
 10 |   useRef,
 11 |   useState,
 12 | } from "react";
 13 | import classnames from "classnames";
 14 | 
 15 | import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
 16 | import { noop } from "../../components-core/constants";
 17 | import { useEvent } from "../../components-core/utils/misc";
 18 | import type { Option, ValidationStatus } from "../abstractions";
 19 | import styles from "../../components/AutoComplete/AutoComplete.module.scss";
 20 | import Icon from "../../components/Icon/IconNative";
 21 | import OptionTypeProvider from "../../components/Option/OptionTypeProvider";
 22 | import { AutoCompleteContext, useAutoComplete } from "./AutoCompleteContext";
 23 | import { OptionContext, useOption } from "../Select/OptionContext";
 24 | import { useTheme } from "../../components-core/theming/ThemeContext";
 25 | import { Popover, PopoverContent, PopoverTrigger, Portal } from "@radix-ui/react-popover";
 26 | import { HiddenOption } from "../Select/HiddenOption";
 27 | import { PART_INPUT } from "../../components-core/parts";
 28 | 
 29 | const PART_LIST_WRAPPER = "listWrapper";
 30 | 
 31 | type AutoCompleteProps = {
 32 |   id?: string;
 33 |   initialValue?: string | string[];
 34 |   value?: string | string[];
 35 |   enabled?: boolean;
 36 |   placeholder?: string;
 37 |   updateState?: UpdateStateFn;
 38 |   optionRenderer?: (item: Option, value: any, inTrigger: boolean) => ReactNode;
 39 |   emptyListTemplate?: ReactNode;
 40 |   style?: CSSProperties;
 41 |   className?: string;
 42 |   onDidChange?: (newValue: string | string[]) => void;
 43 |   validationStatus?: ValidationStatus;
 44 |   onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
 45 |   onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
 46 |   onItemCreated?: (item: string) => void;
 47 |   registerComponentApi?: RegisterComponentApiFn;
 48 |   children?: ReactNode;
 49 |   autoFocus?: boolean;
 50 |   dropdownHeight?: CSSProperties["height"];
 51 |   multi?: boolean;
 52 |   required?: boolean;
 53 |   readOnly?: boolean;
 54 |   creatable?: boolean;
 55 |   initiallyOpen?: boolean;
 56 | };
 57 | 
 58 | function isOptionsExist(options: Set<Option>, newOptions: Option[]) {
 59 |   return newOptions.some((option) =>
 60 |     Array.from(options).some((o) => o.value === option.value || o.label === option.label),
 61 |   );
 62 | }
 63 | 
 64 | export const defaultProps: Partial<AutoCompleteProps> = {
 65 |   enabled: true,
 66 |   readOnly: false,
 67 |   autoFocus: false,
 68 |   multi: false,
 69 |   required: false,
 70 |   validationStatus: "none",
 71 |   creatable: false,
 72 |   updateState: noop,
 73 |   onDidChange: noop,
 74 |   onFocus: noop,
 75 |   onBlur: noop,
 76 |   onItemCreated: noop,
 77 |   initiallyOpen: false,
 78 | };
 79 | 
 80 | export const AutoComplete = forwardRef(function AutoComplete(
 81 |   {
 82 |     id,
 83 |     initialValue,
 84 |     value,
 85 |     enabled = defaultProps.enabled,
 86 |     placeholder,
 87 |     updateState = defaultProps.updateState,
 88 |     validationStatus = defaultProps.validationStatus,
 89 |     onDidChange = defaultProps.onDidChange,
 90 |     onFocus = defaultProps.onFocus,
 91 |     onBlur = defaultProps.onBlur,
 92 |     onItemCreated = defaultProps.onItemCreated,
 93 |     registerComponentApi,
 94 |     emptyListTemplate,
 95 |     style,
 96 |     className,
 97 |     children,
 98 |     readOnly = defaultProps.readOnly,
 99 |     autoFocus = defaultProps.autoFocus,
100 |     dropdownHeight,
101 |     multi = defaultProps.multi,
102 |     required = defaultProps.required,
103 |     creatable = defaultProps.creatable,
104 |     optionRenderer,
105 |     initiallyOpen = defaultProps.initiallyOpen,
106 |     ...rest
107 |   }: AutoCompleteProps,
108 |   forwardedRef: ForwardedRef<HTMLDivElement>,
109 | ) {
110 |   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
111 |   const inputRef = useRef<HTMLInputElement>(null);
112 |   const [open, setOpen] = useState(initiallyOpen);
113 |   const [options, setOptions] = useState(new Set<Option>());
114 |   const [inputValue, setInputValue] = useState("");
115 |   const { root } = useTheme();
116 |   const [width, setWidth] = useState(0);
117 |   const observer = useRef<ResizeObserver>();
118 |   const [searchTerm, setSearchTerm] = useState("");
119 |   const [isFocused, setIsFocused] = useState(false);
120 |   const [selectedIndex, setSelectedIndex] = useState(-1);
121 | 
122 |   // Filter options based on search term
123 |   const filteredOptions = useMemo(() => {
124 |     if (!searchTerm || searchTerm.trim() === "") {
125 |       return Array.from(options);
126 |     }
127 | 
128 |     const searchLower = searchTerm.toLowerCase();
129 |     return Array.from(options).filter((option) => {
130 |       const extendedValue =
131 |         option.value + " " + option.label + " " + (option.keywords || []).join(" ");
132 |       return extendedValue.toLowerCase().includes(searchLower);
133 |     });
134 |   }, [options, searchTerm]);
135 | 
136 |   // Check if we should show creatable item
137 |   const shouldShowCreatable = useMemo(() => {
138 |     if (!creatable || !searchTerm || searchTerm.trim() === "") return false;
139 | 
140 |     // Check if the search term already exists as an option
141 |     const searchTermExists = Array.from(options).some(
142 |       (option) => option.value === searchTerm || option.label === searchTerm,
143 |     );
144 | 
145 |     if (searchTermExists) return false;
146 | 
147 |     // Check if it's already selected
148 |     if (Array.isArray(value) && value.includes(searchTerm)) return false;
149 |     if (value === searchTerm) return false;
150 | 
151 |     // Only show creatable if there are no matching filtered options
152 |     return filteredOptions.length === 0;
153 |   }, [creatable, searchTerm, options, value, filteredOptions]);
154 | 
155 |   // Set initial state based on the initialValue prop
156 |   useEffect(() => {
157 |     if (initialValue !== undefined) {
158 |       updateState({ value: initialValue || [] }, { initial: true });
159 |     }
160 |   }, [initialValue, updateState]);
161 | 
162 |   // Observe the size of the reference element
163 |   useEffect(() => {
164 |     const current = referenceElement;
165 |     observer.current?.disconnect();
166 | 
167 |     if (current) {
168 |       observer.current = new ResizeObserver(() => setWidth(current.clientWidth));
169 |       observer.current.observe(current);
170 |     }
171 | 
172 |     return () => {
173 |       observer.current?.disconnect();
174 |     };
175 |   }, [referenceElement]);
176 | 
177 |   const selectedValue = useMemo(() => {
178 |     const optionsArray = Array.from(options);
179 | 
180 |     if (Array.isArray(value)) {
181 |       if (value.length === 0) return [];
182 |       return optionsArray.filter((o) => value.includes(`${o.value}`));
183 |     }
184 | 
185 |     return optionsArray.find((o) => `${o.value}` === `${value}`);
186 |   }, [value, options]);
187 | 
188 |   const toggleOption = useCallback(
189 |     (selectedItem: string) => {
190 |       if (selectedItem === "") return;
191 | 
192 |       // Check if the option is enabled
193 |       const option = Array.from(options).find((opt) => opt.value === selectedItem);
194 |       if (option && option.enabled === false) return;
195 | 
196 |       const newSelectedValue = multi
197 |         ? Array.isArray(value)
198 |           ? value.includes(selectedItem)
199 |             ? value.filter((v) => v !== selectedItem)
200 |             : [...value, selectedItem]
201 |           : [selectedItem]
202 |         : selectedItem === value
203 |           ? null
204 |           : selectedItem;
205 | 
206 |       updateState({ value: newSelectedValue });
207 |       onDidChange(newSelectedValue);
208 | 
209 |       if (multi) {
210 |         setInputValue("");
211 |         setSearchTerm("");
212 |         // Keep dropdown open for multi-select
213 |       } else {
214 |         // Close dropdown for single select
215 |         setOpen(false);
216 |         setSearchTerm("");
217 |       }
218 | 
219 |       inputRef.current?.focus();
220 |     },
221 |     [multi, value, updateState, onDidChange, options],
222 |   );
223 | 
224 |   useEffect(() => {
225 |     if (!Array.isArray(selectedValue)) {
226 |       setInputValue(selectedValue?.label || "");
227 |       setSearchTerm("");
228 |     }
229 |   }, [multi, selectedValue]);
230 | 
231 |   // Clear selected value
232 |   const clearValue = useCallback(() => {
233 |     const newValue = multi ? [] : "";
234 |     setInputValue("");
235 |     updateState({ value: newValue });
236 |     onDidChange(newValue);
237 |   }, [multi, updateState, onDidChange]);
238 | 
239 |   const onOptionAdd = useCallback((option: Option) => {
240 |     setOptions((prev) => {
241 |       const newSet = new Set(prev);
242 |       // Remove old version if exists, then add the new one to ensure updates
243 |       const existing = Array.from(prev).find((opt) => opt.value === option.value);
244 |       if (existing) {
245 |         newSet.delete(existing);
246 |       }
247 |       newSet.add(option);
248 |       return newSet;
249 |     });
250 |   }, []);
251 | 
252 |   const onOptionRemove = useCallback((option: Option) => {
253 |     setOptions((prev) => {
254 |       const optionsSet = new Set(prev);
255 |       optionsSet.delete(option);
256 |       return optionsSet;
257 |     });
258 |   }, []);
259 | 
260 |   // Combined list of all items (creatable + filtered options)
261 |   const allItems = useMemo(() => {
262 |     const items = [];
263 |     if (shouldShowCreatable) {
264 |       items.push({ type: "creatable", value: searchTerm, label: `Create "${searchTerm}"` });
265 |     }
266 |     filteredOptions.forEach((option) => {
267 |       items.push({ type: "option", ...option });
268 |     });
269 |     return items;
270 |   }, [shouldShowCreatable, searchTerm, filteredOptions]);
271 | 
272 |   // Helper functions to find next/previous enabled option
273 |   const findNextEnabledIndex = useCallback(
274 |     (currentIndex: number) => {
275 |       for (let i = currentIndex + 1; i < allItems.length; i++) {
276 |         const item = allItems[i];
277 |         if (item.type === "creatable" || item.enabled !== false) {
278 |           return i;
279 |         }
280 |       }
281 |       // Wrap around to beginning
282 |       for (let i = 0; i <= currentIndex; i++) {
283 |         const item = allItems[i];
284 |         if (item.type === "creatable" || item.enabled !== false) {
285 |           return i;
286 |         }
287 |       }
288 |       return -1;
289 |     },
290 |     [allItems],
291 |   );
292 | 
293 |   const findPreviousEnabledIndex = useCallback(
294 |     (currentIndex: number) => {
295 |       for (let i = currentIndex - 1; i >= 0; i--) {
296 |         const item = allItems[i];
297 |         if (item.type === "creatable" || item.enabled !== false) {
298 |           return i;
299 |         }
300 |       }
301 |       // Wrap around to end
302 |       for (let i = allItems.length - 1; i >= currentIndex; i--) {
303 |         const item = allItems[i];
304 |         if (item.type === "creatable" || item.enabled !== false) {
305 |           return i;
306 |         }
307 |       }
308 |       return -1;
309 |     },
310 |     [allItems],
311 |   );
312 | 
313 |   // Reset selected index when options change, but select matching option when dropdown opens
314 |   useEffect(() => {
315 |     if (!open) {
316 |       setSelectedIndex(-1);
317 |     } else if (!multi && open && inputValue) {
318 |       // For single-select, when dropdown opens and there's an input value, try to find and select the matching option
319 |       const matchingIndex = allItems.findIndex((item) => {
320 |         if (item.type === "creatable") return false;
321 |         return (
322 |           item.label?.toLowerCase() === inputValue.toLowerCase() ||
323 |           item.value?.toLowerCase() === inputValue.toLowerCase()
324 |         );
325 |       });
326 |       if (matchingIndex !== -1) {
327 |         setSelectedIndex(matchingIndex);
328 |       } else {
329 |         setSelectedIndex(-1);
330 |       }
331 |     } else if (!multi && open && !inputValue) {
332 |       setSelectedIndex(-1);
333 |     }
334 |     // For multi-select, don't reset selectedIndex when dropdown is open - preserve keyboard navigation
335 |   }, [allItems, multi, open, inputValue]);
336 | 
337 |   // Keyboard navigation
338 |   const handleKeyDown = useCallback(
339 |     (event: React.KeyboardEvent) => {
340 |       if (!open) return;
341 | 
342 |       switch (event.key) {
343 |         case "ArrowDown":
344 |           event.preventDefault();
345 |           setSelectedIndex((prev) => {
346 |             const nextIndex = findNextEnabledIndex(prev);
347 |             return nextIndex !== -1 ? nextIndex : prev;
348 |           });
349 |           break;
350 |         case "ArrowUp":
351 |           event.preventDefault();
352 |           setSelectedIndex((prev) => {
353 |             const prevIndex = findPreviousEnabledIndex(prev);
354 |             return prevIndex !== -1 ? prevIndex : prev;
355 |           });
356 |           break;
357 |         case "Enter":
358 |           event.preventDefault();
359 |           if (selectedIndex >= 0 && selectedIndex < allItems.length) {
360 |             const selectedItem = allItems[selectedIndex];
361 |             if (selectedItem.type === "creatable") {
362 |               const newOption = { value: searchTerm, label: searchTerm, enabled: true };
363 |               onOptionAdd(newOption);
364 |               onItemCreated(searchTerm);
365 |               toggleOption(searchTerm);
366 |             } else if (selectedItem.enabled !== false) {
367 |               // Only toggle if the option is enabled
368 |               toggleOption(selectedItem.value);
369 |             }
370 |           } else if (allItems.length === 1) {
371 |             // If there's only one item (creatable or regular) and no selection, select it
372 |             const singleItem = allItems[0];
373 |             if (singleItem.type === "creatable") {
374 |               const newOption = { value: searchTerm, label: searchTerm, enabled: true };
375 |               onOptionAdd(newOption);
376 |               onItemCreated(searchTerm);
377 |               toggleOption(searchTerm);
378 |             } else if (singleItem.enabled !== false) {
379 |               // Only toggle if the option is enabled
380 |               toggleOption(singleItem.value);
381 |             }
382 |           }
383 |           break;
384 |         case "Escape":
385 |           event.preventDefault();
386 |           setOpen(false);
387 |           break;
388 |       }
389 |     },
390 |     [
391 |       open,
392 |       selectedIndex,
393 |       allItems,
394 |       searchTerm,
395 |       onOptionAdd,
396 |       onItemCreated,
397 |       toggleOption,
398 |       setOpen,
399 |       findNextEnabledIndex,
400 |       findPreviousEnabledIndex,
401 |     ],
402 |   );
403 | 
404 |   // Render the "empty list" message
405 |   const emptyListNode = useMemo(
406 |     () =>
407 |       emptyListTemplate ?? (
408 |         <div className={styles.autoCompleteEmpty}>
409 |           <Icon name="noresult" />
410 |           <span>List is empty</span>
411 |         </div>
412 |       ),
413 |     [emptyListTemplate],
414 |   );
415 | 
416 |   // Register component API for external interactions
417 |   const focus = useCallback(() => {
418 |     inputRef?.current?.focus();
419 |   }, [inputRef]);
420 | 
421 |   const setValue = useEvent((newValue: string | string[]) => {
422 |     updateState({ value: newValue });
423 |   });
424 | 
425 |   useEffect(() => {
426 |     registerComponentApi?.({
427 |       focus,
428 |       setValue,
429 |     });
430 |   }, [focus, registerComponentApi, setValue]);
431 | 
432 |   const optionContextValue = useMemo(
433 |     () => ({
434 |       onOptionAdd,
435 |       onOptionRemove,
436 |     }),
437 |     [onOptionAdd, onOptionRemove],
438 |   );
439 | 
440 |   const autoCompleteContextValue = useMemo(() => {
441 |     return {
442 |       multi,
443 |       value,
444 |       onChange: toggleOption,
445 |       options,
446 |       inputValue,
447 |       searchTerm,
448 |       open,
449 |       setOpen,
450 |       setSelectedIndex,
451 |       optionRenderer,
452 |     };
453 |   }, [
454 |     inputValue,
455 |     searchTerm,
456 |     multi,
457 |     options,
458 |     toggleOption,
459 |     value,
460 |     open,
461 |     setOpen,
462 |     setSelectedIndex,
463 |     optionRenderer,
464 |   ]);
465 | 
466 |   return (
467 |     <AutoCompleteContext.Provider value={autoCompleteContextValue}>
468 |       <OptionContext.Provider value={optionContextValue}>
469 |         <OptionTypeProvider Component={HiddenOption}>
470 |           <Popover
471 |             open={open}
472 |             onOpenChange={(isOpen) => {
473 |               if (readOnly) return;
474 |               setOpen(isOpen);
475 |               if (!isOpen) {
476 |                 // Reset highlighted option when dropdown closes
477 |                 setSelectedIndex(-1);
478 |               }
479 |             }}
480 |             modal={false}
481 |           >
482 |             <PopoverTrigger asChild ref={setReferenceElement}>
483 |               <div
484 |                 ref={forwardedRef}
485 |                 style={style}
486 |                 data-part-id={PART_LIST_WRAPPER}
487 |                 className={classnames(
488 |                   className,
489 |                   styles.badgeListWrapper,
490 |                   styles[validationStatus],
491 |                   {
492 |                     [styles.disabled]: !enabled,
493 |                     [styles.focused]: isFocused,
494 |                   },
495 |                 )}
496 |                 aria-expanded={open}
497 |                 onClick={(event) => {
498 |                   if (readOnly) return;
499 |                   // In multi mode, only open the dropdown, don't toggle
500 |                   // In single mode, toggle as usual
501 |                   if (multi && open) {
502 |                     return; // Already open, don't close
503 |                   }
504 |                   event.stopPropagation();
505 |                   setOpen((prev) => !prev);
506 |                 }}
507 |               >
508 |                 {Array.isArray(selectedValue) && selectedValue.length > 0 && (
509 |                   <div className={styles.badgeList}>
510 |                     {selectedValue.map((v, index) => (
511 |                       <span key={index} className={styles.badge}>
512 |                         {v?.label}
513 |                         {!readOnly && (
514 |                           <Icon
515 |                             name="close"
516 |                             size="sm"
517 |                             onClick={(event) => {
518 |                               event.stopPropagation();
519 |                               toggleOption(v.value);
520 |                             }}
521 |                           />
522 |                         )}
523 |                       </span>
524 |                     ))}
525 |                   </div>
526 |                 )}
527 |                 <div className={styles.inputWrapper}>
528 |                   <input
529 |                     {...rest}
530 |                     role="combobox"
531 |                     id={id}
532 |                     ref={inputRef}
533 |                     onFocus={(ev) => {
534 |                       setIsFocused(true);
535 |                       onFocus(ev);
536 |                     }}
537 |                     onBlur={(ev) => {
538 |                       if (inputValue === "" && !multi) {
539 |                         clearValue();
540 |                       } else {
541 |                         if (!Array.isArray(selectedValue) && selectedValue) {
542 |                           setInputValue(selectedValue?.label);
543 |                         } else {
544 |                           setInputValue("");
545 |                         }
546 |                       }
547 |                       onBlur(ev);
548 |                       setIsFocused(false);
549 |                     }}
550 |                     onKeyDown={(event) => {
551 |                       if (readOnly) return;
552 | 
553 |                       // Handle opening dropdown
554 |                       if (event.key === "ArrowDown" && !open) {
555 |                         setOpen(true);
556 |                         return;
557 |                       }
558 | 
559 |                       // Handle keyboard navigation when dropdown is open
560 |                       if (open) {
561 |                         handleKeyDown(event);
562 |                       } else if (event.key === "Enter") {
563 |                         setOpen(true);
564 |                       }
565 |                     }}
566 |                     data-part-id={PART_INPUT}
567 |                     readOnly={readOnly}
568 |                     autoFocus={autoFocus}
569 |                     aria-autocomplete="list"
570 |                     value={inputValue}
571 |                     disabled={!enabled}
572 |                     onChange={(event) => {
573 |                       setOpen(true);
574 |                       setInputValue(event.target.value);
575 |                       setSearchTerm(event.target.value);
576 |                     }}
577 |                     placeholder={!readOnly ? placeholder : ""}
578 |                     className={styles.commandInput}
579 |                   />
580 |                   <div className={styles.actions}>
581 |                     {value?.length > 0 && enabled && !readOnly && (
582 |                       <span
583 |                         className={styles.action}
584 |                         onClick={(event) => {
585 |                           event.stopPropagation();
586 |                           clearValue();
587 |                         }}
588 |                       >
589 |                         <Icon name="close" />
590 |                       </span>
591 |                     )}
592 |                     <span
593 |                       className={styles.action}
594 |                       onClick={() => {
595 |                         if (readOnly) return;
596 |                         setOpen(!open);
597 |                         // Focus the input after opening dropdown
598 |                         inputRef.current?.focus();
599 |                       }}
600 |                     >
601 |                       <Icon name="chevrondown" />
602 |                     </span>
603 |                   </div>
604 |                 </div>
605 |               </div>
606 |             </PopoverTrigger>
607 |             {open && (
608 |               <Portal container={root}>
609 |                 <PopoverContent
610 |                   style={{ width, height: dropdownHeight }}
611 |                   className={styles.popoverContent}
612 |                   align="start"
613 |                   onOpenAutoFocus={(e) => e.preventDefault()}
614 |                 >
615 |                   <div
616 |                     role="listbox"
617 |                     className={styles.commandList}
618 |                     style={{ height: dropdownHeight }}
619 |                   >
620 |                     {filteredOptions.length === 0 && !shouldShowCreatable && (
621 |                       <div>{emptyListNode}</div>
622 |                     )}
623 |                     {shouldShowCreatable && (
624 |                       <CreatableItem
625 |                         onNewItem={onItemCreated}
626 |                         isHighlighted={selectedIndex === 0}
627 |                       />
628 |                     )}
629 |                     <div>
630 |                       {filteredOptions.map(({ value, label, enabled, keywords }, index) => {
631 |                         const itemIndex = shouldShowCreatable ? index + 1 : index;
632 |                         return (
633 |                           <AutoCompleteOption
634 |                             key={value}
635 |                             value={value}
636 |                             label={label}
637 |                             enabled={enabled}
638 |                             keywords={keywords}
639 |                             readOnly={readOnly}
640 |                             isHighlighted={selectedIndex === itemIndex}
641 |                             itemIndex={itemIndex}
642 |                           />
643 |                         );
644 |                       })}
645 |                     </div>
646 |                   </div>
647 |                 </PopoverContent>
648 |               </Portal>
649 |             )}
650 |           </Popover>
651 |           {children}
652 |         </OptionTypeProvider>
653 |       </OptionContext.Provider>
654 |     </AutoCompleteContext.Provider>
655 |   );
656 | });
657 | 
658 | type CreatableItemProps = {
659 |   onNewItem: (item: string) => void;
660 |   isHighlighted?: boolean;
661 | };
662 | 
663 | function CreatableItem({ onNewItem, isHighlighted = false }: CreatableItemProps) {
664 |   const { value, options, searchTerm, onChange, setOpen, setSelectedIndex, multi } =
665 |     useAutoComplete();
666 |   const { onOptionAdd } = useOption();
667 |   if (
668 |     isOptionsExist(options, [{ value: searchTerm, label: searchTerm }]) ||
669 |     (Array.isArray(value) && value?.find((s) => s === searchTerm)) ||
670 |     searchTerm === value
671 |   ) {
672 |     return <span style={{ display: "none" }} />;
673 |   }
674 | 
675 |   const handleClick = () => {
676 |     const newOption = { value: searchTerm, label: searchTerm, enabled: true };
677 |     onOptionAdd(newOption);
678 |     onNewItem?.(searchTerm);
679 |     onChange(searchTerm);
680 |     // Only close dropdown for single select mode
681 |     if (!multi) {
682 |       setOpen(false);
683 |     }
684 |   };
685 | 
686 |   const Item = (
687 |     <div
688 |       className={classnames(styles.autoCompleteOption, {
689 |         [styles.highlighted]: isHighlighted,
690 |       })}
691 |       onMouseDown={(e) => {
692 |         e.preventDefault();
693 |         e.stopPropagation();
694 |       }}
695 |       onMouseEnter={() => {
696 |         if (setSelectedIndex) {
697 |           setSelectedIndex(0); // CreatableItem is always at index 0
698 |         }
699 |       }}
700 |       onClick={handleClick}
701 |       role="option"
702 |       aria-selected={false}
703 |     >
704 |       {`Create "${searchTerm}"`}
705 |     </div>
706 |   );
707 | 
708 |   // For normal creatable
709 |   if (searchTerm.length > 0) {
710 |     return Item;
711 |   }
712 | 
713 |   return <span style={{ display: "none" }} />;
714 | }
715 | 
716 | function AutoCompleteOption(option: Option & { isHighlighted?: boolean; itemIndex?: number }) {
717 |   const {
718 |     value,
719 |     label,
720 |     enabled = true,
721 |     readOnly,
722 |     children,
723 |     isHighlighted = false,
724 |     itemIndex,
725 |   } = option;
726 |   const id = useId();
727 |   const {
728 |     value: selectedValue,
729 |     onChange,
730 |     multi,
731 |     setOpen,
732 |     setSelectedIndex,
733 |     optionRenderer,
734 |   } = useAutoComplete();
735 |   const selected = multi ? selectedValue?.includes(value) : selectedValue === value;
736 | 
737 |   const handleClick = () => {
738 |     if (!readOnly && enabled) {
739 |       onChange(value);
740 |       // Only close dropdown for single select mode
741 |       if (!multi) {
742 |         setOpen(false);
743 |       }
744 |     }
745 |   };
746 | 
747 |   return (
748 |     <div
749 |       id={id}
750 |       role="option"
751 |       aria-disabled={!enabled}
752 |       aria-selected={selected}
753 |       className={classnames(styles.autoCompleteOption, {
754 |         [styles.disabledOption]: !enabled,
755 |         [styles.highlighted]: isHighlighted,
756 |       })}
757 |       onMouseDown={(e) => {
758 |         e.preventDefault();
759 |         e.stopPropagation();
760 |       }}
761 |       onMouseEnter={() => {
762 |         if (itemIndex !== undefined && setSelectedIndex && enabled) {
763 |           setSelectedIndex(itemIndex);
764 |         }
765 |       }}
766 |       onClick={handleClick}
767 |     >
768 |       {children ? (
769 |         <>
770 |           <div className={styles.autoCompleteOptionContent}>{children}</div>
771 |           {selected && <Icon name="checkmark" />}
772 |         </>
773 |       ) : optionRenderer ? (
774 |         optionRenderer({ label, value, enabled }, selectedValue as any, false)
775 |       ) : (
776 |         <>
777 |           <div className={styles.autoCompleteOptionContent}>{label}</div>
778 |           {selected && <Icon name="checkmark" />}
779 |         </>
780 |       )}
781 |     </div>
782 |   );
783 | }
784 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Icon/Icon.spec.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { create } from "domain";
  2 | import { expect, test } from "../../testing/fixtures";
  3 | 
  4 | // =============================================================================
  5 | // BASIC FUNCTIONALITY TESTS
  6 | // =============================================================================
  7 | 
  8 | test.describe("Basic Functionality", () => {
  9 |   test("component renders with valid icon name", async ({ initTestBed, page }) => {
 10 |     await initTestBed(`<Icon name="home"/>`);
 11 |     const icon = page.getByTestId("test-id-component");
 12 |     await expect(icon).toBeVisible();
 13 |   });
 14 | 
 15 |   test("component does not render without name prop", async ({ initTestBed, page }) => {
 16 |     await initTestBed(`<Icon/>`);
 17 |     const icon = page.getByTestId("test-id-component");
 18 |     const exists = await icon.count();
 19 |     expect(exists).toBe(0); // Icon doesn't render without a valid name
 20 |   });
 21 | });
 22 | 
 23 | // =============================================================================
 24 | // NAME PROPERTY TESTS
 25 | // =============================================================================
 26 | 
 27 | test.describe("name Property", () => {
 28 |   test("displays icon when valid name is provided", async ({ initTestBed, page }) => {
 29 |     await initTestBed(`<Icon name="home"/>`);
 30 |     const icon = page.getByTestId("test-id-component");
 31 |     await expect(icon).toBeVisible();
 32 |   });
 33 | 
 34 |   test("handles non-existent icon name gracefully", async ({ initTestBed, page }) => {
 35 |     await initTestBed(`<Icon name="non-existent-icon"/>`);
 36 |     const icon = page.getByTestId("test-id-component");
 37 |     // Component doesn't render when icon name doesn't exist
 38 |     const exists = await icon.count();
 39 |     expect(exists).toBe(0);
 40 |   });
 41 | 
 42 |   test("handles empty string name", async ({ initTestBed, page }) => {
 43 |     await initTestBed(`<Icon name=""/>`);
 44 |     const icon = page.getByTestId("test-id-component");
 45 |     // Component doesn't render with empty string name
 46 |     const exists = await icon.count();
 47 |     expect(exists).toBe(0);
 48 |   });
 49 | 
 50 |   test("handles null name value", async ({ initTestBed, page }) => {
 51 |     await initTestBed(`<Icon name="{null}"/>`);
 52 |     const icon = page.getByTestId("test-id-component");
 53 |     // Component doesn't render with null name
 54 |     const exists = await icon.count();
 55 |     expect(exists).toBe(0);
 56 |   });
 57 | 
 58 |   test("handles undefined name value", async ({ initTestBed, page }) => {
 59 |     await initTestBed(`<Icon name="{undefined}"/>`);
 60 |     const icon = page.getByTestId("test-id-component");
 61 |     // Component doesn't render with undefined name
 62 |     const exists = await icon.count();
 63 |     expect(exists).toBe(0);
 64 |   });
 65 | 
 66 |   test("handles special characters in name", async ({ initTestBed, page }) => {
 67 |     await initTestBed(`<Icon name="test-icon_with$pecial@chars"/>`);
 68 |     const icon = page.getByTestId("test-id-component");
 69 |     // Component doesn't render with non-existent special character name
 70 |     const exists = await icon.count();
 71 |     expect(exists).toBe(0);
 72 |   });
 73 | 
 74 |   test("handles unicode characters in name", async ({ initTestBed, page }) => {
 75 |     await initTestBed(`<Icon name="测试图标"/>`);
 76 |     const icon = page.getByTestId("test-id-component");
 77 |     // Component doesn't render with non-existent unicode name
 78 |     const exists = await icon.count();
 79 |     expect(exists).toBe(0);
 80 |   });
 81 | 
 82 |   test("handles emoji in name", async ({ initTestBed, page }) => {
 83 |     await initTestBed(`<Icon name="🏠"/>`);
 84 |     const icon = page.getByTestId("test-id-component");
 85 |     // Component doesn't render with non-existent emoji name
 86 |     const exists = await icon.count();
 87 |     expect(exists).toBe(0);
 88 |   });
 89 | 
 90 |   test("handles component-specific icon name syntax", async ({ initTestBed, page }) => {
 91 |     await initTestBed(`<Icon name="component:specific-icon"/>`);
 92 |     const icon = page.getByTestId("test-id-component");
 93 |     // Component doesn't render with non-existent component-specific name
 94 |     const exists = await icon.count();
 95 |     expect(exists).toBe(0);
 96 |   });
 97 | 
 98 |   test("handles very long icon name", async ({ initTestBed, page }) => {
 99 |     const longName = "a".repeat(1000);
100 |     await initTestBed(`<Icon name="${longName}"/>`);
101 |     const icon = page.getByTestId("test-id-component");
102 |     // Component doesn't render with non-existent long name
103 |     const exists = await icon.count();
104 |     expect(exists).toBe(0);
105 |   });
106 | });
107 | 
108 | // =============================================================================
109 | // SIZE PROPERTY TESTS
110 | // =============================================================================
111 | 
112 | test.describe("size Property", () => {
113 |   test("renders with predefined size 'xs'", async ({ initTestBed, createIconDriver }) => {
114 |     await initTestBed(`<Icon testId="icon" name="home" size="xs"/>`);
115 |     const iconDrv = await createIconDriver("icon");
116 |     const icon = iconDrv.svgIcon;
117 |     await expect(icon).toBeVisible();
118 |     // Check computed width/height using CSS
119 |     const computedStyle = await icon.evaluate((el) => {
120 |       const style = window.getComputedStyle(el);
121 |       return { width: style.width, height: style.height };
122 |     });
123 |     expect(computedStyle.width).toBe("12px"); // 0.75em calculated
124 |   });
125 | 
126 |   test("renders with predefined size 'sm'", async ({ initTestBed, createIconDriver }) => {
127 |     await initTestBed(`<Icon testId="icon" name="home" size="sm"/>`);
128 |     const iconDrv = await createIconDriver("icon");
129 |     const icon = iconDrv.svgIcon;
130 |     await expect(icon).toBeVisible();
131 |     const computedStyle = await icon.evaluate((el) => {
132 |       const style = window.getComputedStyle(el);
133 |       return { width: style.width, height: style.height };
134 |     });
135 |     expect(computedStyle.width).toBe("16px"); // 1em calculated
136 |   });
137 | 
138 |   test("renders with predefined size 'md'", async ({ initTestBed, createIconDriver }) => {
139 |     await initTestBed(`<Icon testId="icon" name="home" size="md"/>`);
140 |     const iconDrv = await createIconDriver("icon");
141 |     const icon = iconDrv.svgIcon;
142 |     await expect(icon).toBeVisible();
143 |     const computedStyle = await icon.evaluate((el) => {
144 |       const style = window.getComputedStyle(el);
145 |       return { width: style.width, height: style.height };
146 |     });
147 |     expect(computedStyle.width).toBe("24px"); // 1.5rem calculated
148 |   });
149 | 
150 |   test("renders with predefined size 'lg'", async ({ initTestBed, createIconDriver }) => {
151 |     await initTestBed(`<Icon testId="icon" name="home" size="lg"/>`);
152 |     const iconDrv = await createIconDriver("icon");
153 |     const icon = iconDrv.svgIcon;
154 |     await expect(icon).toBeVisible();
155 |     const computedStyle = await icon.evaluate((el) => {
156 |       const style = window.getComputedStyle(el);
157 |       return { width: style.width, height: style.height };
158 |     });
159 |     expect(computedStyle.width).toBe("32px"); // 2em calculated
160 |   });
161 | 
162 |   test("renders with custom pixel size", async ({ initTestBed, createIconDriver }) => {
163 |     await initTestBed(`<Icon testId="icon" name="home" size="48px"/>`);
164 |     const iconDrv = await createIconDriver("icon");
165 |     const icon = iconDrv.svgIcon;
166 |     await expect(icon).toBeVisible();
167 |     const computedStyle = await icon.evaluate((el) => {
168 |       const style = window.getComputedStyle(el);
169 |       return { width: style.width, height: style.height };
170 |     });
171 |     expect(computedStyle.width).toBe("48px");
172 |   });
173 | 
174 |   test("renders with custom em size", async ({ initTestBed, createIconDriver }) => {
175 |     await initTestBed(`<Icon testId="icon" name="home" size="3em"/>`);
176 |     const iconDrv = await createIconDriver("icon");
177 |     const icon = iconDrv.svgIcon;
178 |     await expect(icon).toBeVisible();
179 |     const computedStyle = await icon.evaluate((el) => {
180 |       const style = window.getComputedStyle(el);
181 |       return { width: style.width, height: style.height };
182 |     });
183 |     expect(computedStyle.width).toBe("48px"); // 3em calculated at 16px base
184 |   });
185 | 
186 |   test("renders with custom rem size", async ({ initTestBed, createIconDriver }) => {
187 |     await initTestBed(`<Icon testId="icon" name="home" size="2rem"/>`);
188 |     const iconDrv = await createIconDriver("icon");
189 |     const icon = iconDrv.svgIcon;
190 |     await expect(icon).toBeVisible();
191 |     const computedStyle = await icon.evaluate((el) => {
192 |       const style = window.getComputedStyle(el);
193 |       return { width: style.width, height: style.height };
194 |     });
195 |     expect(computedStyle.width).toBe("32px"); // 2rem calculated
196 |   });
197 | 
198 |   test("handles invalid size gracefully", async ({ initTestBed, createIconDriver }) => {
199 |     await initTestBed(`<Icon testId="icon" name="home" size="invalid-size"/>`);
200 |     const iconDrv = await createIconDriver("icon");
201 |     const icon = iconDrv.svgIcon;
202 |     await expect(icon).not.toBeVisible();
203 |   });
204 | 
205 |   test("handles negative size value", async ({ initTestBed, createIconDriver }) => {
206 |     await initTestBed(`<Icon testId="icon" name="home" size="-20px"/>`);
207 |     const iconDrv = await createIconDriver("icon");
208 |     const icon = iconDrv.svgIcon;
209 | 
210 |     // With negative size, element exists but browser normalizes to 0px
211 |     const exists = await icon.count();
212 |     expect(exists).toBe(1);
213 | 
214 |     const computedStyle = await icon.evaluate((el) => {
215 |       const style = window.getComputedStyle(el);
216 |       return { width: style.width, height: style.height };
217 |     });
218 |     // Browser normalizes negative values to 0px
219 |     expect(computedStyle.width).toBe("0px");
220 |   });
221 | 
222 |   test("handles zero size value", async ({ initTestBed, createIconDriver }) => {
223 |     await initTestBed(`<Icon testId="icon" name="home" size="0px"/>`);
224 |     const iconDrv = await createIconDriver("icon");
225 |     const icon = iconDrv.svgIcon;
226 |     // Zero-size elements might not be "visible" but should exist
227 |     const exists = await icon.count();
228 |     expect(exists).toBe(1);
229 | 
230 |     const computedStyle = await icon.evaluate((el) => {
231 |       const style = window.getComputedStyle(el);
232 |       return { width: style.width, height: style.height };
233 |     });
234 |     expect(computedStyle.width).toBe("0px");
235 |   });
236 | 
237 |   test("handles null size value", async ({ initTestBed, createIconDriver }) => {
238 |     await initTestBed(`<Icon testId="icon" name="home" size="{null}"/>`);
239 |     const iconDrv = await createIconDriver("icon");
240 |     const icon = iconDrv.svgIcon;
241 |     await expect(icon).toBeVisible();
242 |   });
243 | 
244 |   test("handles undefined size value", async ({ initTestBed, createIconDriver }) => {
245 |     await initTestBed(`<Icon testId="icon" name="home" size="{undefined}"/>`);
246 |     const iconDrv = await createIconDriver("icon");
247 |     const icon = iconDrv.svgIcon;
248 |     await expect(icon).toBeVisible();
249 |   });
250 | });
251 | 
252 | // =============================================================================
253 | // FALLBACK PROPERTY TESTS
254 | // =============================================================================
255 | 
256 | test.describe("fallback Property", () => {
257 |   test("displays fallback icon when primary icon doesn't exist", async ({ initTestBed, page }) => {
258 |     await initTestBed(`<Icon name="non-existent-icon" fallback="trash"/>`);
259 |     const icon = page.getByTestId("test-id-component");
260 |     await expect(icon).toBeVisible();
261 |   });
262 | 
263 |   test("ignores fallback when primary icon exists", async ({ initTestBed, page }) => {
264 |     await initTestBed(`<Icon name="home" fallback="trash"/>`);
265 |     const icon = page.getByTestId("test-id-component");
266 |     await expect(icon).toBeVisible();
267 |   });
268 | 
269 |   test("handles empty string fallback", async ({ initTestBed, page }) => {
270 |     await initTestBed(`<Icon name="non-existent-icon" fallback=""/>`);
271 |     const icon = page.getByTestId("test-id-component");
272 |     // Empty fallback means no icon renders
273 |     const exists = await icon.count();
274 |     expect(exists).toBe(0);
275 |   });
276 | 
277 |   test("handles null fallback value", async ({ initTestBed, page }) => {
278 |     await initTestBed(`<Icon name="non-existent-icon" fallback="{null}"/>`);
279 |     const icon = page.getByTestId("test-id-component");
280 |     // Null fallback means no icon renders
281 |     const exists = await icon.count();
282 |     expect(exists).toBe(0);
283 |   });
284 | 
285 |   test("handles undefined fallback value", async ({ initTestBed, page }) => {
286 |     await initTestBed(`<Icon name="non-existent-icon" fallback="{undefined}"/>`);
287 |     const icon = page.getByTestId("test-id-component");
288 |     // Undefined fallback means no icon renders
289 |     const exists = await icon.count();
290 |     expect(exists).toBe(0);
291 |   });
292 | 
293 |   test("handles special characters in fallback", async ({ initTestBed, page }) => {
294 |     await initTestBed(`<Icon name="non-existent-icon" fallback="test-icon_with$pecial@chars"/>`);
295 |     const icon = page.getByTestId("test-id-component");
296 |     // Non-existent fallback means no icon renders
297 |     const exists = await icon.count();
298 |     expect(exists).toBe(0);
299 |   });
300 | 
301 |   test("handles non-existent fallback icon", async ({ initTestBed, page }) => {
302 |     await initTestBed(`<Icon name="non-existent-icon" fallback="also-non-existent"/>`);
303 |     const icon = page.getByTestId("test-id-component");
304 |     // Non-existent fallback means no icon renders
305 |     const exists = await icon.count();
306 |     expect(exists).toBe(0);
307 |   });
308 | });
309 | 
310 | // =============================================================================
311 | // CLICK EVENT TESTS
312 | // =============================================================================
313 | 
314 | test.describe("click Event", () => {
315 |   test("fires click event when icon is clicked", async ({ initTestBed, createIconDriver }) => {
316 |     const { testStateDriver } = await initTestBed(`
317 |       <Icon testId="icon" name="home" onClick="testState = 'clicked'"/>
318 |     `);
319 | 
320 |     const iconDrv = await createIconDriver("icon");
321 |     const icon = iconDrv.svgIcon;
322 |     await icon.click();
323 | 
324 |     await expect.poll(testStateDriver.testState).toEqual("clicked");
325 |   });
326 | 
327 |   test("applies clickable cursor when click handler is present", async ({
328 |     initTestBed,
329 |     createIconDriver,
330 |   }) => {
331 |     await initTestBed(`<Icon testId="icon" name="home" onClick="testState = 'clicked'"/>`);
332 | 
333 |     const iconDrv = await createIconDriver("icon");
334 |     const icon = iconDrv.svgIcon;
335 |     await expect(icon).toHaveCSS("cursor", "pointer");
336 |   });
337 | 
338 |   test("does not apply clickable cursor when no click handler", async ({ initTestBed, createIconDriver }) => {
339 |     await initTestBed(`<Icon testId="icon" name="home"/>`);
340 |     const iconDrv = await createIconDriver("icon");
341 |     const icon = iconDrv.svgIcon;
342 |     const cursor = await icon.evaluate((el) => window.getComputedStyle(el).cursor);
343 |     expect(cursor).not.toBe("pointer");
344 |   });
345 | 
346 |   test("click event provides event object", async ({ initTestBed, createIconDriver }) => {
347 |     const { testStateDriver } = await initTestBed(`
348 |       <Icon testId="icon" name="home" onClick="event => testState = event.type"/>
349 |     `);
350 | 
351 |     const iconDrv = await createIconDriver("icon");
352 |     const icon = iconDrv.svgIcon;
353 |     await icon.click();
354 | 
355 |     await expect.poll(testStateDriver.testState).toEqual("click");
356 |   });
357 | 
358 |   test("multiple clicks increment counter", async ({ initTestBed, createIconDriver }) => {
359 |     const { testStateDriver } = await initTestBed(`
360 |       <Icon testId="icon" name="home" onClick="testState = (testState || 0) + 1"/>
361 |     `);
362 | 
363 |     const iconDrv = await createIconDriver("icon");
364 |     const icon = iconDrv.svgIcon;
365 | 
366 |     await icon.click();
367 |     await expect.poll(testStateDriver.testState).toEqual(1);
368 | 
369 |     await icon.click();
370 |     await expect.poll(testStateDriver.testState).toEqual(2);
371 | 
372 |     await icon.click();
373 |     await expect.poll(testStateDriver.testState).toEqual(3);
374 |   });
375 | });
376 | 
377 | // =============================================================================
378 | // ACCESSIBILITY TESTS
379 | // =============================================================================
380 | 
381 | test.describe("Accessibility", () => {
382 |   test("icon renders as inline element by default", async ({ initTestBed, createIconDriver }) => {
383 |     await initTestBed(`<Icon testId="icon" name="home"/>`);
384 |     const icon = await createIconDriver("icon");
385 |     const display = await icon.svgIcon.evaluate((el) => window.getComputedStyle(el).display);
386 |     expect(display).toBe("inline-block");
387 |   });
388 | 
389 |   test("icon has correct vertical alignment", async ({ initTestBed, createIconDriver }) => {
390 |     await initTestBed(`<Icon testId="icon" name="home"/>`);
391 |     const icon = await createIconDriver("icon");
392 | 
393 |     await expect(icon.svgIcon as any).toHaveCSS("vertical-align", "text-bottom");
394 |   });
395 | 
396 |   test("icon inherits color from parent", async ({ initTestBed, createIconDriver }) => {
397 |     await initTestBed(`
398 |       <Text color="red">
399 |         <Icon testId="icon" name="home"/>
400 |       </Text>
401 |     `);
402 |     const icon = await createIconDriver("icon");
403 | 
404 |     const color = await icon.svgIcon.evaluate((el) => window.getComputedStyle(el).color);
405 |     // Should inherit red color or have some computed red value
406 |     expect(color).not.toBe(""); // Should have some color value
407 |   });
408 | 
409 |   test("icon is clickable when click handler is present", async ({ initTestBed, createIconDriver }) => {
410 |     const { testStateDriver } = await initTestBed(`
411 |       <Icon testId="icon" name="home" onClick="testState = 'activated'"/>
412 |     `);
413 | 
414 |     const icon = await createIconDriver("icon");
415 |     await icon.click();
416 | 
417 |     await expect.poll(testStateDriver.testState).toEqual("activated");
418 |   });
419 | 
420 |   test(
421 |     "icon can receive focus via tabIndex when clickable",
422 |     async ({ initTestBed, createIconDriver }) => {
423 |       await initTestBed(`<Icon testId="icon" name="home" onClick="testState = 'clicked'" />`);
424 | 
425 |       const icon = (await createIconDriver("icon")).svgIcon;
426 | 
427 |       // For SVG elements, we test focus capability by checking if it can be found after focus
428 |       await expect(icon).toBeVisible();
429 |       await icon.focus();
430 |       await expect(icon).toBeFocused();
431 |     },
432 |   );
433 | 
434 |   test(
435 |     "icon supports keyboard activation with Enter",
436 |     async ({ initTestBed, createIconDriver }) => {
437 |       const testBed = await initTestBed(`<Icon testId="icon" name="home" onClick="testState = 'clicked';" />`);
438 |       const { testStateDriver } = testBed;
439 | 
440 |       const driver = await createIconDriver("icon");
441 |       const icon = driver.svgIcon;
442 | 
443 |       // For SVG elements, we test focus capability by checking if it can be found after focus
444 |       await expect(icon).toBeVisible();
445 |       await icon.press("Enter");
446 |       expect(await testStateDriver.testState()).toBe("clicked");
447 |     },
448 |   );
449 | 
450 |   test(
451 |     "icon supports keyboard activation with Space",
452 |     async ({ initTestBed, createIconDriver }) => {
453 |       const testBed = await initTestBed(`<Icon testId="icon" name="home" onClick="testState = 'clicked';" />`);
454 |       const { testStateDriver } = testBed;
455 | 
456 |       const driver = await createIconDriver("icon");
457 |       const icon = driver.svgIcon;
458 | 
459 |       // For SVG elements, we test focus capability by checking if it can be found after focus
460 |       await expect(icon).toBeVisible();
461 |       await icon.press("Space");
462 |       expect(await testStateDriver.testState()).toBe("clicked");
463 |     },
464 |   );
465 | 
466 | });
467 | 
468 | // =============================================================================
469 | // THEME VARIABLE TESTS
470 | // =============================================================================
471 | 
472 | test.describe("Theme Variables", () => {
473 |   test("applies theme variable for size", async ({ initTestBed, createIconDriver }) => {
474 |     await initTestBed(`<Icon testId="icon" name="home"/>`, {
475 |       testThemeVars: {
476 |         "size-Icon": "3rem",
477 |       },
478 |     });
479 | 
480 |     const iconDrv = await createIconDriver("icon");
481 |     const icon = iconDrv.svgIcon;
482 |     const computedStyle = await icon.evaluate((el) => {
483 |       const style = window.getComputedStyle(el);
484 |       return { width: style.width, height: style.height };
485 |     });
486 | 
487 |     expect(computedStyle.width).toBe("48px"); // 3rem calculated
488 |     expect(computedStyle.height).toBe("48px");
489 |   });
490 | 
491 |   test("size prop overrides theme variable", async ({ initTestBed, createIconDriver }) => {
492 |     await initTestBed(`<Icon testId="icon" name="home" size="2rem"/>`, {
493 |       testThemeVars: {
494 |         "size-Icon": "4rem",
495 |       },
496 |     });
497 | 
498 |     const icon = await createIconDriver("icon");
499 |     const computedStyle = await icon.svgIcon.evaluate((el) => {
500 |       const style = window.getComputedStyle(el);
501 |       return { width: style.width, height: style.height };
502 |     });
503 | 
504 |     expect(computedStyle.width).toBe("32px"); // 2rem calculated, not 4rem from theme
505 |     expect(computedStyle.height).toBe("32px");
506 |   });
507 | 
508 |   test("applies theme variable with custom CSS variable", async ({ initTestBed, createIconDriver }) => {
509 |     await initTestBed(`<Icon testId="icon" name="home"/>`, {
510 |       testThemeVars: {
511 |         "size-Icon": "var(--custom-icon-size, 40px)",
512 |       },
513 |     });
514 | 
515 |     const icon = await createIconDriver("icon");
516 |     const computedStyle = await icon.svgIcon.evaluate((el) => {
517 |       const style = window.getComputedStyle(el);
518 |       return { width: style.width, height: style.height };
519 |     });
520 | 
521 |     expect(computedStyle.width).toBe("40px"); // Fallback value used
522 |     expect(computedStyle.height).toBe("40px");
523 |   });
524 | });
525 | 
526 | // =============================================================================
527 | // OTHER EDGE CASE TESTS
528 | // =============================================================================
529 | 
530 | test.describe("Other Edge Cases", () => {
531 |   test("handles null and undefined props gracefully", async ({ initTestBed, createIconDriver }) => {
532 |     await initTestBed(`<Icon testId="icon" name="home"/>`);
533 |     const icon = await createIconDriver("icon");
534 |     await expect(icon.svgIcon).toBeVisible();
535 |   });
536 | 
537 |   test("handles component with all invalid props gracefully", async ({ initTestBed, createIconDriver }) => {
538 |     await initTestBed(`<Icon testId="icon" invalidProp="invalid" anotherInvalid="{123}"/>`);
539 | 
540 |     // Component with invalid props may not be visible, but should not crash
541 |     const icon = await createIconDriver("icon");
542 |     const isVisible = await icon.svgIcon.isVisible();
543 | 
544 |     // Either it's visible with fallback behavior or gracefully hidden
545 |     if (isVisible) {
546 |       // If visible, it should have fallback behavior
547 |       await expect(icon.svgIcon).toBeVisible();
548 |     } else {
549 |       // It's acceptable for component to be hidden with invalid props
550 |       expect(isVisible).toBe(false);
551 |     }
552 |   });
553 | 
554 |   test("handles mixed valid and invalid props", async ({ initTestBed, createIconDriver }) => {
555 |     await initTestBed(`<Icon testId="icon" name="home" invalidProp="invalid" size="lg"/>`);
556 |     const iconDrv = await createIconDriver("icon");
557 |     const icon = iconDrv.svgIcon;
558 |     await expect(icon).toBeVisible();
559 | 
560 |     // Valid props should still work
561 |     const computedStyle = await icon.evaluate((el) => {
562 |       const style = window.getComputedStyle(el);
563 |       return { width: style.width, height: style.height };
564 |     });
565 |     expect(computedStyle.width).toBe("32px"); // lg size should apply
566 |   });
567 | 
568 |   test("handles object value for name prop", async ({ initTestBed, createIconDriver }) => {
569 |     await initTestBed(`<Icon testId="icon" name="{{}}" />`);
570 | 
571 |     const icon = await createIconDriver("icon");
572 |     const isVisible = await icon.svgIcon.isVisible();
573 | 
574 |     if (isVisible) {
575 |       await expect(icon.svgIcon).toBeVisible();
576 |     } else {
577 |       expect(isVisible).toBe(false);
578 |     }
579 |   });
580 | 
581 |   test("handles array value for size prop", async ({ initTestBed, createIconDriver }) => {
582 |     await initTestBed(`<Icon testId="icon" name="home" size="{[]}" />`);
583 | 
584 |     const icon = await createIconDriver("icon");
585 |     const isVisible = await icon.svgIcon.isVisible();
586 | 
587 |     if (isVisible) {
588 |       await expect(icon.svgIcon).toBeVisible();
589 |     } else {
590 |       expect(isVisible).toBe(false);
591 |     }
592 |   });
593 | 
594 |   test("handles very long Unicode string in fallback", async ({ initTestBed, createIconDriver }) => {
595 |     const longUnicodeString = "👨‍👩‍👧‍👦".repeat(100);
596 |     await initTestBed(`<Icon testId="icon" name="home" fallback="${longUnicodeString}"/>`);
597 |     const icon = await createIconDriver("icon");
598 |     await expect(icon.svgIcon).toBeVisible(); // Icon renders with valid primary name, fallback ignored
599 |   });
600 | 
601 |   test("handles concurrent property changes", async ({ initTestBed, createIconDriver }) => {
602 |     await initTestBed(`<Icon testId="icon" name="home" size="sm"/>`);
603 |     const icon = await createIconDriver("icon");
604 |     await expect(icon.svgIcon).toBeVisible();
605 | 
606 |     // Test that initial state is correct
607 |     let computedStyle = await icon.svgIcon.evaluate((el) => {
608 |       const style = window.getComputedStyle(el);
609 |       return { width: style.width, height: style.height };
610 |     });
611 |     expect(computedStyle.width).toBe("16px"); // sm size
612 |   });
613 | 
614 |   test("handles rapid sequential clicks", async ({ initTestBed, createIconDriver }) => {
615 |     const { testStateDriver } = await initTestBed(`
616 |       <Icon testId="icon" name="home" onClick="testState = (testState || 0) + 1"/>
617 |     `);
618 | 
619 |     const iconDrv = await createIconDriver("icon");
620 |     const icon = iconDrv.svgIcon;
621 | 
622 |     // Rapid sequential clicks
623 |     await Promise.all([icon.click(), icon.click(), icon.click(), icon.click(), icon.click()]);
624 | 
625 |     // Should eventually reach 5 (all clicks processed)
626 |     await expect.poll(testStateDriver.testState).toEqual(5);
627 |   });
628 | });
629 | 
```

