This is page 38 of 143. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/main.tsx?format=md&lines=false&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   ├── config.json
│   └── cyan-tools-design.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
│   │           ├── FancyButton.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
    │   │   ├── 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

--------------------------------------------------------------------------------
/docs/content/components/xmlui-website-blocks/HeroSection.md:
--------------------------------------------------------------------------------

```markdown
# HeroSection [#herosection]

HeroSection

## Properties

### `backgroundTemplate`

The template for the background of the hero section

### `contentAlignment` (default: "center")

Horizontal alignment of the content within its area

### `contentPlacement` (default: "bottom")

Position of the content area relative to the header

### `contentWidth` (default: "$maxWidth-content")

Width of the hero content (header + content sections)

### `ctaButtonIcon`

The icon for the call-to-action button

### `ctaButtonTemplate`

The template for the call-to-action button

### `ctaButtonText`

The text for the call-to-action button

### `fullWidthBackground` (default: true)

Whether the background should span the full width of the viewport

### `gap`

Gap between header and content sections

### `headerAlignment` (default: "center")

Alignment of the header content

### `headerWidth` (default: "50%")

Width of the header section in horizontal layouts

### `headline`

The headline text for the hero section

### `image`

The image for the hero section

### `imageHeight`

The height of the image

### `imageWidth`

The width of the image

### `mainText`

The main text content for the hero section

### `mainTextTemplate`

The template for the text content in the hero section

### `preamble`

The preamble text for the hero section

### `subheadline`

The subheadline text for the hero section

## Events

### `ctaClick`

Triggered when the call-to-action button is clicked

## Exposed Methods

This component does not expose any methods.

## Parts

The component has some parts that can be styled through layout properties and theme variables separately:

- **`background`**: The background template area of the hero section
- **`content`**: The content section containing image and children
- **`ctaButton`**: The call-to-action button for the hero section
- **`header`**: The header section containing all text content and CTA button
- **`headingSection`**: The heading section containing preamble, headline, and subheadline
- **`headline`**: The headline text for the hero section
- **`image`**: The image for the hero section
- **`mainText`**: The main text content for the hero section
- **`preamble`**: The preamble text for the hero section
- **`subheadline`**: The subheadline text for the hero section

## Styling

### Theme Variables

| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-headline-HeroSection | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-subheadline-HeroSection | *none* | *none* |
| [direction](../styles-and-themes/layout-props#direction)-headline-HeroSection | *none* | *none* |
| [direction](../styles-and-themes/layout-props#direction)-subheadline-HeroSection | *none* | *none* |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-headline-HeroSection | *none* | *none* |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-subheadline-HeroSection | *none* | *none* |
| [fontSize](../styles-and-themes/common-units/#size)-headline-HeroSection | 3em | 3em |
| [fontSize](../styles-and-themes/common-units/#size)-mainText-HeroSection | 1.4em | 1.4em |
| [fontSize](../styles-and-themes/common-units/#size)-subheadline-HeroSection | 2em | 2em |
| [fontStretch](../styles-and-themes/common-units/#fontStretch)-headline-HeroSection | *none* | *none* |
| [fontStretch](../styles-and-themes/common-units/#fontStretch)-subheadline-HeroSection | *none* | *none* |
| [fontStyle](../styles-and-themes/common-units/#fontStyle)-headline-HeroSection | *none* | *none* |
| [fontStyle](../styles-and-themes/common-units/#fontStyle)-subheadline-HeroSection | *none* | *none* |
| [fontVariant](../styles-and-themes/common-units/#font-variant)-headline-HeroSection | *none* | *none* |
| [fontVariant](../styles-and-themes/common-units/#font-variant)-subheadline-HeroSection | *none* | *none* |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-headline-HeroSection | $fontWeight-bold | $fontWeight-bold |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-subheadline-HeroSection | $fontWeight-bold | $fontWeight-bold |
| [gap](../styles-and-themes/common-units/#size)-headline-HeroSection | $space-8 | $space-8 |
| [gap](../styles-and-themes/common-units/#size)-mainText-HeroSection | $space-4 | $space-4 |
| [gap](../styles-and-themes/common-units/#size)-preamble-HeroSection | *none* | *none* |
| [gap](../styles-and-themes/common-units/#size)-subheadline-HeroSection | $space-4 | $space-4 |
| [letterSpacing](../styles-and-themes/common-units/#size)-headline-HeroSection | *none* | *none* |
| [letterSpacing](../styles-and-themes/common-units/#size)-subheadline-HeroSection | *none* | *none* |
| [lineBreak](../styles-and-themes/common-units/#line-break)-headline-HeroSection | *none* | *none* |
| [lineBreak](../styles-and-themes/common-units/#line-break)-subheadline-HeroSection | *none* | *none* |
| [lineHeight](../styles-and-themes/common-units/#size)-headline-HeroSection | 1.4em | 1.4em |
| [lineHeight](../styles-and-themes/common-units/#size)-mainText-HeroSection | 1.1em | 1.1em |
| [lineHeight](../styles-and-themes/common-units/#size)-subheadline-HeroSection | 1.1em | 1.1em |
| [maxWidth-content](../styles-and-themes/common-units/#size) | *none* | *none* |
| [padding](../styles-and-themes/common-units/#size)-HeroSection | *none* | *none* |
| [paddingBottom](../styles-and-themes/common-units/#size)-HeroSection | $space-12 | $space-12 |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-HeroSection | $space-12 | $space-12 |
| [paddingLeft](../styles-and-themes/common-units/#size)-HeroSection | *none* | *none* |
| [paddingRight](../styles-and-themes/common-units/#size)-HeroSection | *none* | *none* |
| [paddingTop](../styles-and-themes/common-units/#size)-HeroSection | $space-12 | $space-12 |
| [paddingVertical](../styles-and-themes/common-units/#size)-HeroSection | *none* | *none* |
| [textAlign](../styles-and-themes/common-units/#text-align)-headline-HeroSection | *none* | *none* |
| [textAlign](../styles-and-themes/common-units/#text-align)-subheadline-HeroSection | *none* | *none* |
| [textAlignLast](../styles-and-themes/common-units/#text-align)-headline-HeroSection | *none* | *none* |
| [textAlignLast](../styles-and-themes/common-units/#text-align)-subheadline-HeroSection | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-headline-HeroSection | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-subheadline-HeroSection | *none* | *none* |
| [textDecorationColor](../styles-and-themes/common-units/#color)-headline-HeroSection | *none* | *none* |
| [textDecorationColor](../styles-and-themes/common-units/#color)-subheadline-HeroSection | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-headline-HeroSection | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-subheadline-HeroSection | *none* | *none* |
| [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-headline-HeroSection | *none* | *none* |
| [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-subheadline-HeroSection | *none* | *none* |
| [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-headline-HeroSection | *none* | *none* |
| [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-subheadline-HeroSection | *none* | *none* |
| [textIndent](../styles-and-themes/common-units/#text-indent)-headline-HeroSection | *none* | *none* |
| [textIndent](../styles-and-themes/common-units/#text-indent)-subheadline-HeroSection | *none* | *none* |
| [textShadow](../styles-and-themes/common-units/#text-shadow)-headline-HeroSection | *none* | *none* |
| [textShadow](../styles-and-themes/common-units/#text-shadow)-subheadline-HeroSection | *none* | *none* |
| [textTransform](../styles-and-themes/common-units/#textTransform)-headline-HeroSection | *none* | *none* |
| [textTransform](../styles-and-themes/common-units/#textTransform)-subheadline-HeroSection | *none* | *none* |
| [textUnderlineOffset](../styles-and-themes/common-units/#size)-headline-HeroSection | *none* | *none* |
| [textUnderlineOffset](../styles-and-themes/common-units/#size)-subheadline-HeroSection | *none* | *none* |
| [wordBreak](../styles-and-themes/common-units/#word-break)-headline-HeroSection | *none* | *none* |
| [wordBreak](../styles-and-themes/common-units/#word-break)-subheadline-HeroSection | *none* | *none* |
| [wordSpacing](../styles-and-themes/common-units/#word-spacing)-headline-HeroSection | *none* | *none* |
| [wordSpacing](../styles-and-themes/common-units/#word-spacing)-subheadline-HeroSection | *none* | *none* |
| [wordWrap](../styles-and-themes/common-units/#word-wrap)-headline-HeroSection | *none* | *none* |
| [wordWrap](../styles-and-themes/common-units/#word-wrap)-subheadline-HeroSection | *none* | *none* |
| [writingMode](../styles-and-themes/common-units/#writing-mode)-headline-HeroSection | *none* | *none* |
| [writingMode](../styles-and-themes/common-units/#writing-mode)-subheadline-HeroSection | *none* | *none* |

```

--------------------------------------------------------------------------------
/xmlui/src/components/Button/Button.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./Button.module.scss";

import {
  buttonThemeMd,
  alignmentOptionMd,
  sizeMd,
  buttonVariantMd,
  buttonTypesMd,
  iconPositionMd,
} from "../abstractions";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import {
  createMetadata,
  dClick,
  dGotFocus,
  dLostFocus,
  dOrientation,
} from "../../components/metadata-helpers";
import { Icon } from "../Icon/IconNative";
import { Button, defaultProps } from "./ButtonNative";
import { hasRenderableChildren } from "../../components-core/rendering/nodeUtils";

const COMP = "Button";

export const ButtonMd = createMetadata({
  status: "stable",
  description:
    "`Button` is the primary interactive component for triggering actions like " +
    "form submissions, navigation, opening modals, and API calls. It supports " +
    "multiple visual styles and sizes to match different UI contexts and importance levels.",
  props: {
    autoFocus: {
      description: "Indicates if the button should receive focus when the page loads.",
      isRequired: false,
      type: "boolean",
      defaultValue: defaultProps.autoFocus,
    },
    variant: {
      description: "The button variant determines the level of emphasis the button should possess.",
      isRequired: false,
      type: "string",
      availableValues: buttonVariantMd,
      defaultValue: defaultProps.variant,
    },
    themeColor: {
      description: "Sets the button color scheme defined in the application theme.",
      isRequired: false,
      type: "string",
      availableValues: buttonThemeMd,
      defaultValue: defaultProps.themeColor,
    },
    size: {
      description: "Sets the size of the button.",
      isRequired: false,
      type: "string",
      availableValues: sizeMd,
      defaultValue: defaultProps.size,
    },
    label: {
      description:
        `This property is an optional string to set a label for the ${COMP}. If no label is ` +
        `specified and an icon is set, the ${COMP} will modify its styling to look like a ` +
        `small icon button. When the ${COMP} has nested children, it will display them and ` +
        `ignore the value of the \`label\` prop.`,
      type: "string",
    },
    type: {
      description:
        `This optional string describes how the ${COMP} appears in an HTML context. You ` +
        `rarely need to set this property explicitly.`,
      availableValues: buttonTypesMd,
      valueType: "string",
      defaultValue: defaultProps.type,
    },
    enabled: {
      description:
        `The value of this property indicates whether the button accepts actions (\`true\`) ` +
        `or does not react to them (\`false\`).`,
      type: "boolean",
      defaultValue: true,
    },
    orientation: dOrientation(defaultProps.orientation),
    icon: {
      description:
        `This string value denotes an icon name. The framework will render an icon if XMLUI ` +
        `recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP} ` +
        `displays only that icon.`,
      type: "string",
    },
    iconPosition: {
      description: `This optional string determines the location of the icon in the ${COMP}.`,
      availableValues: iconPositionMd,
      type: "string",
      defaultValue: defaultProps.iconPosition,
    },
    contentPosition: {
      description:
        `This optional value determines how the label and icon (or nested children) should be placed` +
        `inside the ${COMP} component.`,
      availableValues: alignmentOptionMd,
      type: "string",
      defaultValue: defaultProps.contentPosition,
    },
    contextualLabel: {
      description: `This optional value is used to provide an accessible name for the ${COMP} in the context of its usage.`,
      type: "string",
    },
  },
  events: {
    click: dClick(COMP),
    gotFocus: dGotFocus(COMP),
    lostFocus: dLostFocus(COMP),
  },
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    // --- Default styles for supporting "variant" behavior
    [`padding-${COMP}`]: "$space-2 $space-4",
    [`gap-${COMP}`]: "$space-2",
    [`borderColor-${COMP}`]: "transparent",
    [`backgroundColor-${COMP}`]: "transparent",
    [`transition-${COMP}`]: "color 0.2s, background 0.2s",

    [`width-${COMP}`]: "fit-content",
    [`height-${COMP}`]: "fit-content",
    [`borderRadius-${COMP}`]: "$borderRadius",
    [`fontSize-${COMP}`]: "$fontSize-sm",
    [`fontWeight-${COMP}`]: "$fontWeight-medium",
    [`fontStyle-${COMP}`]: "$fontStyle-normal",
    [`backgroundColor-${COMP}-primary`]: "$color-primary-500",
    [`backgroundColor-${COMP}-attention`]: "$backgroundColor-attention",
    [`borderColor-${COMP}-attention`]: "$color-attention",
    [`backgroundColor-${COMP}--disabled`]: "$backgroundColor--disabled",
    [`borderColor-${COMP}--disabled`]: "$borderColor--disabled",
    [`borderStyle-${COMP}`]: "solid",
    [`textColor-${COMP}--disabled`]: "$textColor--disabled",
    [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
    [`borderWidth-${COMP}`]: "1px",
    [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
    [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
    [`outlineOffset-${COMP}--focus`]: "$outlineOffset--focus",
    [`paddingHorizontal-${COMP}-xs`]: "$space-1",
    [`paddingVertical-${COMP}-xs`]: "$space-0_5",
    [`paddingHorizontal-${COMP}-sm`]: "$space-4",
    [`paddingVertical-${COMP}-sm`]: "$space-2",
    [`paddingHorizontal-${COMP}-md`]: "$space-4",
    [`paddingVertical-${COMP}-md`]: "$space-3",
    [`paddingHorizontal-${COMP}-lg`]: "$space-5",
    [`paddingVertical-${COMP}-lg`]: "$space-4",

    [`textColor-${COMP}`]: "$color-surface-950",
    [`textColor-${COMP}-solid`]: "$const-color-surface-50",
    [`borderColor-${COMP}-primary`]: "$color-primary-500",
    [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-400",
    [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
    [`backgroundColor-${COMP}-primary-outlined--hover`]: "$color-primary-50",
    [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-100",
    [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
    [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
    [`textColor-${COMP}-primary-outlined`]: "$color-primary-900",
    [`textColor-${COMP}-primary-outlined--hover`]: "$color-primary-950",
    [`textColor-${COMP}-primary-outlined--active`]: "$color-primary-900",
    [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-50",
    [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-100",
    [`borderColor-${COMP}-secondary`]: "$color-secondary-100",
    [`backgroundColor-${COMP}-secondary`]: "$color-secondary-500",
    [`backgroundColor-${COMP}-secondary--hover`]: "$color-secondary-400",
    [`backgroundColor-${COMP}-secondary--active`]: "$color-secondary-500",
    [`backgroundColor-${COMP}-secondary-outlined--hover`]: "$color-secondary-50",
    [`backgroundColor-${COMP}-secondary-outlined--active`]: "$color-secondary-100",
    [`backgroundColor-${COMP}-secondary-ghost--hover`]: "$color-secondary-100",
    [`backgroundColor-${COMP}-secondary-ghost--active`]: "$color-secondary-100",
    [`backgroundColor-${COMP}-attention--hover`]: "$color-danger-400",
    [`backgroundColor-${COMP}-attention--active`]: "$color-danger-500",
    [`backgroundColor-${COMP}-attention-outlined--hover`]: "$color-danger-50",
    [`backgroundColor-${COMP}-attention-outlined--active`]: "$color-danger-100",
    [`backgroundColor-${COMP}-attention-ghost--hover`]: "$color-danger-50",
    [`backgroundColor-${COMP}-attention-ghost--active`]: "$color-danger-100",
  },
});

export const buttonComponentRenderer = createComponentRenderer(
  "Button",
  ButtonMd,
  ({ node, extractValue, renderChild, lookupEventHandler, className }) => {
    const iconName = extractValue.asString(node.props.icon);
    const label = extractValue.asDisplayText(node.props.label);
    const renderedChildren = hasRenderableChildren(node.children)
      ? renderChild(node.children, { type: "Stack", orientation: "horizontal" })
      : label;
    return (
      <Button
        type={extractValue.asOptionalString(node.props.type)}
        variant={extractValue.asOptionalString(node.props.variant)}
        themeColor={extractValue.asOptionalString(node.props.themeColor)}
        autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
        size={extractValue.asOptionalString(node.props.size)}
        icon={iconName && <Icon name={iconName} aria-hidden />}
        iconPosition={extractValue.asOptionalString(node.props.iconPosition)}
        orientation={extractValue.asOptionalString(node.props.orientation)}
        contentPosition={extractValue.asOptionalString(node.props.contentPosition)}
        disabled={!extractValue.asOptionalBoolean(node.props.enabled, true)}
        onClick={lookupEventHandler("click")}
        onFocus={lookupEventHandler("gotFocus")}
        onBlur={lookupEventHandler("lostFocus")}
        className={className}
        contextualLabel={extractValue.asOptionalString(node.props.contextualLabel)}
      >
        {renderedChildren}
      </Button>
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/src/components/Tabs/TabsNative.tsx:
--------------------------------------------------------------------------------

```typescript
import type { ForwardedRef } from "react";
import {
  type CSSProperties,
  forwardRef,
  type ReactNode,
  useEffect,
  useId,
  useMemo,
  useState,
} from "react";
import {
  Root as RTabsRoot,
  List as RTabsList,
  Trigger as RTabsTrigger,
} from "@radix-ui/react-tabs";

import styles from "./Tabs.module.scss";

import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";
import { useEvent } from "../../components-core/utils/misc";
import { TabContext, useTabContextValue } from "./TabContext";
import classnames from "classnames";
import { noop } from "../../components-core/constants";

type Props = {
  id?: string;
  activeTab?: number;
  orientation?: "horizontal" | "vertical";
  tabAlignment?: "start" | "end" | "center" | "stretch";
  accordionView?: boolean;
  headerRenderer?: (item: {
    id?: string;
    index: number;
    label: string;
    isActive: boolean;
  }) => ReactNode;
  style?: CSSProperties;
  children?: ReactNode;
  registerComponentApi?: RegisterComponentApiFn;
  className?: string;
  distributeEvenly?: boolean;
  onDidChange?: (index: number, id: string, label: string) => void;
};

export const defaultProps = {
  activeTab: 0,
  orientation: "horizontal" as "horizontal" | "vertical",
  tabAlignment: "start" as "start" | "end" | "center" | "stretch",
  accordionView: false,
  distributeEvenly: false,
};

export const Tabs = forwardRef(function Tabs(
  {
    activeTab = defaultProps.activeTab,
    orientation = defaultProps.orientation,
    tabAlignment = defaultProps.tabAlignment,
    accordionView = defaultProps.accordionView,
    headerRenderer,
    style,
    children,
    id,
    registerComponentApi,
    className,
    distributeEvenly = defaultProps.distributeEvenly,
    onDidChange = noop,
    ...rest
  }: Props,
  forwardedRef: ForwardedRef<HTMLDivElement>,
) {
  const { tabItems, tabContextValue } = useTabContextValue();
  const _id = useId();
  const tabsId = id || _id;

  // Ensure activeTab is within valid bounds
  const validActiveTab = useMemo(() => {
    if (tabItems.length === 0) return 0;
    if (activeTab < 0) return 0;
    if (activeTab >= tabItems.length) return 0; // Default to first tab if out of bounds
    return activeTab;
  }, [activeTab, tabItems.length]);

  const [activeIndex, setActiveIndex] = useState(validActiveTab);
  const currentTab = useMemo(() => {
    return tabItems[activeIndex]?.innerId;
  }, [activeIndex, tabItems]);

  useEffect(() => {
    tabContextValue.setActiveTabId(currentTab);
  }, [currentTab, tabContextValue]);

  useEffect(() => {
    if (activeTab !== undefined) {
      setActiveIndex(() => {
        const maxIndex = tabItems.length - 1;
        const newIndex = activeTab; // activeTab should be 0-based index
        return newIndex < 0 ? 0 : newIndex > maxIndex ? 0 : newIndex; // Default to first tab (0) when out of bounds
      });
    }
  }, [activeTab, tabItems.length]);

  const next = useEvent(() => {
    setActiveIndex((prevIndex) => {
      const maxIndex = tabItems.length - 1;
      return prevIndex >= maxIndex ? 0 : prevIndex + 1;
    });
  });

  const prev = useEvent(() => {
    setActiveIndex((prevIndex) => {
      const maxIndex = tabItems.length - 1;
      return prevIndex <= 0 ? maxIndex : prevIndex - 1;
    });
  });

  const setActiveTabIndex = useEvent((index: number) => {
    if (index >= 0 && index < tabItems.length) {
      setActiveIndex(index);
    }
  });

  const setActiveTabById = useEvent((tabId: string) => {
    // First try to find by external id, then by innerId
    let index = tabItems.findIndex((item) => item.id === tabId);
    if (index === -1) {
      index = tabItems.findIndex((item) => item.innerId === tabId);
    }
    if (index !== -1) {
      setActiveIndex(index);
    }
  });

  useEffect(() => {
    registerComponentApi?.({
      next,
      prev,
      setActiveTabIndex,
      setActiveTabById,
    });
  }, [next, prev, setActiveTabIndex, setActiveTabById, registerComponentApi]);

  // Accordion view: render tabs with interleaved headers and content
  if (accordionView) {
    return (
      <TabContext.Provider value={tabContextValue}>
        <div
          {...rest}
          id={tabsId}
          ref={forwardedRef}
          className={classnames(className, styles.tabs, styles.accordionView)}
          style={style}
        >
          <RTabsRoot
            value={`${currentTab}`}
            onValueChange={(tab) => {
              const tabItem = tabItems.find((item) => item.innerId === tab);
              const newIndex = tabItems.findIndex((item) => item.innerId === tab);
              if (newIndex !== activeIndex) {
                tabContextValue.setActiveTabId(tab);
                setActiveIndex(newIndex);
                onDidChange?.(newIndex, tabItem.id || tabItem.innerId, tabItem?.label);
              }
            }}
            orientation="vertical"
            className={styles.accordionRoot}
          >
            <div className={styles.accordionInterleaved}>
              <RTabsList className={styles.accordionList}>
                {tabItems.map((tab, index) => (
                  <RTabsTrigger 
                    key={tab.innerId} 
                    value={tab.innerId} 
                    asChild
                    style={{ order: index * 2 }}
                  >
                    <div
                      role="tab"
                      aria-label={tab.label}
                      className={classnames(styles.tabTrigger, styles.accordionTrigger)}
                    >
                      {tab.headerRenderer
                        ? tab.headerRenderer({
                            ...(tab.id !== undefined && { id: tab.id }),
                            index,
                            label: tab.label,
                            isActive: tab.innerId === currentTab,
                          })
                        : headerRenderer
                          ? headerRenderer({
                              ...(tab.id !== undefined && { id: tab.id }),
                              index,
                              label: tab.label,
                              isActive: tab.innerId === currentTab,
                            })
                          : tab.label}
                    </div>
                  </RTabsTrigger>
                ))}
              </RTabsList>
              {children}
            </div>
          </RTabsRoot>
        </div>
      </TabContext.Provider>
    );
  }

  // Standard tabs view
  return (
    <TabContext.Provider value={tabContextValue}>
      <RTabsRoot
        {...rest}
        id={tabsId}
        ref={forwardedRef}
        className={classnames(className, styles.tabs)}
        value={`${currentTab}`}
        onValueChange={(tab) => {
          const tabItem = tabItems.find((item) => item.innerId === tab);
          const newIndex = tabItems.findIndex((item) => item.innerId === tab);
          if (newIndex !== activeIndex) {
            tabContextValue.setActiveTabId(tab);
            setActiveIndex(newIndex);
            onDidChange?.(newIndex, tabItem.id || tabItem.innerId, tabItem?.label);
          }
        }}
        orientation={orientation}
        style={style}
      >
        <RTabsList
          className={classnames(styles.tabsList, {
            [styles.alignStart]: tabAlignment === "start",
            [styles.alignEnd]: tabAlignment === "end",
            [styles.alignCenter]: tabAlignment === "center",
            [styles.alignStretch]: tabAlignment === "stretch",
          })}
          role="tablist"
        >
          {!distributeEvenly && !headerRenderer && tabAlignment === "end" && (
            <div className={styles.filler} data-orientation={orientation} />
          )}
          {!distributeEvenly && !headerRenderer && tabAlignment === "center" && (
            <div className={styles.filler} data-orientation={orientation} />
          )}
          {tabItems.map((tab, index) => (
            <RTabsTrigger key={tab.innerId} value={tab.innerId} asChild>
              <div
                role="tab"
                aria-label={tab.label}
                className={classnames(styles.tabTrigger, {
                  [styles.distributeEvenly]: distributeEvenly || tabAlignment === "stretch",
                })}
              >
                {tab.headerRenderer
                  ? tab.headerRenderer({
                      ...(tab.id !== undefined && { id: tab.id }),
                      index,
                      label: tab.label,
                      isActive: tab.innerId === currentTab,
                    })
                  : headerRenderer
                    ? headerRenderer({
                        ...(tab.id !== undefined && { id: tab.id }),
                        index,
                        label: tab.label,
                        isActive: tab.innerId === currentTab,
                      })
                    : tab.label}
              </div>
            </RTabsTrigger>
          ))}
          {!distributeEvenly && !headerRenderer && tabAlignment !== "stretch" && (tabAlignment === "start" || tabAlignment === "center") && (
            <div className={styles.filler} data-orientation={orientation} />
          )}
        </RTabsList>
        {children}
      </RTabsRoot>
    </TabContext.Provider>
  );
});

```

--------------------------------------------------------------------------------
/xmlui/tests/language-server/completion.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it } from "vitest";
import {
  handleCompletion,
  handleCompletionResolve,
} from "../../src/language-server/services/completion";
import { mockMetadata, mockMetadataProvider } from "./mockData";
import type { CompletionItem, MarkupContent } from "vscode-languageserver";
import { CompletionItemKind } from "vscode-languageserver";
import { layoutOptionKeys } from "../../src/components-core/descriptorHelper";
import { capitalizeFirstLetter } from "../../src/components-core/utils/misc";
import { createXmlUiParser } from "../../src/parsers/xmlui-parser";
import { createDocumentCursor } from "../../src/components-core/xmlui-parser";

describe("Completion", () => {
  it("lists all component names after '<'", () => {
    const suggestions = completeAtPoundSign("<#").map(({ label }) => label);
    const expected = Object.keys(mockMetadata);

    expectToContainExactly(suggestions, expected);
  });

  it("lists all attribute names inside attribute key", () => {
    const attrNames = completeAtPoundSign("<Button a#b />").map(({ label }) => label);
    expectToContainExactly(attrNames, allButtonProps);
  });

  it("lists all attribute names after last attribute key", () => {
    const attrNames = completeAtPoundSign("<Button ab# />").map(({ label }) => label);
    expectToContainExactly(attrNames, allButtonProps);
  });

  it("lists all attribute names after component name", () => {
    const attrNames = completeAtPoundSign("<Button #/>").map(({ label }) => label);
    expectToContainExactly(attrNames, allButtonProps);
  });

  it("lists all attribute names after attribute", () => {
    const attrNames = completeAtPoundSign('<Button label="hi" #/>').map(({ label }) => label);
    expectToContainExactly(attrNames, allButtonProps);
  });

  it("list only matching closing tag name", () => {
    const completionLabels = completeAtPoundSign("<Button>ha</#>").map(({ label }) => label);
    expectToContainExactly(completionLabels, ["Button"]);
  });

  it("list all attribute names with missing '>' token", () => {
    const attrNames = completeAtPoundSign("<Button #</Button>").map(({ label }) => label);
    expectToContainExactly(attrNames, allButtonProps);
  });

  it("list all attribute names between tag name and eof", () => {
    const attrNames = completeAtPoundSign("<Button #").map(({ label }) => label);
    expectToContainExactly(attrNames, allButtonProps);
  });

  it("don't list anything after matching closing tag name", { todo: true }, () => {
    const completionLabels = completeAtPoundSign("<Button>ha</Button #>").map(({ label }) => label);
    expect(completionLabels).toBeNull();
  });

  it("resolves component name", () => {
    const item = completeAtPoundSign("<Butto# />").find(({ label }) => label === "Button");
    const resolvedItem = handleCompletionResolve({ item, metaByComp: mockMetadataProvider });
    const docs = (resolvedItem.documentation as MarkupContent).value;

    const expected: CompletionItem = { label: "Button", kind: CompletionItemKind.Constructor };

    expect(resolvedItem).toMatchObject(expected);
    expect(docs).toContain(mockMetadata.Button.description);
    expect(docs).toContain(mockMetadata.Button.events.click.description);
    expect(docs).toContain(mockMetadata.Button.props.label.description);
  });

  it("resolves closing component name", () => {
    const item = completeAtPoundSign("<Button><#").find(({ label }) => label === "/Button");
    const resolvedItem = handleCompletionResolve({ item, metaByComp: mockMetadataProvider });
    const docs = (resolvedItem.documentation as MarkupContent).value;

    expect(docs).toContain(mockMetadata.Button.description);
    expect(docs).toContain(mockMetadata.Button.events.click.description);
    expect(docs).toContain(mockMetadata.Button.props.label.description);
  });

  it("resolves prop", () => {
    const item = completeAtPoundSign("<Button labe#l />").find(({ label }) => label === "label");
    const resolvedItem = handleCompletionResolve({ item, metaByComp: mockMetadataProvider });
    const docs = (resolvedItem.documentation as MarkupContent).value;

    const expected: CompletionItem = { label: "label", kind: CompletionItemKind.Property };

    expect(resolvedItem).toMatchObject(expected);
    expect(docs).toContain(mockMetadata.Button.props.label.description);
  });

  it("resolves event", () => {
    const item = completeAtPoundSign("<Button onClic#k />").find(
      ({ label }) => label === "onClick",
    );
    const resolvedItem = handleCompletionResolve({ item, metaByComp: mockMetadataProvider });
    const docs = (resolvedItem.documentation as MarkupContent).value;

    const expected: CompletionItem = { label: "onClick", kind: CompletionItemKind.Event };

    expect(resolvedItem).toMatchObject(expected);
    expect(docs).toContain(mockMetadata.Button.events.click.description);
  });

  it("resolves implicit prop", () => {
    const item = completeAtPoundSign("<Button dat#a />").find(({ label }) => label === "data");
    const resolvedItem = handleCompletionResolve({ item, metaByComp: mockMetadataProvider });
    const docs = (resolvedItem.documentation as MarkupContent).value;
    const dataDescription = mockMetadataProvider.getComponent("Button").getAttr("data").description;

    const expected: CompletionItem = { label: "data", kind: CompletionItemKind.Property };

    expect(resolvedItem).toMatchObject(expected);
    expect(docs).toContain(dataDescription);
  });

  it("resolves layout prop", () => {
    const item = completeAtPoundSign("<Button widt#h />").find(({ label }) => label === "width");
    const resolvedItem = handleCompletionResolve({ item, metaByComp: mockMetadataProvider });
    const docs = (resolvedItem.documentation as MarkupContent).value;
    const widthDescription = mockMetadataProvider
      .getComponent("Button")
      .getAttr("width").description;

    const expected: CompletionItem = { label: "width", kind: CompletionItemKind.Unit };

    expect(resolvedItem).toMatchObject(expected);
    expect(docs).toContain(widthDescription);
  });

  it("closing element 1st after opening tag & element creation", () => {
    const suggestions = completeAtPoundSign("<Button><#").map(({ label }) => label);
    expect(suggestions).toStrictEqual(["/Button", ...Object.keys(mockMetadata)]);
  });

  it("closing element 1st after opening tag & element creation, cursor not at end", () => {
    const suggestions = completeAtPoundSign("<Button><#A").map(({ label }) => label);
    expect(suggestions).toStrictEqual(["/Button", ...Object.keys(mockMetadata)]);
  });

  it("closing element 1st after opening tag & element creation, malformed attr", () => {
    const suggestions = completeAtPoundSign("<Button attr=><#").map(({ label }) => label);
    expect(suggestions).toStrictEqual(["/Button", ...Object.keys(mockMetadata)]);
  });

  it("closing element 1st after opening tag & element creation, malformed attr list", () => {
    const suggestions = completeAtPoundSign("<Button attr=' :><#").map(({ label }) => label);
    expect(suggestions).toStrictEqual(["/Button", ...Object.keys(mockMetadata)]);
  });

  it("suggest all components if no identifier provided", () => {
    const suggestions = completeAtPoundSign("<><#").map(({ label }) => label);
    expect(suggestions).toStrictEqual(Object.keys(mockMetadata));
  });

  it("places closing tag after accepting code completion of opened component", () => {
    const item = completeAtPoundSign("<Button><#").find(({ label }) => label === "/Button");

    const expected: CompletionItem = {
      kind: CompletionItemKind.Constructor,
      data: { metadataAccessInfo: { componentName: "Button" } },
      label: "/Button",
      textEdit: {
        newText: "/Button>",
        range: {
          start: { line: 0, character: "<Button><".length },
          end: { line: 0, character: "<Button><".length },
        },
      },
    };

    expect(item).toMatchObject(expected);
  });

  it("don't suggest closing tag if completion item is not the one that has an opened tag", () => {
    const items = completeAtPoundSign("<Button><#").filter(({ label }) => label !== "/Button");
    for (const item of items) {
      expect(item.textEdit).toBeUndefined();
    }
  });
});

function completeAtPoundSign(source: string) {
  const cursorIndicator = "#";
  const position = source.indexOf(cursorIndicator);
  if (position === -1) {
    throw new Error(
      `No '${cursorIndicator}' found in the tested source to denote the position of the cursor.`,
    );
  }
  source = source.replace(cursorIndicator, "");
  const parser = createXmlUiParser(source);

  return handleCompletion(
    {
      getText: parser.getText,
      parseResult: parser.parse(),
      metaByComp: mockMetadataProvider,
      offsetToPos: createDocumentCursor(source).offsetToPos,
    },
    position,
  );
}

function expectToContainExactly<T>(actual: T[], expected: T[]) {
  expect(actual).toHaveLength(expected.length);
  expect(new Set(actual)).toEqual(new Set(expected));
}

const allButtonProps = Object.keys(mockMetadata.Button.props);
allButtonProps.push(
  ...Object.keys(mockMetadata.Button.events).map((key) => "on" + capitalizeFirstLetter(key)),
);
allButtonProps.push("inspect");
allButtonProps.push("data");
allButtonProps.push("when");
allButtonProps.push(...layoutOptionKeys);

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/interception/ApiInterceptor.ts:
--------------------------------------------------------------------------------

```typescript
import { delay, HttpResponse, matchRequestUrl } from "msw";
import type { PathParams, StrictRequest } from "msw";
import { isObject } from "lodash-es";

import { Backend, CookieService, HeaderService } from "../interception/Backend";
import { IndexedDb } from "../interception/IndexedDb";
import { convertRequestParamPart } from "../utils/request-params";
import { HttpError, HttpStatusCode } from "../interception/Errors";
import { ThrowStatementError } from "../EngineError";
import { InMemoryDb } from "../interception/InMemoryDb";
import type {
  ApiInterceptorDefinition,
  AuthDefinition,
  IDatabase,
  InterceptorOperationDef,
  RequestParams,
} from "./abstractions";

function mergeHeaders(...sources: HeadersInit[]) {
  const result: Record<string, string> = {};

  for (const source of sources) {
    if (!isObject(source)) {
      throw new TypeError("All arguments must be of type object");
    }

    const headers: Headers = new Headers(source);

    for (const [key, value] of headers.entries()) {
      if (value === undefined || value === "undefined") {
        delete result[key];
      } else {
        result[key] = value;
      }
    }
  }

  return new Headers(result);
}

// Represents the authentication service used within an API interceptor
export class AuthService {
  private loggedInUser: any;

  constructor(auth?: AuthDefinition) {
    const cachedLoggedInUser = JSON.parse(sessionStorage.getItem("session-logged-in-user") as any);
    this.loggedInUser = cachedLoggedInUser || auth?.defaultLoggedInUser;
  }

  login(newLoggedInUser: any) {
    this.loggedInUser = newLoggedInUser;
    sessionStorage.setItem("session-logged-in-user", JSON.stringify(newLoggedInUser));
  }

  logout() {
    this.loggedInUser = null;
    sessionStorage.removeItem("session-logged-in-user");
  }

  getCookieToken() {
    return sessionStorage.getItem("session-anonymous-token");
  }

  setCookieToken(token: string) {
    sessionStorage.setItem("session-anonymous-token", token);
  }

  getLoggedInUser() {
    return this.loggedInUser;
  }
}

async function initDb(apiDef: ApiInterceptorDefinition) {
  switch (apiDef.type) {
    case "in-memory":
      return new InMemoryDb(apiDef.schemaDescriptor?.tables, apiDef.initialData, apiDef.config);
    default:
      const indexedDb = new IndexedDb(
        apiDef.schemaDescriptor?.tables,
        apiDef.initialData,
        apiDef.config,
      );
      await indexedDb.initialize();
      return indexedDb;
  }
}

// An API interceptor implementation
export class ApiInterceptor {
  private backend: Backend | null = null;
  // public id = crypto.randomUUID();

  constructor(private readonly apiDef: ApiInterceptorDefinition) {}

  public async initialize() {
    // --- Transfer the handlers of API operations to the backend implementation
    const backendOperations: Record<string, string> = {};
    Object.entries(this.apiDef.operations || {}).forEach(([key, value]) => {
      backendOperations[key] = value.handler;
    });
    const db: IDatabase = await initDb(this.apiDef);
    const authService = new AuthService(this.apiDef.auth);
    const definition = {
      operations: backendOperations,
      initialize: this.apiDef.initialize,
      helpers: this.apiDef.helpers,
    };
    this.backend = new Backend(definition, db, authService);
  }

  public getOperations() {
    return this.apiDef.operations || {};
  }

  public getApiUrl() {
    return this.apiDef.apiUrl || "";
  }

  // Use the "msw" package to execute the interceptor operation
  async executeOperation(
    operationId: string,
    req: StrictRequest<any> | null,
    cookies: Record<string, string | Array<string>>,
    params: PathParams<string>,
  ) {
    if (this.backend === null) {
      throw new Error("Interceptor not initialized");
    }
    const operation = this.apiDef.operations?.[operationId];
    if (!operation) {
      throw new Error(`Unknown API interceptor operation: ${operationId}`);
    }
    let reqBody;
    try {
      if (operation.requestShape === "formData") {
        const formData = await req.formData();
        const obj: any = {};
        for (const key of formData.keys()) {
          const all = formData.getAll(key);
          if (all.length === 1) {
            obj[key] = all[0];
          } else {
            obj[key] = all;
          }
        }
        reqBody = obj;
      } else if (operation.requestShape === "blob") {
        reqBody = await req.blob();
      } else {
        reqBody = await req.json();
      }
    } catch (e) {}
    // --- Map path parameters
    const mappedParams = this.convertRequestParams(
      {
        pathParams: params,
        queryParams: Object.fromEntries(new URL(req.url).searchParams),
        requestBody: reqBody,
        cookies: cookies,
        requestHeaders: Object.fromEntries(req.headers.entries()) || {},
      },
      operation,
    );

    //artificial delay for http requests
    if (this.apiDef.artificialDelay === undefined) {
      await delay("real");
    } else if (this.apiDef.artificialDelay !== 0) {
      await delay(this.apiDef.artificialDelay);
    }
    const cookieService = new CookieService();
    const headerService = new HeaderService();
    try {
      const ret = await this.backend.executeOperation(
        operationId,
        mappedParams,
        cookieService,
        headerService,
      );
      const emptyBody = ret === undefined || ret === null;
      const successStatusCode =
        operation.successStatusCode ?? (emptyBody ? HttpStatusCode.NoContent : HttpStatusCode.Ok);

      const headers = mergeHeaders(cookieService.getCookieHeader(), headerService.getHeaders());
      if (ret instanceof File) {
        headers.append("Content-type", ret.type);
        headers.append("Content-Length", ret.size + "");
        
        // Properly encode filename for Content-Disposition header
        // Use percent-encoding for non-ASCII characters in filename*
        const encodedFilename = encodeURIComponent(ret.name);
        headers.append("Content-Disposition", `attachment; filename*=UTF-8''${encodedFilename}`);
        return HttpResponse.arrayBuffer(await ret.arrayBuffer(), {
          headers: headers,
          status: successStatusCode,
        });
      }
      if (emptyBody) {
        return new HttpResponse(null, {
          headers: headers,
          status: successStatusCode,
        });
      }
      // console.log(operationId, ret)
      return HttpResponse.json(ret, {
        headers: headers,
        status: successStatusCode,
      });
    } catch (e) {
      console.error(e);
      if (e instanceof ThrowStatementError && e.errorObject instanceof HttpError) {
        return HttpResponse.json(e.errorObject.details, {
          headers: cookieService.getCookieHeader(),
          status: e.errorObject.status,
        });
      }
      return HttpResponse.json(
        { message: (e as Error)?.message },
        {
          headers: cookieService.getCookieHeader(),
          status: HttpStatusCode.InternalServerError,
        },
      );
    }
  }

  // Ensures that type path and query params are converted according to the operation definition
  private convertRequestParams(
    params: RequestParams,
    operation: InterceptorOperationDef,
  ): RequestParams {
    return {
      ...params,
      pathParams: convertRequestParamPart(params.pathParams, operation.pathParamTypes),
      queryParams: convertRequestParamPart(params.queryParams, operation.queryParamTypes),
    };
  }

  hasMockForRequest(url: string, options: RequestInit) {
    return this.getMockForRequest(url, options) !== undefined;
  }

  private getMockForRequest(url: string, options: RequestInit) {
    return Object.entries(this.getOperations()).find(([operationId, operationDef]) => {
      if (
        matchRequestUrl(
          new URL(url, window.location.href),
          `${this.getApiUrl()}${operationDef.url}`,
          `${window.location.href}`,
        ).matches &&
        (options.method || "get").toLowerCase() === operationDef.method.toLowerCase()
      ) {
        return true;
      }
      return false;
    });
  }

  executeMockedFetch(url: string, options: RequestInit) {
    const mockForRequest = this.getMockForRequest(url, options);
    if (!mockForRequest) {
      throw new Error(`No mock found for request: ${url} with options: ${JSON.stringify(options)}`);
    }
    const [operationId, operationDef] = mockForRequest;
    const match = matchRequestUrl(
      new URL(url, window.location.href),
      `${this.getApiUrl()}${operationDef.url}`,
      `${window.location.href}`,
    );
    return this.executeOperation(
      operationId,
      new Request(url, options),
      getCookiesAsObject(),
      match.params as PathParams,
    );
  }
}

function getCookiesAsObject() {
  // 1. Get the cookie string
  const cookieString = document.cookie;

  // 2. Handle the case of no cookies
  if (cookieString === "") {
    return {};
  }

  // 3. Split into individual "key=value" pairs
  const cookiePairs = cookieString.split("; ");

  // 4. Use reduce to build the final object
  const cookieObject = cookiePairs.reduce((acc, currentPair) => {
    const [key, value] = currentPair.split("=");
    // Decode the key and value to handle special characters
    acc[decodeURIComponent(key)] = decodeURIComponent(value);
    return acc;
  }, {});

  return cookieObject;
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/Slider/Slider.module.scss:
--------------------------------------------------------------------------------

```scss

@use "../../components-core/theming/themes" as t;

// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
  $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  @return t.getThemeVar($themeVars, $componentVariable);
}

$componentName: "Slider";

// Variables for default variant
$borderRadius-Slider--default: createThemeVar("Input:borderRadius-#{$componentName}--default");
$borderColor-Slider--default: createThemeVar("Input:borderColor-#{$componentName}--default");
$borderWidth-Slider--default: createThemeVar("Input:borderWidth-#{$componentName}--default");
$borderStyle-Slider--default: createThemeVar("Input:borderStyle-#{$componentName}--default");
$boxShadow-Slider--default: createThemeVar("Input:boxShadow-#{$componentName}--default");
$borderColor-Slider--default--hover: createThemeVar("Input:borderColor-#{$componentName}--default--hover");
$boxShadow-Slider--default--hover: createThemeVar("Input:boxShadow-#{$componentName}--default--hover");
$borderColor-Slider--default--focus: createThemeVar("Input:borderColor-#{$componentName}--default--focus");
$boxShadow-Slider--default--focus: createThemeVar("Input:boxShadow-#{$componentName}--default--focus");

// Variables for error variant
$borderRadius-Slider--error: createThemeVar("Input:borderRadius-#{$componentName}--error");
$borderColor-Slider--error: createThemeVar("Input:borderColor-#{$componentName}--error");
$borderWidth-Slider--error: createThemeVar("Input:borderWidth-#{$componentName}--error");
$borderStyle-Slider--error: createThemeVar("Input:borderStyle-#{$componentName}--error");
$boxShadow-Slider--error: createThemeVar("Input:boxShadow-#{$componentName}--error");
$borderColor-Slider--error--hover: createThemeVar("Input:borderColor-#{$componentName}--error--hover");
$boxShadow-Slider--error--hover: createThemeVar("Input:boxShadow-#{$componentName}--error--hover");
$borderColor-Slider--error--focus: createThemeVar("Input:borderColor-#{$componentName}--error--focus");
$boxShadow-Slider--error--focus: createThemeVar("Input:boxShadow-#{$componentName}--error--focus");

// Variables for warning variant
$borderRadius-Slider--warning: createThemeVar("Input:borderRadius-#{$componentName}--warning");
$borderColor-Slider--warning: createThemeVar("Input:borderColor-#{$componentName}--warning");
$borderWidth-Slider--warning: createThemeVar("Input:borderWidth-#{$componentName}--warning");
$borderStyle-Slider--warning: createThemeVar("Input:borderStyle-#{$componentName}--warning");
$boxShadow-Slider--warning: createThemeVar("Input:boxShadow-#{$componentName}--warning");
$borderColor-Slider--warning--hover: createThemeVar("Input:borderColor-#{$componentName}--warning--hover");
$boxShadow-Slider--warning--hover: createThemeVar("Input:boxShadow-#{$componentName}--warning--hover");
$borderColor-Slider--warning--focus: createThemeVar("Input:borderColor-#{$componentName}--warning--focus");
$boxShadow-Slider--warning--focus: createThemeVar("Input:boxShadow-#{$componentName}--warning--focus");

// Variables for success variant
$borderRadius-Slider--success: createThemeVar("Input:borderRadius-#{$componentName}--success");
$borderColor-Slider--success: createThemeVar("Input:borderColor-#{$componentName}--success");
$borderWidth-Slider--success: createThemeVar("Input:borderWidth-#{$componentName}--success");
$borderStyle-Slider--success: createThemeVar("Input:borderStyle-#{$componentName}--success");
$boxShadow-Slider--success: createThemeVar("Input:boxShadow-#{$componentName}--success");
$borderColor-Slider--success--hover: createThemeVar("Input:borderColor-#{$componentName}--success--hover");
$boxShadow-Slider--success--hover: createThemeVar("Input:boxShadow-#{$componentName}--success--hover");
$borderColor-Slider--success--focus: createThemeVar("Input:borderColor-#{$componentName}--success--focus");
$boxShadow-Slider--success--focus: createThemeVar("Input:boxShadow-#{$componentName}--success--focus");

// Variables for @layer section
$backgroundColor-track-Slider: createThemeVar("Input:backgroundColor-track-#{$componentName}");
$backgroundColor-track-Slider--disabled: createThemeVar("Input:backgroundColor-track-#{$componentName}--disabled");
$backgroundColor-range-Slider: createThemeVar("Input:backgroundColor-range-#{$componentName}");
$backgroundColor-range-Slider--disabled: createThemeVar("Input:backgroundColor-range-#{$componentName}--disabled");
$borderWidth-thumb-Slider: createThemeVar("Input:borderWidth-thumb-#{$componentName}");
$borderStyle-thumb-Slider: createThemeVar("Input:borderStyle-thumb-#{$componentName}");
$borderColor-thumb-Slider: createThemeVar("Input:borderColor-thumb-#{$componentName}");
$backgroundColor-thumb-Slider: createThemeVar("Input:backgroundColor-thumb-#{$componentName}");
$boxShadow-thumb-Slider: createThemeVar("Input:boxShadow-thumb-#{$componentName}");
$backgroundColor-thumb-Slider--focus: createThemeVar("Input:backgroundColor-thumb-#{$componentName}--focus");
$boxShadow-thumb-Slider--focus: createThemeVar("Input:boxShadow-thumb-#{$componentName}--focus");
$backgroundColor-thumb-Slider--hover: createThemeVar("Input:backgroundColor-thumb-#{$componentName}--hover");
$boxShadow-thumb-Slider--hover: createThemeVar("Input:boxShadow-thumb-#{$componentName}--hover");
$backgroundColor-thumb-Slider--active: createThemeVar("Input:backgroundColor-thumb-#{$componentName}--active");
$boxShadow-thumb-Slider--active: createThemeVar("Input:boxShadow-thumb-#{$componentName}--active");
$borderColor-Slider--error: createThemeVar("Input:borderColor-#{$componentName}--error");
$borderColor-Slider--warning: createThemeVar("Input:borderColor-#{$componentName}--warning");
$borderColor-Slider--success: createThemeVar("Input:borderColor-#{$componentName}--success");

// Basic variant mixin for consistent theming
@mixin variant($variantName) {
  border-radius: createThemeVar("Input:borderRadius-#{$componentName}--#{$variantName}");
  border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}");
  border-width: createThemeVar("Input:borderWidth-#{$componentName}--#{$variantName}");
  border-style: createThemeVar("Input:borderStyle-#{$componentName}--#{$variantName}");
  box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}");

  &:hover {
    border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}--hover");
    box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}--hover");
  }

  &:focus-within {
    border-color: createThemeVar("Input:borderColor-#{$componentName}--#{$variantName}--focus");
    box-shadow: createThemeVar("Input:boxShadow-#{$componentName}--#{$variantName}--focus");
  }
}

@layer components {
  // Container for the slider
  .sliderContainer {
    width: 100%;
    position: relative;
    padding: t.$space-2 0;
  }

  // Root element
  .sliderRoot {
    position: relative;
    display: flex;
    width: 100%;
    touch-action: none;
    user-select: none;
    align-items: center;
    height: 20px;
  }

  // Track element
  .sliderTrack {
    position: relative;
    height: 8px;
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    border-radius: 9999px;
    background-color: $backgroundColor-track-Slider;

    @include variant("default");

    &.error {
      @include variant("error");
    }
    &.warning {
      @include variant("warning");
    }
    &.valid {
      @include variant("success");
    }

    &.disabled, &[data-disabled] {
      background-color: $backgroundColor-track-Slider--disabled;
    }

    &:not(.disabled):not([data-disabled]):hover {
      cursor: pointer;
    }
  }

  // Range element
  .sliderRange {
    position: absolute;
    height: 100%;
    background-color: $backgroundColor-range-Slider;
    border-radius: 9999px;

    &.disabled, &[data-disabled] {
      background-color: $backgroundColor-range-Slider--disabled;
    }
  }

  // Thumb element
  .sliderThumb {
    cursor: pointer;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: $borderWidth-thumb-Slider
    $borderStyle-thumb-Slider
    $borderColor-thumb-Slider;
    background-color: $backgroundColor-thumb-Slider;
    box-shadow: $boxShadow-thumb-Slider;
    position: relative;
    transition: background-color 0.2s, box-shadow 0.2s;
    outline: none;

    &.disabled, &[data-disabled] {
      pointer-events: none;
      opacity: 0.5;
    }

    &:focus-visible, &[data-focus] {
      background-color: $backgroundColor-thumb-Slider--focus;
      box-shadow: $boxShadow-thumb-Slider--focus;
    }
    &:hover, &[data-hover] {
      background-color: $backgroundColor-thumb-Slider--hover;
      box-shadow: $boxShadow-thumb-Slider--hover;
    }
    &:active, &[data-active] {
      background-color: $backgroundColor-thumb-Slider--active;
      box-shadow: $boxShadow-thumb-Slider--active;
    }
  }

  /* States */
  .disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .readOnly {
    opacity: 0.7;
    cursor: default;
  }

  .error {
    border-color: $borderColor-Slider--error;
  }

  .warning {
    border-color: $borderColor-Slider--warning;
  }

  .valid {
    border-color: $borderColor-Slider--success;
  }
}

// --- We export the theme variables to add them to the component renderer
:export {
  themeVars: t.json-stringify($themeVars);
}

```

--------------------------------------------------------------------------------
/docs/content/components/Card.md:
--------------------------------------------------------------------------------

```markdown
# Card [#card]

`Card` is a versatile container that groups related content with a visual boundary, typically featuring background color, padding, borders, and rounded corners. It's ideal for organizing information, creating sections, and establishing visual hierarchy in your interface.

**Key features:**
- **Pre-styled elements**: Built-in support for `title`, `subtitle`, and `avatarUrl` properties
- **Flexible layout**: Choose `vertical` (default) or `horizontal` orientation
- **Visual grouping**: Automatic styling with background, borders, and spacing
- **Clickable areas**: Supports click events for interactive cards
## Using Card [#using-card]

`Card` is a container; it does not have any explicit properties.
You can nest the card's content into the `<Card>` tag:

```xmlui-pg copy display name="Example: using Card"
<App>
  <Card maxWidth="200px">
    <HStack verticalAlignment="center">
      <Icon name="info" />
      <Text value="Information" variant="strong" />
    </HStack>
    <Text value="This is an example text" />
  </Card>
</App>
```

There are also prestyled properties one can make use of, detailed in the [Properties section](#properties).
Prestyled elements always appear above other children.

```xmlui-pg copy display name="Example: using Card with prestyled elements"
<App>
  <Card
    avatarUrl="https://i.pravatar.cc/100"
    title="Example Title"
    subtitle="Predefined subtitle"
    maxWidth="300px">
    <HStack verticalAlignment="center">
      <Icon name="info"/>
      This is a card
    </HStack>
  </Card>
</App>
```

## Properties [#properties]

### `avatarSize` [#avatarsize]

This prop sets the size of the avatar. The default value is `sm`.

Available values: `xs`, `sm`, `md`, `lg`

### `avatarUrl` [#avatarurl]

The url for an avarar image. If not specified, but [`showAvatar`](#showAvatar) is true, Card will show the first letters of the [`title`](#title).

### `linkTo` [#linkto]

This optional property wraps the title in a `Link` component that is clickable to navigate.

### `orientation` (default: "vertical") [#orientation-default-vertical]

An optional property that governs the Card's orientation (whether the Card lays out its children in a row or a column). If the orientation is set to `horizontal`, the Card will display its children in a row, except for its [`title`](#title) and [`subtitle`](#subtitle).

Available values:

| Value | Description |
| --- | --- |
| `horizontal` | The component will fill the available space horizontally |
| `vertical` | The component will fill the available space vertically **(default)** |

```xmlui-pg copy display name="Example: orientation"
<App>
  <Card title="Example Title" subtitle="Example Subtitle" orientation="horizontal">
    <SpaceFiller />
    <Text>Text child #1</Text>
    <Text>Text child #2</Text>
    <Button label="Button Child" />
  </Card>
</App>
```

### `showAvatar` (default: false) [#showavatar-default-false]

Indicates whether the avatar should be displayed

Note that in the demo below if the `avatarUrl` is specified, `showAvatar` is automatically set to true but can still be hidden.

```xmlui-pg copy display name="Example: showAvatar"
<App>
  <Card maxWidth="300px" avatarUrl="https://i.pravatar.cc/100" />
  <Card maxWidth="300px" showAvatar="true" title="Example Card" />
  <Card maxWidth="300px" showAvatar="true" />
</App>
```

### `subtitle` [#subtitle]

This prop sets the pre-styled subtitle. If the property is not set, no subtitle is displayed in the Card.

This prop sets the prestyled subtitle.

```xmlui-pg copy display name="Example: subtitle"
<App>
  <Card maxWidth="300px" subtitle="Example Subtitle" />
</App>
```

### `title` [#title]

This prop sets the pre-styled title. If the property is not set, no title is displayed in the Card.

This prop sets the prestyled title.

```xmlui-pg copy display name="Example: title"
<App>
  <Card maxWidth="300px" title="Example Title" />
</App>
```

## Events [#events]

### `click` [#click]

This event is triggered when the Card is clicked.

This event is triggered when the `Card` is clicked.

```xmlui-pg copy display name="Example: click"
<App>
  <Card maxWidth="300px" onClick="toast('Clicked!')">
    <HStack verticalAlignment="center">
      <Icon name="info" />
      <Text value="Information" variant="strong" />
    </HStack>
    <Text value="This is an example text" />
  </Card>
</App>
```

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

### Theme Variables [#theme-variables]

| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Card | $color-surface-raised | $color-surface-raised |
| [border](../styles-and-themes/common-units/#border)-Card | 1px solid $borderColor | 1px solid $borderColor |
| [borderBottom](../styles-and-themes/common-units/#border)-Card | *none* | *none* |
| [borderBottomColor](../styles-and-themes/common-units/#color)-Card | *none* | *none* |
| [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Card | *none* | *none* |
| [borderBottomWidth](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Card | *none* | *none* |
| [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Card | *none* | *none* |
| [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Card | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Card | *none* | *none* |
| [borderHorizontalColor](../styles-and-themes/common-units/#color)-Card | *none* | *none* |
| [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Card | *none* | *none* |
| [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [borderLeft](../styles-and-themes/common-units/#border)-Card | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Card | *none* | *none* |
| [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Card | *none* | *none* |
| [borderLeftWidth](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Card | $borderRadius | $borderRadius |
| [borderRight](../styles-and-themes/common-units/#border)-Card | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Card | *none* | *none* |
| [borderRightStyle](../styles-and-themes/common-units/#border-style)-Card | *none* | *none* |
| [borderRightWidth](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Card | *none* | *none* |
| [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Card | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Card | *none* | *none* |
| [borderTop](../styles-and-themes/common-units/#border)-Card | *none* | *none* |
| [borderTopColor](../styles-and-themes/common-units/#color)-Card | *none* | *none* |
| [borderTopStyle](../styles-and-themes/common-units/#border-style)-Card | *none* | *none* |
| [borderTopWidth](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Card | *none* | *none* |
| [borderVerticalColor](../styles-and-themes/common-units/#color)-Card | *none* | *none* |
| [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Card | *none* | *none* |
| [borderVerticalWidth](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Card | none | none |
| [gap](../styles-and-themes/common-units/#size)-avatar-Card | $gap-normal | $gap-normal |
| [gap](../styles-and-themes/common-units/#size)-Card | var(--stack-gap-default) | var(--stack-gap-default) |
| [gap](../styles-and-themes/common-units/#size)-title-Card | $gap-none | $gap-none |
| [horizontalAlignment](../styles-and-themes/common-units/#alignment)-title-Card | *none* | *none* |
| [padding](../styles-and-themes/common-units/#size)-Card | $space-4 | $space-4 |
| [paddingBottom](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [paddingLeft](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [paddingRight](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [paddingTop](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [paddingVertical](../styles-and-themes/common-units/#size)-Card | *none* | *none* |
| [verticalAlignment](../styles-and-themes/common-units/#alignment)-title-Card | center | center |

### Variable Explanations [#variable-explanations]

| Theme Variable | Description |
| --- | --- |
| **`gap-Card`** | The gap between the component's children. |
| **`gap-title-Card`** | The gap between the title and the subtitle |
| **`gap-avatar-Card`** | The gap between the avatar and the title panel |
| **`horizontalAlignment-title-Card`** | The horizontal alignment of panel with the title and subtitle |
| **`verticalAlignment-title-Card`** | The vertical alignment of the title and subtitle to the avatar |

```

--------------------------------------------------------------------------------
/xmlui/src/components/NavPanel/NavPanelNative.tsx:
--------------------------------------------------------------------------------

```typescript
import React, { forwardRef, type ReactNode, useEffect } from "react";
import classnames from "classnames";

import styles from "./NavPanel.module.scss";

import type { RenderChildFn } from "../../abstractions/RendererDefs";
import { Logo } from "../Logo/LogoNative";
import { useAppLayoutContext } from "../App/AppLayoutContext";
import { getAppLayoutOrientation } from "../App/AppNative";
import { useLinkInfoContext } from "../App/LinkInfoContext";

// Define navigation hierarchy node structure
export interface NavHierarchyNode {
  /** The type of navigation node - either a clickable link or a grouping container */
  type: "NavLink" | "NavGroup";

  /** The display label/text for this navigation item */
  label: string;

  /** The URL/route path for navigation (only present for NavLink types) */
  to?: string;

  /** Child navigation nodes nested under this node (only present for NavGroup types) */
  children?: NavHierarchyNode[];

  /** Reference to the immediate parent node in the hierarchy (undefined for root-level nodes) */
  parent?: NavHierarchyNode;

  /** Array of ancestor nodes from root to this node, excluding this node itself (empty for root-level nodes) */
  pathSegments?: NavHierarchyNode[];

  /** Reference to the previous NavLink in the flattened navigation order */
  prevLink?: NavHierarchyNode;

  /** Reference to the next NavLink in the flattened navigation order */
  nextLink?: NavHierarchyNode;

  /** True if this is the first NavLink within its immediate parent container */
  firstLink?: boolean;

  /** True if this is the last NavLink within its immediate parent container */
  lastLink?: boolean;
}

// Function to build navigation hierarchy from component children
export function buildNavHierarchy(
  children: any[] | undefined,
  extractValue: any,
  parent?: NavHierarchyNode,
  pathSegments: NavHierarchyNode[] = [],
): NavHierarchyNode[] {
  if (!children) return [];

  const hierarchy: NavHierarchyNode[] = [];

  // Skip non-object children
  children
    .filter((child) => child && typeof child === "object")
    .forEach((child) => {
      if (child.type === "NavLink") {
        const label =
          extractValue.asOptionalString?.(child.props?.label) || extractValue(child.props?.label);
        const to =
          extractValue.asOptionalString?.(child.props?.to) || extractValue(child.props?.to);

        // Handle case where label might not be in props but in children as text
        let finalLabel = label;
        if (!finalLabel && child.children?.length === 1 && child.children[0].type === "TextNode") {
          finalLabel = extractValue(child.children[0].props?.value);
        }

        // Only include NavLinks that have both label and to values
        if (finalLabel && to) {
          const node: NavHierarchyNode = {
            type: "NavLink",
            label: finalLabel,
            to: to,
            parent: parent,
            pathSegments: [...pathSegments],
          };
          hierarchy.push(node);
        }
      } else if (child.type === "NavGroup") {
        const label =
          extractValue.asOptionalString?.(child.props?.label) || extractValue(child.props?.label);

        // NavGroups only need a label, no "to" value required
        if (label) {
          const groupNode: NavHierarchyNode = {
            type: "NavGroup",
            label: label,
            parent: parent,
            pathSegments: [...pathSegments],
            children: [],
          };

          // Build children with this groupNode as parent and updated path
          const newPathSegments = [...pathSegments, groupNode];
          groupNode.children = buildNavHierarchy(
            child.children,
            extractValue,
            groupNode,
            newPathSegments,
          );
          hierarchy.push(groupNode);
        } else if (child.children && child.children.length > 0) {
          // If no label but has children, process them at the current level with same parent and path
          hierarchy.push(...buildNavHierarchy(child.children, extractValue, parent, pathSegments));
        }
      } else if (child.children && child.children.length > 0) {
        //console.log("CN", child.children);
        // Process any children that might contain NavGroup and NavLink components recursively
        const nestedNodes = buildNavHierarchy(child.children, extractValue, parent, pathSegments);
        if (nestedNodes.length > 0) {
          hierarchy.push(...nestedNodes);
        }
      }
    });

  // Set navigation properties after building the hierarchy
  setNavigationProperties(hierarchy);
  return hierarchy;
}

// Helper function to set navigation properties (prevLink, nextLink, firstLink, lastLink)
function setNavigationProperties(hierarchy: NavHierarchyNode[]) {
  // Collect all NavLinks in traversal order
  const allNavLinks: NavHierarchyNode[] = [];

  function collectNavLinks(nodes: NavHierarchyNode[]) {
    nodes.forEach((node) => {
      if (node.type === "NavLink") {
        allNavLinks.push(node);
      }
      if (node.children) {
        collectNavLinks(node.children);
      }
    });
  }

  collectNavLinks(hierarchy);

  // Set prevLink and nextLink for all NavLinks
  allNavLinks.forEach((link, index) => {
    if (index > 0) {
      link.prevLink = allNavLinks[index - 1];
    }
    if (index < allNavLinks.length - 1) {
      link.nextLink = allNavLinks[index + 1];
    }
  });

  // Set firstLink and lastLink properties
  function setFirstLastProperties(nodes: NavHierarchyNode[]) {
    const navLinks = nodes.filter((node) => node.type === "NavLink");

    if (navLinks.length > 0) {
      navLinks[0].firstLink = true;
      navLinks[navLinks.length - 1].lastLink = true;
    }

    // Recursively process children
    nodes.forEach((node) => {
      if (node.children) {
        setFirstLastProperties(node.children);
      }
    });
  }

  setFirstLastProperties(hierarchy);
}

// Function to build a map of NavLinks by their "to" property
export function buildLinkMap(
  navLinks: NavHierarchyNode[] | undefined,
): Map<string, NavHierarchyNode> {
  const linkMap = new Map<string, NavHierarchyNode>();

  if (!navLinks) return linkMap;

  function processNodes(nodes: NavHierarchyNode[]) {
    nodes.forEach((node) => {
      if (node.type === "NavLink" && node.to) {
        // If multiple items use the same "to" value, the last wins
        linkMap.set(node.to, node);
      }
      if (node.children) {
        processNodes(node.children);
      }
    });
  }

  processNodes(navLinks);
  return linkMap;
}

// Default props for NavPanel component
export const defaultProps = {
  inDrawer: false,
};

interface INavPanelContext {
  inDrawer: boolean;
}

export const NavPanelContext = React.createContext<INavPanelContext | null>(null);

const contextValue = {
  inDrawer: true,
};

function DrawerNavPanel({
  logoContent,
  children,
  className,
  style,
  ...rest
}: {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  logoContent?: ReactNode;
}) {
  return (
    <NavPanelContext.Provider value={contextValue}>
      <div {...rest} className={classnames(styles.wrapper, className)} style={style}>
        <div className={classnames(styles.logoWrapper, styles.inDrawer)}>
          {logoContent || <Logo />}
        </div>
        <div className={styles.wrapperInner} style={style}>
          {children}
        </div>
      </div>
    </NavPanelContext.Provider>
  );
}

type Props = {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  logoContent?: ReactNode;
  inDrawer?: boolean;
  renderChild: RenderChildFn;
  navLinks?: NavHierarchyNode[];
};

export const NavPanel = forwardRef(function NavPanel(
  {
    children,
    style,
    logoContent,
    className,
    inDrawer = defaultProps.inDrawer,
    renderChild,
    navLinks,
    ...rest
  }: Props,
  forwardedRef: React.ForwardedRef<any>,
) {
  const appLayoutContext = useAppLayoutContext();
  const linkInfoContext = useLinkInfoContext();
  const horizontal = getAppLayoutOrientation(appLayoutContext?.layout) === "horizontal";
  const showLogo =
    appLayoutContext?.layout === "vertical" || appLayoutContext?.layout === "vertical-sticky";
  const isCondensed = appLayoutContext?.layout?.startsWith("condensed");
  const vertical = appLayoutContext?.layout?.startsWith("vertical");
  const safeLogoContent = logoContent || renderChild(appLayoutContext?.logoContentDef);

  // Register the linkMap when navLinks change
  const registerLinkMap = linkInfoContext?.registerLinkMap;
  useEffect(() => {
    if (registerLinkMap && navLinks) {
      const linkMap = buildLinkMap(navLinks);
      registerLinkMap(linkMap);
    }
  }, [navLinks, registerLinkMap]);

  if (inDrawer) {
    return (
      <DrawerNavPanel {...rest} style={style} logoContent={safeLogoContent} className={className}>
        {children}
      </DrawerNavPanel>
    );
  }

  return (
    <div
      {...rest}
      ref={forwardedRef}
      className={classnames(styles.wrapper, className, {
        [styles.horizontal]: horizontal,
        [styles.vertical]: vertical,
        [styles.condensed]: isCondensed,
      })}
      style={style}
    >
      {showLogo && (
        <div className={classnames(styles.logoWrapper)}>{safeLogoContent || <Logo />}</div>
      )}
      <div className={styles.wrapperInner} style={style}>
        {children}
      </div>
    </div>
  );
});

```

--------------------------------------------------------------------------------
/xmlui/src/components/Text/Text.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./Text.module.scss";

import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import {
  variantOptionsMd,
  type VariantProps,
  VariantPropsKeys,
  type OverflowMode,
  type BreakMode,
} from "../abstractions";
import { Text, defaultProps } from "./TextNative";
import { createMetadata, d } from "../metadata-helpers";

const COMP = "Text";

export const TextMd = createMetadata({
  status: "stable",
  description:
    `The \`${COMP}\` component displays textual information in a number of optional ` +
    `styles and variants.`,
  props: {
    value: d(
      `The text to be displayed. This value can also be set via nesting the text into ` +
        `the \`${COMP}\` component.`,
    ),
    variant: {
      description:
        "An optional string value that provides named presets for text variants with a " +
        "unique combination of font style, weight, size, color, and other parameters. " +
        "If not defined, the text uses the current style of its context. " +
        "In addition to predefined variants, you can specify custom variant names and style them " +
        "using theme variables with the pattern `{cssProperty}-Text-{variantName}` " +
        "(e.g., `textColor-Text-brandTitle`, `fontSize-Text-highlight`). " +
        "See the documentation for a complete list of supported CSS properties.",
      availableValues: variantOptionsMd,
    },
    maxLines: d(
      "This property determines the maximum number of lines the component can wrap to. " +
        "If there is no space to display all the contents, the component displays up to as " +
        "many lines as specified in this property. When the value is not defined, there is " +
        "no limit on the displayed lines.",
    ),
    preserveLinebreaks: {
      description: `This property indicates if linebreaks should be preserved when displaying text.`,
      valueType: "boolean",
      defaultValue: defaultProps.preserveLinebreaks,
    },
    ellipses: {
      description:
        "This property indicates whether ellipses should be displayed when the text is " +
        "cropped (\`true\`) or not (\`false\`).",
      valueType: "boolean",
      defaultValue: defaultProps.ellipses,
    },
    breakMode: {
      description:
        "This property controls how text breaks into multiple lines. " +
        "`normal` uses standard word boundaries, `word` breaks long words to prevent overflow, " +
        "`anywhere` breaks at any character, `keep` prevents word breaking, " +
        "and `hyphenate` uses automatic hyphenation. When not specified, uses the default browser behavior or theme variables.",
      valueType: "string",
      defaultValue: "normal",
      availableValues: [
        { value: "normal", description: "Uses standard word boundaries for breaking" },
        { value: "word", description: "Breaks long words when necessary to prevent overflow" },
        { value: "anywhere", description: "Breaks at any character if needed to fit content" },
        { value: "keep", description: "Prevents breaking within words entirely" },
        { value: "hyphenate", description: "Uses automatic hyphenation when breaking words" },
      ],
    },
    overflowMode: {
      description:
        "This property controls how text overflow is handled. " +
        "`none` prevents wrapping and shows no overflow indicator, " +
        "`ellipsis` shows ellipses when text is truncated, `scroll` forces single line with horizontal scrolling, " +
        "and `flow` allows multi-line wrapping with vertical scrolling when needed (ignores maxLines). " +
        "When not specified, uses the default text behavior.",
      valueType: "string",
      defaultValue: "not specified",
      availableValues: [
        {
          value: "none",
          description: "No wrapping, text stays on a single line with no overflow indicator",
        },
        { value: "ellipsis", description: "Truncates with an ellipsis (default)" },
        {
          value: "scroll",
          description: "Forces single line with horizontal scrolling when content overflows",
        },
        {
          value: "flow",
          description:
            "Allows text to wrap into multiple lines with vertical scrolling when container height is constrained (ignores maxLines)",
        },
      ],
    },
  },
  apis: {
    hasOverflow: {
      description: "Returns true when the displayed text overflows its container boundaries.",
      signature: "hasOverflow(): boolean",
    },
  },
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    [`borderRadius-${COMP}`]: "$borderRadius",
    [`borderStyle-${COMP}`]: "solid",
    [`fontSize-${COMP}`]: "$fontSize-sm",
    [`borderWidth-${COMP}`]: "$space-0",
    [`textColor-${COMP}`]: "$textColor-primary",
    [`fontFamily-${COMP}`]: "$fontFamily",
    [`fontWeight-${COMP}`]: "$fontWeight-normal",

    [`fontSize-${COMP}-secondary`]: "$fontSize-sm",
    [`textColor-${COMP}-secondary`]: "$textColor-secondary",

    [`fontWeight-${COMP}-abbr`]: "$fontWeight-bold",
    [`textTransform-${COMP}-abbr`]: "uppercase",
    [`fontStyle-${COMP}-cite`]: "italic",

    [`fontSize-${COMP}-codefence`]: "$fontSize-code",
    [`fontFamily-${COMP}-codefence`]: "$fontFamily-monospace",
    [`paddingHorizontal-${COMP}-codefence`]: "$space-4",
    [`paddingVertical-${COMP}-codefence`]: "$space-3",
    [`textColor-${COMP}-codefence`]: "$color-surface-900",
    [`lineHeight-${COMP}-codefence`]: "1.5",
    
    [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
    [`fontSize-${COMP}-code`]: "$fontSize-sm",
    [`borderWidth-${COMP}-code`]: "1px",
    [`borderStyle-${COMP}-code`]: "solid",
    [`borderRadius-${COMP}-code`]: "4px",
    [`paddingHorizontal-${COMP}-code`]: "$space-0_5",
    [`paddingBottom-${COMP}-code`]: "2px",
    [`backgroundColor-${COMP}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
    [`borderColor-${COMP}-code`]: "$color-surface-100",

    [`textDecorationLine-${COMP}-deleted`]: "line-through",

    [`textDecorationLine-${COMP}-inserted`]: "underline",

    [`fontFamily-${COMP}-keyboard`]: "$fontFamily-monospace",
    [`fontSize-${COMP}-keyboard`]: "$fontSize-sm",
    [`fontWeight-${COMP}-keyboard`]: "$fontWeight-bold",
    [`borderWidth-${COMP}-keyboard`]: "1px",
    [`paddingHorizontal-${COMP}-keyboard`]: "$space-1",
    [`backgroundColor-${COMP}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
    [`borderColor-${COMP}-keyboard`]: "$color-surface-300",

    [`fontFamily-${COMP}-sample`]: "$fontFamily-monospace",
    [`fontSize-${COMP}-sample`]: "$fontSize-sm",

    [`fontSize-${COMP}-sup`]: "$fontSize-xs",
    [`verticalAlignment-${COMP}-sup`]: "super",

    [`fontSize-${COMP}-sub`]: "$fontSize-xs",
    [`verticalAlignment-${COMP}-sub`]: "sub",

    [`fontStyle-${COMP}-var`]: "italic",

    [`fontStyle-${COMP}-em`]: "italic",

    [`fontFamily-${COMP}-mono`]: "$fontFamily-monospace",

    [`fontSize-${COMP}-title`]: "$fontSize-2xl",

    [`fontSize-${COMP}-subtitle`]: "$fontSize-xl",

    [`fontSize-${COMP}-small`]: "$fontSize-sm",

    [`letterSpacing-${COMP}-caption`]: "0.05rem",

    [`fontSize-${COMP}-placeholder`]: "$fontSize-xs",
    [`textColor-${COMP}-placeholder`]: "$color-surface-500",

    [`paddingVertical-${COMP}-paragraph`]: "$space-1",

    [`fontSize-${COMP}-subheading`]: "$fontSize-H6",
    [`fontWeight-${COMP}-subheading`]: "$fontWeight-bold",
    [`letterSpacing-${COMP}-subheading`]: "0.04em",
    [`textTransform-${COMP}-subheading`]: "uppercase",
    [`textColor-${COMP}-subheading`]: "$textColor-secondary",

    [`marginTop-${COMP}-tableheading`]: "$space-1",
    [`marginBottom-${COMP}-tableheading`]: "$space-4",
    [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
    [`fontSize-${COMP}-tableheading`]: "$fontSize-H6",
    [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",

    [`fontWeight-${COMP}-strong`]: "$fontWeight-bold",

    [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",

    dark: {
      [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)",
    },
  },
});

export const textComponentRenderer = createComponentRenderer(
  COMP,
  TextMd,
  ({ node, extractValue, className, renderChild, registerComponentApi }) => {
    const {
      variant,
      maxLines,
      preserveLinebreaks,
      ellipses,
      overflowMode,
      breakMode,
      value,
      ...variantSpecific
    } = node.props;

    const variantSpecificProps: VariantProps = Object.fromEntries(
      Object.entries(variantSpecific)
        .filter(([key, _]) => VariantPropsKeys.includes(key as any))
        .map(([key, value]) => [key, extractValue(value)]),
    );

    return (
      <Text
        variant={extractValue(variant)}
        maxLines={extractValue.asOptionalNumber(maxLines)}
        className={className}
        preserveLinebreaks={extractValue.asOptionalBoolean(
          preserveLinebreaks,
          defaultProps.preserveLinebreaks,
        )}
        ellipses={extractValue.asOptionalBoolean(ellipses, defaultProps.ellipses)}
        overflowMode={extractValue(overflowMode) as OverflowMode | undefined}
        breakMode={extractValue(breakMode) as BreakMode | undefined}
        registerComponentApi={registerComponentApi}
        {...variantSpecificProps}
      >
        {extractValue.asDisplayText(value) || renderChild(node.children)}
      </Text>
    );
  },
);

```

--------------------------------------------------------------------------------
/docs/content/components/Switch.md:
--------------------------------------------------------------------------------

```markdown
# Switch [#switch]

`Switch` enables users to toggle between two states: on and off.

## Switch Values [#switch-values]

The `initialValue` and `value` properties of the switch are transformed to a Boolean value to display the on (`true`) or off (`false`) state with this logic:
- `null` and `undefined` go to `false`.
- If the property is Boolean, the property value is used as is.
- If it is a number, `NaN` and `0` result in `false`; other values represent `true`.
- If the property is a string, the empty string and the literal "false" string result in `false`; others result in `true`.
- The empty array value goes to `false`; other array values result in `true`.
- Object values with no properties result in `false`; other values represent `true`.

## Properties [#properties]

### `autoFocus` (default: false) [#autofocus-default-false]

If this property is set to `true`, the component gets the focus automatically when displayed.

### `enabled` (default: true) [#enabled-default-true]

This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).

This boolean property indicates whether the checkbox responds to user events (i.e. clicks);
it is `true` by default.

```xmlui-pg copy {4-5, 9-10} display name="Example: enabled"
<App>
  Enabled switches:
  <HStack>
    <Switch initialValue="true" enabled="true" />
    <Switch initialValue="false" enabled="true" />
  </HStack>
  Disabled switches:
  <HStack>
    <Switch initialValue="true" enabled="false" />
    <Switch initilaValue="false" enabled="false" />
  </HStack>
</App>
```

### `initialValue` (default: false) [#initialvalue-default-false]

This property sets the component's initial value.

### `readOnly` (default: false) [#readonly-default-false]

Set this property to `true` to disallow changing the component value.

If true, the value of the component cannot be modified.

```xmlui-pg copy display name="Example: readOnly"
<App>
  <Switch readOnly="true" label="Checked" initialValue="true" />
  <Switch readOnly="true" label="Unchecked" intialValue="false" />
</App>
```

### `required` (default: false) [#required-default-false]

Set this property to `true` to indicate it must have a value before submitting the containing form.

### `validationStatus` (default: "none") [#validationstatus-default-none]

This property allows you to set the validation status of the input component.

Available values:

| Value | Description |
| --- | --- |
| `valid` | Visual indicator for an input that is accepted |
| `warning` | Visual indicator for an input that produced a warning |
| `error` | Visual indicator for an input that produced an error |

## Events [#events]

### `click` [#click]

This event is triggered when the Switch is clicked.

### `didChange` [#didchange]

This event is triggered when value of Switch has changed.

This event is triggered when the `Switch` is toggled due to user interaction.
A read-only switch never fires this event, and it won't fire if the switch's value is set programmatically.

```xmlui-pg copy display name="Example: didChange"
<App verticalAlignment="center" var.changes="">
  <Switch label="Changeable" onDidChange="changes += '+'" />
  <Switch label="Readonly" readOnly="true" onDidChange="changes += '-'" />
  <Text value="Changes: {changes}" />
</App>
```

### `gotFocus` [#gotfocus]

This event is triggered when the Switch has received the focus.

This event is triggered when the `Switch` receives focus.

Click the `Switch` in the example demo to change the label text. Note how clicking elsewhere resets the text to the original.

```xmlui-pg copy {4,5} display name="Example: gotFocus"
<App var.focused="{false}" verticalAlignment="center">
  <Switch
    value="true"
    onGotFocus="focused = true"
    onLostFocus="focused = false"
  />
  <Text value="{focused === true ? 'I am focused!' : 'I have lost the focus!'}" />
</App>
```

### `lostFocus` [#lostfocus]

This event is triggered when the Switch has lost the focus.

## Exposed Methods [#exposed-methods]

### `setValue` [#setvalue]

This API sets the value of the `Switch`. You can use it to programmatically change the value.

**Signature**: `setValue(value: boolean): void`

- `value`: The new value to set. Can be either true (on) or false (off).

```xmlui-pg copy {10,13,15} display name="Example: value and setValue"
<App var.changes="">
  <Switch
    id="mySwitch"
    readOnly="true"
    label="This switch can be set only programmatically"
    onDidChange="changes += '+'" />
  <HStack>
    <Button
      label="Check"
      onClick="mySwitch.setValue(true)" />
    <Button
      label="Uncheck"
      onClick="mySwitch.setValue(false)" />
  </HStack>
  <Text>The switch is {checkbox.value ? "checked" : "unchecked"}</Text>
  <Text value="Changes: {changes}" />
</App>
```

### `value` [#value]

This property holds the current value of the Switch, which can be either "true" (on) or "false" (off).

**Signature**: `get value():boolean`

## Parts [#parts]

The component has some parts that can be styled through layout properties and theme variables separately:

- **`input`**: The switch input area.
- **`label`**: The label displayed for the switch.

## Styling [#styling]

### Theme Variables [#theme-variables]

| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Switch | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Switch | $color-primary-500 | $color-primary-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Switch--error | $borderColor-Switch--error | $borderColor-Switch--error |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Switch--error | $borderColor-Switch--error | $borderColor-Switch--error |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Switch--success | $borderColor-Switch--success | $borderColor-Switch--success |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Switch--success | $borderColor-Switch--success | $borderColor-Switch--success |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Switch--warning | $borderColor-Switch--warning | $borderColor-Switch--warning |
| [backgroundColor](../styles-and-themes/common-units/#color)-checked-Switch--warning | $borderColor-Switch--warning | $borderColor-Switch--warning |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-checked-Switch | $backgroundColor-primary | $backgroundColor-primary |
| [backgroundColor](../styles-and-themes/common-units/#color)-indicator-Switch | $color-surface-400 | $color-surface-500 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Switch | $color-surface-0 | $color-surface-0 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Switch | $color-surface-0 | $color-surface-0 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Switch--disabled | $color-surface-200 | $color-surface-200 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Switch--disabled | $color-surface-200 | $color-surface-200 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Switch-indicator--disabled | $backgroundColor-primary | $backgroundColor-primary |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Switch | $color-primary-500 | $color-primary-500 |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Switch | $color-primary-500 | $color-primary-500 |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Switch--error | $borderColor-Switch--error | $borderColor-Switch--error |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Switch--error | $borderColor-Switch--error | $borderColor-Switch--error |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Switch--success | $borderColor-Switch--success | $borderColor-Switch--success |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Switch--success | $borderColor-Switch--success | $borderColor-Switch--success |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Switch--warning | $borderColor-Switch--warning | $borderColor-Switch--warning |
| [borderColor](../styles-and-themes/common-units/#color)-checked-Switch--warning | $borderColor-Switch--warning | $borderColor-Switch--warning |
| [borderColor](../styles-and-themes/common-units/#color)-Switch | $color-surface-200 | $color-surface-200 |
| [borderColor](../styles-and-themes/common-units/#color)-Switch | $color-surface-200 | $color-surface-200 |
| [borderColor](../styles-and-themes/common-units/#color)-Switch--default--hover | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Switch--disabled | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Switch--error | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Switch--success | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Switch--warning | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Switch | 1px | 1px |
| [outlineColor](../styles-and-themes/common-units/#color)-Switch--focus | *none* | *none* |
| [outlineOffset](../styles-and-themes/common-units/#size)-Switch--focus | *none* | *none* |
| [outlineStyle](../styles-and-themes/common-units/#border)-Switch--focus | *none* | *none* |
| [outlineWidth](../styles-and-themes/common-units/#size)-Switch--focus | *none* | *none* |

```

