This is page 103 of 182. Use http://codebase.md/xmlui-org/xmlui/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── layout-changes.md
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── 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
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── 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
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── 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.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
1 | # xmlui
2 |
3 | ## 0.10.25
4 |
5 | ### Patch Changes
6 |
7 | - e7c503e: refactor: Select - remove radix select
8 | - 5fe3052: Fix the NavGroup click behavior in responsive view
9 | - 5fe3052: Fix the $item access issue within a ModalDialog inside a Column
10 | - 250647b: Fix the APICall becomes non-functional after first error when used with DataSource + Items + $item context issue
11 |
12 | ## 0.10.24
13 |
14 | ### Patch Changes
15 |
16 | - 3e361c4: The xmlui-pg codefence now accepts emojies
17 | - 3e361c4: Exend the formatDate, formatDateTime, and formatTime functions with optional format strings
18 |
19 | ## 0.10.23
20 |
21 | ### Patch Changes
22 |
23 | - bf18444: Experiment with the "variant" behavior
24 | - 6d3bb89: Form now has a willSubmit event (it can cancel the submit event)
25 | - 89c69af: Fix the boolean conversion issue with showAnchor in Heading
26 | - 4cfebf0: Fix loading code-behind files in standalone mode
27 | - 145cd68: fix: pointer-events:none when using sibling Dialog
28 |
29 | ## 0.10.22
30 |
31 | ### Patch Changes
32 |
33 | - 501f60a: The behavior infrastructure now uses ComponentProvider and allows adding custom behaviors
34 | - 1020f1c: Extend Tab with the tabAlignment and accordionView properties
35 |
36 | ## 0.10.21
37 |
38 | ### Patch Changes
39 |
40 | - 6fd4d62: Add custom Text variant styling
41 |
42 | ## 0.10.20
43 |
44 | ### Patch Changes
45 |
46 | - 26eac90: fix: Autocomplete handles animations correctly
47 | - f53edff: Add margin-related theme variables to ContentSeparator
48 | - 1840916: Add applyIf property to Theme
49 | - c6be7a3: fix: external animation is now correctly applied to ModalDialogs as well
50 | - 6aaefaf: Added better error text when rendering FormItem outside of a Form.
51 | - 28d2585: refactor: Select and AutoComplete components
52 | - e29a231: The itemLabelWidth value of Form now supports theme variables ($space-\* values).
53 | - 22162c0: AppState now uses a merge operation to set initialValue
54 | - e90232b: fix: itemWithLabel - layout issue
55 |
56 | ## 0.10.19
57 |
58 | ### Patch Changes
59 |
60 | - facb257: Add checkboxTolerance property to Table
61 | - 6084c14: test: review onFocus, onBlur e2e tests
62 | - e1fa9d7: Renamed the following properties in DatePicker: minValue -> startDate, maxValue -> endDate. Also updated component documentation.
63 |
64 | ## 0.10.18
65 |
66 | ### Patch Changes
67 |
68 | - 202f2b2: refactor: use labelBehavior instead of ItemWithLabel
69 | - 6650ee8: Add back removed RadioItem
70 | - da98994: Fixed FormItem validation indicators to use a relaxed validation indication strategy.
71 | - 8394663: fix: labelBehavior, input components - styling issue
72 |
73 | ## 0.10.17
74 |
75 | ### Patch Changes
76 |
77 | - 07dae0b: fix: AccordionItem produces the right error outside of Accordion component
78 |
79 | ## 0.10.16
80 |
81 | ### Patch Changes
82 |
83 | - 0ba6612: Undust and improve the Tree component
84 | - 7b78052: Fixed Slider ranged version where only the first thumb is interactable.
85 | - 314b429: improve: remove cmdk from autocomple, add keywords prop to option
86 | - a1dea8f: fix: NumberBox initialValue ignores non-convertible string values, minValue and maxValue now applies to typed-in input as well as to increments / decrements with spinner buttons.
87 | - cff754c: refactor: move behavior application earlier in ComponentAdapter render flow
88 |
89 | ## 0.10.15
90 |
91 | ### Patch Changes
92 |
93 | - 3c8ad14: Add the data property to the Pdf component
94 | - 5502fea: Add the "transform" layout property
95 | - e08f0ba: Add syncWithAppState and initiallySelected properties to Table
96 | - 5502fea: Fix MenuSeparator and SubMenuitem (forwardRef)
97 | - db618b5: fix: NavGroup componenet's iconVertical{Expanded,Collapsed} properties now apply based on it's 'open' state. Only the Expanded one was present before the fix.
98 | - a795b3d: Allow event handlers to use nested action components recursively
99 | - 5851c02: feat: introducing behaviors - tooltip, animation, label
100 |
101 | ## 0.10.14
102 |
103 | ### Patch Changes
104 |
105 | - 618049b: fix: Modal dialog scrolling issue
106 | - 215a142: Allow image to accept binary data (and use it instead of src)
107 | - 65b52e1: Allow user-defined components in extension packages
108 | - 0cc2178: Fixed Slider input type, label focus, readOnly property, as well as min & max value issues.
109 | - 53d4ed9: Fixed feature to add custom icons for the Carousel prev/next page buttons.
110 |
111 | ## 0.10.13
112 |
113 | ### Patch Changes
114 |
115 | - 9401ee0: Added short debounce to ColorPicker to make changing color values with slider a bit smoother.
116 | - eb62858: fix: assigning new properties to objects in xmlui script
117 | - eb62858: fix: stricter empty body detection in RestApiProxy
118 | - eb62858: fix: TextArea autofocus
119 | - eb62858: fix: dropdownMenu overflow
120 | - eb62858: fix: ability to use user defined components in triggerTemplate (dropdownMenu)
121 | - eb62858: select: use focus-visible instead of focus for outline
122 | - 243b7fa: fix: modal dialog/toast issue
123 | - eb62858: form: hideButtonRowUntilDirty
124 |
125 | ## 0.10.12
126 |
127 | ### Patch Changes
128 |
129 | - f12a042: fix: report errors in script tag
130 | - 8731eb8: Avatar does not issue a resource URL warning when "url" is not specified
131 | - eb6454f: refactor: change LineChart/BarChart property names
132 | - 1210852: Fix the layout property usage of ModalDialog
133 |
134 | ## 0.10.11
135 |
136 | ### Patch Changes
137 |
138 | - 8c76c8d: feat: style the error report colors and spaces in the browser for xmlui syntax errors
139 | - d56c3e5: RadioGroup now correctly handles different types of initialValue property values, applies readOnly property, and places necessary ARIA tags if the required property is set. Clarified component reference description on how RadioGroup and Option handles value types.
140 | - e42d367: Add FancyButton to xmlui-website-blocks
141 | - f539526: feat: BarChart - add tooltip position tracking
142 | - 19ce234: Review Option handling in Select and RadioGroup
143 | - 455b6c0: feat: add animation support to all relevant components via animation and animationOptions props
144 | - e90dc73: feat: add support for 'uses' property
145 | - 819b563: Update fontSize and lineHeight themes and style (may break existing xmlui code)
146 | - b57dfa2: Add the autoDetectTone property to App
147 | - 9dd0f97: Update Checkbox and Switch with click event metadata
148 | - 19ce234: Select accepts null as an option value; it converts a value to a string no longer
149 | - 898346d: Extend Text and Heading APIs with hasOverflow
150 | - 705dd04: Fix RestApiProxy to deliver response status when no error body specified
151 |
152 | ## 0.10.10
153 |
154 | ### Patch Changes
155 |
156 | - fff80c5: Bump package version
157 |
158 | ## 0.10.9
159 |
160 | ### Patch Changes
161 |
162 | - 879c09d: Component part handling and testing refactored
163 | - 3ad8514: Added tooltip value display to Slider thumbs. Removed value display from Slider label.
164 | - 0c69245: fix: virtualized list/table in ModalDialog
165 | - 4ad31fc: refactor: rename dataKeys/nameKey to xKeys/yKey and layout to orientation in chart components - BarChart, LineChart
166 | - c99f184: Fix ExpandableItem focus issue
167 | - 5032e4a: Experimenting with HeroSection
168 | - 2394f36: Enhance DateInput and TimeInput
169 |
170 | ## 0.10.8
171 |
172 | ### Patch Changes
173 |
174 | - a4d62c4: Add experimental Timer component
175 | - 7ed2918: Add the appendBlob function to the ApiInterceptor backend
176 |
177 | ## 0.10.7
178 |
179 | ### Patch Changes
180 |
181 | - 664ea4f: Fixed BarChart hideTickY property to not remove the Y axis when set to true.
182 | - a739a26: Fixed Checkbox and Switch visual issue. Fixed Line- and BarChart visual glitch in Table.
183 | - bdb54dd: Small fixes for tiny bugs found during MyWorkDrive update
184 | - 81724c6: Fixed BarChart tick labels not appearing.
185 |
186 | ## 0.10.6
187 |
188 | ### Patch Changes
189 |
190 | - 6464ec8: fix ssr
191 |
192 | ## 0.10.5
193 |
194 | ### Patch Changes
195 |
196 | - d38351d: fix missing dependency
197 |
198 | ## 0.10.4
199 |
200 | ### Patch Changes
201 |
202 | - 43fd8c5: small fixes: Avatar, FileUploadDropzone, auto xsrf token handling
203 | - 1df8e5d: Autocomplete: initiallyOpen prop
204 | - 0d5d9d1: Reworked Pagination layout strategy. Provided props to better control layout: pageSizeSelectorPosition, pageInfoPosition, buttonRowPosition. These props are available in Table pagination as well.
205 | - 3def673: DropdownMenu doesn't cooperate with Fragment triggerTemplate
206 | - 428ebea: include themes.scss file in lib dist
207 | - a12ce66: FileUploadDropZone fixes (dropPlaceholder disappeared)
208 |
209 | ## 0.10.3
210 |
211 | ### Patch Changes
212 |
213 | - 2e512bb: Add solid overflow handling modes to Text
214 | - 46d1d18: Remove the "codefence" Text variant
215 | - 6bc9ed1: feat: support aligning cells in a Table row vertically
216 | - 0b1f983: Add new, compound layout property name parsing
217 | - a2637f3: Text is displayed as inline (you can nest Text into Text)
218 | - eb4d592: Adding the "part" concept to native components
219 |
220 | ## 0.10.2
221 |
222 | ### Patch Changes
223 |
224 | - ff14e15: fix: LineChart - sizing issue
225 | - 1451a94: feat: make input padding configurable via theme variables
226 |
227 | ## 0.10.1
228 |
229 | ### Patch Changes
230 |
231 | - 442416b: Refactor visual components to allow tooltip
232 | - a018431: feat: add custom tooltip template support for Bar and Line charts
233 | - 33cb547: Pagination component now handles itemCount being undefined/null. Introduced hasPrevPage and hasNextPage props to toggle button disabled state.
234 | - b5d7537: Enhance the disabledDates property of DatePicker
235 |
236 | ## 0.10.0
237 |
238 | ### Minor Changes
239 |
240 | - 000a311: Add tooltip behavior to visible components
241 | - eb8b958: Rework inline styling system, prepare for responsive styling
242 |
243 | ### Patch Changes
244 |
245 | - 6d0ce52: Added features to the Pagination component: page size selector dropdown control. Also added the following props: layout orientation and layout order reversal.
246 | - 8c98f33: feat: add theme variable support for LineChart stroke width
247 | - ef86593: feat: add didChange event handler to Tabs component
248 | - da5f4e7: test: create e2e tests for chart components
249 | - 47c7a2d: Integrated the new Pagination component with Table.
250 | - 740f904: Add "activated" event to TabItem
251 | - 5009c52: Add "parts" to component metadata
252 | - 2f5ec32: Remove "from" from the list or reserved script keywords, as no longer used
253 |
254 | ## 0.9.101
255 |
256 | ### Patch Changes
257 |
258 | - 791b0be: Experimenting with issuing release on larger GitHub machines
259 |
260 | ## 0.9.100
261 |
262 | ### Patch Changes
263 |
264 | - 2dbf6d2: Added accessibility features, enabled prop and defaultThemeVars to Pagination. Also created E2E test cases for Pagination
265 |
266 | ## 0.9.99
267 |
268 | ### Patch Changes
269 |
270 | - e5a09fb: Added a separate Pagination component with events and API methods for custom pagination.
271 | - 36360f6: improve: add tickFormatterY to LineChart, create e2e tests
272 |
273 | ## 0.9.98
274 |
275 | ### Patch Changes
276 |
277 | - ff781f3: new internal react component for integrating into existing react applications (StandaloneComponent)
278 | - 377f0f2: Fix image animation issue in Carousel
279 | - ce0ff76: Added hover & active styles for Slider on thumb. FileInput opens file browser on label focus.
280 | - 208768a: Fixed input adornments not changing color on setting their respective theme variable. Spinbox buttons in NumberBox now have role=spinbutton.
281 |
282 | ## 0.9.97
283 |
284 | ### Patch Changes
285 |
286 | - f7e8019: Implement simple IFrame APIs
287 |
288 | ## 0.9.96
289 |
290 | ### Patch Changes
291 |
292 | - 3196156: Add IFrame component (first prototype)
293 | - cfee78a: NumberBox tweaks: fixed missing padding theme var, fixed incorrect label association.
294 | - f51002a: fix: Tabs - descendant button warning
295 | - 3fa52d9: fix: Table sortBy now works as expected
296 |
297 | ## 0.9.95
298 |
299 | ### Patch Changes
300 |
301 | - af6a7a0: fix: Tabs - fixed the inconsistency in the headerTemplate.
302 | - 69a2a8f: Fix the useEventHaddler hook
303 | - 29c68fe: fix: H1 ... H6 now ignores the level property
304 |
305 | ## 0.9.94
306 |
307 | ### Patch Changes
308 |
309 | - 1d9365c: feat: Tabs component - use headerTemplate instead of labelTemplate/tabTemplate
310 |
311 | ## 0.9.93
312 |
313 | ### Patch Changes
314 |
315 | - af17117: feat:add labelTemplate prop to TabItem component
316 | - 44da3d9: The transformation of Checkbox and Switch values (to Booleans) are now documented and tested
317 | - b7a6b9a: Fix formatHumanElapsedTime unit tests, make the local-independent
318 | - bc95844: improve: Select and AutoComplete components
319 | - 52d94a2: Fix the ComponentWrapper childrenAsTemplate issue
320 | - 6629ce5: New end-to-end tests reviewed
321 | - 0254471: Fixed the initialValue issue with TextArea
322 | - 3318cfb: feat: provide context in browser error reports
323 |
324 | ## 0.9.92
325 |
326 | ### Patch Changes
327 |
328 | - 347cda1: Review component e2e tests
329 |
330 | ## 0.9.91
331 |
332 | ### Patch Changes
333 |
334 | - 6a7d779: Review Slot implementation
335 |
336 | ## 0.9.90
337 |
338 | ### Patch Changes
339 |
340 | - 4b57f7e: Remove Spinner tests
341 |
342 | ## 0.9.89
343 |
344 | ### Patch Changes
345 |
346 | - 2968eb9: fix initialValue handling in selects in forms
347 | - 94f4eb5: safari regexp error workaround for optimized build, revert select inside form fix
348 | - 8364c03: add new TextBox and TextArea test cases
349 |
350 | ## 0.9.88
351 |
352 | ### Patch Changes
353 |
354 | - b79d7d8: Fix flaky Checkbox e2e tests
355 |
356 | ## 0.9.87
357 |
358 | ### Patch Changes
359 |
360 | - 33846c2: Fix ios regex failure
361 |
362 | ## 0.9.86
363 |
364 | ### Patch Changes
365 |
366 | - 48af60d: Temporarily suspend new checkbox e2e tests
367 |
368 | ## 0.9.85
369 |
370 | ### Patch Changes
371 |
372 | - ee8d6ad: Fix "required" validation issue with "integer" and "number" FormItem
373 | - 9ca7572: Extend the component API metadata with method signature and parameter descriptions
374 | - 6944d2f: Add a scrollIntoView method to Heading
375 | - c0c10e7: Added missing autoFocus feature and aria labels to Checkbox
376 | - cbe1ef2: Use grammar and syntax highlight files straight form the xmlui package, instead of duplicating them in every app.
377 |
378 | ## 0.9.84
379 |
380 | ### Patch Changes
381 |
382 | - c54abf3: update deps
383 |
384 | ## 0.9.83
385 |
386 | ### Patch Changes
387 |
388 | - 8e3d6a3: Prevent the xmlui-optimizer to raise error on ShadowRoot
389 | - 8644010: Add a scrollIntoView api to Bookmark
390 |
391 | ## 0.9.82
392 |
393 | ### Patch Changes
394 |
395 | - 3bc29ae: fix: account for events with components inside them (like APICall) in a way that more syntax highlighters understand. VSCode worked fine, Shiki did not.
396 | - 1101bf5: Fix a React warning in MarkdownNative (headingRef)
397 | - cd8db58: Fixed ModalDialog overlay and fullScreen in nested apps. Now dialogs defined in nested apps stay inside them.
398 | - 13beb58: Fixed ModalDialog context error when dialog is called from ApiCall or components using "confirm" in XMLUI code.
399 | - 79c1d8a: fix: allow the playground to use the same tone as its source
400 |
401 | ## 0.9.81
402 |
403 | ### Patch Changes
404 |
405 | - 59680b7: Allow configuring the initiallyShowCode flag in ComponentViewer
406 |
407 | ## 0.9.80
408 |
409 | ### Patch Changes
410 |
411 | - 4598566: NumberBox and FromItem type="number" accepts numeric string as initialValue
412 | - 14e6a7d: feat: add splitView to code inspection
413 | - cf05bd2: Fix non-fatal StandaloneApp.tsx issue
414 |
415 | ## 0.9.79
416 |
417 | ### Patch Changes
418 |
419 | - ad21a31: enhance treeshaking
420 |
421 | ## 0.9.78
422 |
423 | ### Patch Changes
424 |
425 | - 94a68f0: Toggle password visibility in PasswordInput
426 | - 94a68f0: Extend markdown to render compound headings with code spans and anchors
427 | - 163a45c: Add ToneSwitch with icon customization
428 | - 7ce528b: fix: BarChart - size management
429 | - c6eb9a8: Fixed scrolling to specific Bookmarks inside nested apps.
430 |
431 | ## 0.9.77
432 |
433 | ### Patch Changes
434 |
435 | - c867f38: Change split view startup animation
436 |
437 | ## 0.9.76
438 |
439 | ### Patch Changes
440 |
441 | - aa08a8c: introducing ApiInterceptor->useWorker: true/false
442 | - 15bf622: fix: add escaped \{ to textmate syntax, eliminate double extraction of props in FormItem causing bugs with escaped open curly brace being parsed as start of binding expression.
443 | - 5761868: improve: BarChart - add tick formatter for X and Y axes
444 |
445 | ## 0.9.75
446 |
447 | ### Patch Changes
448 |
449 | - c876be8: Turn docs deploy to standard routing
450 |
451 | ## 0.9.74
452 |
453 | ### Patch Changes
454 |
455 | - 0043c5d: NestedApp new prop: withSplashScreen
456 |
457 | ## 0.9.73
458 |
459 | ### Patch Changes
460 |
461 | - 88bf4f6: extend formatHumanElapsedTime with a short format flag
462 | - fef53db: Allow specifying href targets with the markdown link tag
463 | - 6167648: Fix the useMouseEventHandlers hook
464 | - b2f4483: Fix missing code fence display
465 | - e9040c6: Make the nested app's header smaller
466 |
467 | ## 0.9.72
468 |
469 | ### Patch Changes
470 |
471 | - 4ab3b8a: add omitH1 to TableOfContents
472 | - ac4a283: remove the AppWithCodeView component
473 | - 38454c9: fix ApiInterceptor race conditions (inside NestedApps)
474 |
475 | ## 0.9.71
476 |
477 | ### Patch Changes
478 |
479 | - 5774c53: fix ssr issues with Theme components
480 |
481 | ## 0.9.70
482 |
483 | ### Patch Changes
484 |
485 | - 1da7847: Adjust CodeBlock theme variables for dark tone
486 |
487 | ## 0.9.69
488 |
489 | ### Patch Changes
490 |
491 | - 9b36621: fix flaky Checkbox tests
492 |
493 | ## 0.9.68
494 |
495 | ### Patch Changes
496 |
497 | - 9b1f718: change: add back the logo and the buttons to the xmlui-pg split view
498 | - c79ced7: fix ssr hydration warn in AppWithCodeView
499 | - d030ac2: A few theme variable defaults updated
500 | - 21c4fd6: fix: mocked apis should work with multiple NestedApps
501 |
502 | ## 0.9.67
503 |
504 | ### Patch Changes
505 |
506 | - 51a5b05: Small changes in a few component's metadata representation
507 | - 9048af1: Remove the header logo and buttons from the AppWithCodeViewNative component
508 | - 94f0e66: Accounted for some bad inputs in code fences when highlighting rows & substrings
509 | - 3f0e6b0: fix memoization for tabs, pageInfo
510 |
511 | ## 0.9.66
512 |
513 | ### Patch Changes
514 |
515 | - eae8145: Fixed Switch indicator positioning
516 | - b6c64de: improve: charts - improved tick rendering
517 | - 459bd3c: improve: Logo - add inline, alt props
518 | - 96be435: feat: CodeBlock - add new themeVariables
519 |
520 | ## 0.9.65
521 |
522 | ### Patch Changes
523 |
524 | - c17fc0d: fix the NestedAppNative.tsx issue introduced in #1547
525 |
526 | ## 0.9.64
527 |
528 | ### Patch Changes
529 |
530 | - 5ad3ffc: Refactored the usage of theme variables in RadioGroup
531 | - da3c8bc: Add a "noHeader" option to the xmlui-pg codefence
532 | - 301cb39: Allow YAML (.yml) theme files in standalone apps
533 | - d5d3f4d: Fixed Bar- & LineChart sizing in the Table component
534 |
535 | ## 0.9.63
536 |
537 | ### Patch Changes
538 |
539 | - b9c0881: Fix: add a workaround to ListNative to avoid issues coming from undefined row values
540 |
541 | ## 0.9.62
542 |
543 | ### Patch Changes
544 |
545 | - 832f31d: fix: nestedApp fills the available space in AppWithCode component
546 | - 4f9ff06: Fix the build issue with FormSection
547 |
548 | ## 0.9.61
549 |
550 | ### Patch Changes
551 |
552 | - 4ef5f3f: This version does not contain any real changes; it's just for bumping the version number.
553 |
554 | ## 0.9.60
555 |
556 | ### Patch Changes
557 |
558 | - f37ed8c: Fine tune AppWithCodeView header
559 | - 736dbc8: improve: AppWithCode - center the XML/UI buttons
560 | - e2a6e1a: Add a popOutUrl="<url>" option to xmlui-pg to allow pop out to a custom playground location
561 |
562 | ## 0.9.59
563 |
564 | ### Patch Changes
565 |
566 | - 2a07157: Rename Pages property 'defaultRoute' to 'fallbackPath'
567 | - 97b3241: improve: expanding the styles of the components responsible for code display with new theme variables.
568 | - c4abb20: Fixed RadioGroup disabled and validation indicator states. Also fixed an issue where the checked indicator was not aligned to center if the RadioGroup Option was resized in some way.
569 | - f19720c: Added 0 min width to PieChart, Fixed focus error when one checkbox's state change depended on another
570 | - 66c2288: Fixed NavLink indentation in horizontal App layout, if in a nested NavGroup in the NavPanel
571 | - 2d27204: Fixed a number of color & visual state representations of the components: DatePicker, Switch, Select, TextBox, TextArea, NumberBox, AutoComplete
572 |
573 | ## 0.9.58
574 |
575 | ### Patch Changes
576 |
577 | - dc43275: Fixed Pie- & DonutChart height property.
578 | - f9562b5: make flowLayout auto-responsive behavior a bit smarter
579 | - 1af11af: fix: eliminating the duplication of toast messages
580 | - de570c2: Fixed number of small issues: Colorpicker now gets correct initial value, Options in Select now get correct keys, removed Tabs tabTemplate prop because of a bigger bug.
581 | - 7d255a9: Changed open in new window button tooltip label for all occurrences.
582 | - 69a7a1f: Fixed NavLink label break if overflowing available space.
583 | - 873348c: new form properties: onSuccess, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage
584 | - 46bfe72: default style tweaks
585 |
586 | ## 0.9.57
587 |
588 | ### Patch Changes
589 |
590 | - 93a1e70: fix: NavPanel - use layoutCss
591 |
592 | ## 0.9.56
593 |
594 | ### Patch Changes
595 |
596 | - 9a3c3b6: feat: xmlui-devtools - start dialog animation from the click, use exit animation as well
597 |
598 | ## 0.9.55
599 |
600 | ### Patch Changes
601 |
602 | - d507ea8: Add AppWithCodeView component to display code and running app side-by-side
603 |
604 | ## 0.9.54
605 |
606 | ### Patch Changes
607 |
608 | - 2688a95: Change TreeDisplay theme variable defaults
609 |
610 | ## 0.9.53
611 |
612 | ### Patch Changes
613 |
614 | - c64fa25: Allow turning on/off heading anchors in appGlobals
615 | - 73c2c21: wip: code inspector buttons - label change, devtools - animation update
616 |
617 | ## 0.9.52
618 |
619 | ### Patch Changes
620 |
621 | - d079208: The Footer component no provides a themeable gap between its children.
622 | - 2a461d8: feat: NestedApp works with ApiInterceptor
623 | - ad6d81e: fix NestedApp apiUrl overwrite
624 | - f5b9f15: feat: xmlui-devtools - use it in a modal dialog
625 | - 88e4741: fix: Table columns do not allow (and indicate) sorting when bindTo is not set
626 | - 7af4b4e: change default borderColor
627 | - 851ae21: fix table styling
628 | - 7872ed0: Default theme variables changed for App, NestedApp, TableOfContents, and Text
629 | - bf00dce: enhance xmlui parser error tolerance, recovering from unclosed tags
630 | - 38180ce: merge xmlui-charts into core
631 |
632 | ## 0.9.51
633 |
634 | ### Patch Changes
635 |
636 | - ef7add9: Added theme variable for setting the horizontal alignment of the logo in the NavPanel.
637 | - ba2b5cd: Moved Drawer logo position to left.
638 | - 96273bf: fix: Slider - min/max value validation
639 | - 1a81bcf: fix: Markdown renders inline/block images correclty
640 |
641 | ## 0.9.50
642 |
643 | ### Patch Changes
644 |
645 | - e6c3b39: standalone usage: explicit codeBehind reference
646 | - 85031c8: Make the "marked" Text variant have lighter background color in dark mode.
647 | - d349036: Tweaked Search dropdown panel styles. Corrected Link component text and decoration hover and active colors
648 |
649 | ## 0.9.49
650 |
651 | ### Patch Changes
652 |
653 | - 9afd588: fix: XmluiCodeHighlighter - update token colorizing (light/dark tone)
654 | - Updated dependencies [3b5e820]
655 | - [email protected]
656 |
657 | ## 0.9.48
658 |
659 | ### Patch Changes
660 |
661 | - b5104b0: feat: Icon component now handles the click event
662 | - 30d5c58: feat: Badge supports theme variable names in colormap
663 | - 2e7f51f: change: the canSort property of Column defaults to true
664 | - 4dd6d7f: feat: chart extension included by default
665 | - f7f0571: fix theme component
666 |
667 | ## 0.9.47
668 |
669 | ### Patch Changes
670 |
671 | - a5bef5d: feat: add "inherit" variant to Text
672 | - ecc52d1: XMLUIExtensions namespace is optional
673 | - 4322e1b: fix: search context scope
674 | - 391927c: feat: add xmlui-tree codefence (displays a tree) to Markdown
675 |
676 | ## 0.9.46
677 |
678 | ### Patch Changes
679 |
680 | - e20e867: improve: DatePicker - change chevrons, Slider - design updates, change drawer icon's padding
681 | - 1f83bb2: Tables in Markdown scroll horizontally if there's not enough space.
682 | - c433512: Removed close button from TextBox if type="search". Move the Search package from internal, add arrow key selection in search results and add use it in navigation drawer on small screens.
683 | - bc68330: tweak search indexer
684 | - ef3d208: improve: DatePicker - update chevrons
685 |
686 | ## 0.9.45
687 |
688 | ### Patch Changes
689 |
690 | - de8d63c: Fixed small issues in CodeBlocks: adjusted row highlight length, substring highlight now works with '=' signs, corrected minor vertical positioning of code without syntax highlight, temporarily removed row numbering.
691 | - bd6d1b4: experimental: runtime search indexing
692 | - db5a5f4: fix: Allow APICall as an event handler
693 | - 69b4402: improve: docs - footer logo, FormItem - labelBreak
694 |
695 | ## 0.9.44
696 |
697 | ### Patch Changes
698 |
699 | - 3eab4a3: improve: design updates - devtools, playground, docs
700 | - 411cd34: fix: inbound links to headers in markdown (anchor scroll slightly off)
701 | - cdf96bb: fix: table inside flowlayout, horizontal scrollbar
702 | - 121c55c: Changed the background color of the `marked` Text variant.
703 | - f1092fe: Added emphasized substring highlights to CodeBlocks. Use it in markdown the following way: ```xmlui !/substr/
704 |
705 | ## 0.9.43
706 |
707 | ### Patch Changes
708 |
709 | - e2324bb: fix prefetchedContent handling
710 | - cacbf26: improve: AutoComplete - updating the selection logic, improved handling of readOnly and multi states, and removing unused or redundant code, improving tests
711 | - 05c8dfe: test: DatePicker - fix e2e "disabled state prevents interaction"
712 | - 42571db: test: create tests for the AutoComplete component, fix bugs
713 | - 05205c7: Add diagnostics to language server
714 | - 0a3d059: fix initial offset calculation for virtualized table/list
715 |
716 | ## 0.9.42
717 |
718 | ### Patch Changes
719 |
720 | - 1ab3881: ssr fixes, experimental prefetchedContent
721 | - 3d9729d: test: add tests for the DatePicker component
722 |
723 | ## 0.9.41
724 |
725 | ### Patch Changes
726 |
727 | - 42416ba: test change for CI #2
728 |
729 | ## 0.9.40
730 |
731 | ### Patch Changes
732 |
733 | - 34282f0: chage to test CI
734 |
735 | ## 0.9.39
736 |
737 | ### Patch Changes
738 |
739 | - b79ca46: improve: DatePicker - design update, XmluiCodeHighlighter - use layoutCss
740 | - bbec7a9: Added implicit code highlighter identification by Markdown if one is exposed under the name "codeHighlighter" in the appGlobals in config.
741 | - e67762b: Replaced Admonition emojis with icons
742 |
743 | ## 0.9.38
744 |
745 | ### Patch Changes
746 |
747 | - d314bad: msw update
748 |
749 | ## 0.9.37
750 |
751 | ### Patch Changes
752 |
753 | - 1c33896: ssr fixes
754 | - 8d662f3: Added anchor links for headings in markdown. Showing anchors is disabled by default, use the showHeadingAnchors prop on a Markdown component to use it.
755 |
756 | ## 0.9.36
757 |
758 | ### Patch Changes
759 |
760 | - 6b0f2c1: fix: itemWithLabel fills the available width if no other value is specified
761 |
762 | ## 0.9.35
763 |
764 | ### Patch Changes
765 |
766 | - ef3cd6e: Reworked NavLink & NavGroup styling: added disabled, hover & active states to button version
767 |
768 | ## 0.9.34
769 |
770 | ### Patch Changes
771 |
772 | - bae8280: export NestedApp component
773 | - 415aa66: Added color palette colors for CodeBlock, vertical NavPanel now has fixed scrollbar gutter, fixed vertical collapsed icon for NavGroup.
774 |
775 | ## 0.9.33
776 |
777 | ### Patch Changes
778 |
779 | - dabeb53: Fixed NavPanel background color
780 |
781 | ## 0.9.32
782 |
783 | ### Patch Changes
784 |
785 | - 4019d82: xmlui-playground, new exports from xmlui
786 | - 450e1ee: feat: add aria-placeholder to Select component
787 |
788 | ## 0.9.31
789 |
790 | ### Patch Changes
791 |
792 | - ed53215: test release
793 | - ed53215: another testing
794 |
795 | ## 0.9.30
796 |
797 | ### Patch Changes
798 |
799 | - b0ae113: testing
800 |
801 | ## 0.9.29
802 |
803 | ### Patch Changes
804 |
805 | - f15c018: another testing
806 | - f15c018: testing
807 |
808 | ## 0.9.28
809 |
810 | ### Patch Changes
811 |
812 | - 421968b: testing
813 |
814 | ## 0.9.27
815 |
816 | ### Patch Changes
817 |
818 | - 99bba69: testing
819 |
820 | ## 0.9.26
821 |
822 | ### Patch Changes
823 |
824 | - bcf162c: testing changesets
825 |
```
--------------------------------------------------------------------------------
/docs/content/components/DateInput.md:
--------------------------------------------------------------------------------
```markdown
1 | # DateInput [#dateinput]
2 |
3 | `DateInput` provides a text-based date input interface for selecting single dates or date ranges, with direct keyboard input similar to TimeInput. It offers customizable formatting and validation options without dropdown calendars.
4 |
5 | **Key features:**
6 | - **Date format support**: Multiple date formats including MM/dd/yyyy, yyyy-MM-dd, and dd/MM/yyyy
7 | - **Direct input**: Keyboard-only date entry with input fields for day, month, and year
8 | - **Input validation**: Real-time validation with visual feedback for invalid dates
9 | - **Range support**: Single date selection (default) or date range selection
10 | - **Accessibility**: Full keyboard navigation and screen reader support
11 |
12 | ## Properties [#properties]
13 |
14 | ### `autoFocus` (default: false) [#autofocus-default-false]
15 |
16 | If this property is set to `true`, the component gets the focus automatically when displayed.
17 |
18 | ### `clearable` (default: false) [#clearable-default-false]
19 |
20 | Whether to show a clear button to reset the input
21 |
22 | When enabled, it displays a clear button that allows users to reset the date input back to its initial value. Enter a date in this app and then click the clear button:
23 |
24 | ```xmlui-pg copy display name="Example: clearable" /clearable/
25 | <App>
26 | <DateInput initialValue="05/25/2024" />
27 | <DateInput clearable="true" initialValue="05/25/2024" />
28 | </App>
29 | ```
30 |
31 | ### `clearIcon` [#clearicon]
32 |
33 | Icon name for the clear button
34 |
35 | ```xmlui-pg copy display name="Example: clearIcon" /clearIcon/
36 | <App>
37 | <DateInput initialValue="05/25/2024" clearable="true" clearIcon="trash" />
38 | </App>
39 | ```
40 |
41 | ### `clearToInitialValue` (default: true) [#cleartoinitialvalue-default-true]
42 |
43 | Whether clearing resets to initial value or null
44 |
45 | When `true`, the clear button resets the input to its initial value. When `false`, it clears the input completely.
46 |
47 | ```xmlui-pg copy display name="Example: clearToInitialValue"
48 | <App>
49 | <DateInput clearable="true" clearToInitialValue="true" initialValue="05/25/2024" />
50 | <DateInput clearable="true" clearToInitialValue="false" initialValue="05/25/2024" />
51 | </App>
52 | ```
53 |
54 | ### `dateFormat` (default: "MM/dd/yyyy") [#dateformat-default-mm-dd-yyyy]
55 |
56 | The format of the date displayed in the input field
57 |
58 | Available values: `MM/dd/yyyy` **(default)**, `MM-dd-yyyy`, `yyyy/MM/dd`, `yyyy-MM-dd`, `dd/MM/yyyy`, `dd-MM-yyyy`, `yyyyMMdd`, `MMddyyyy`
59 |
60 | The `dateFormat` prop controls how dates are displayed and entered. Different formats change the order and separators of day, month, and year fields.
61 |
62 | > [!NOTE] Regardless of the dateFormat, the year input field always accepts and displays 4-digit years. When entering a 2-digit year, it will be automatically normalized to a 4-digit year.
63 |
64 | | Format | Description | Example |
65 | | :----- | :---------- | :------ |
66 | | `MM/dd/yyyy` | US format with slashes | 05/25/2024 |
67 | | `MM-dd-yyyy` | US format with dashes | 05-25-2024 |
68 | | `yyyy/MM/dd` | ISO-like format with slashes | 2024/05/25 |
69 | | `yyyy-MM-dd` | ISO format with dashes | 2024-05-25 |
70 | | `dd/MM/yyyy` | European format with slashes | 25/05/2024 |
71 | | `dd-MM-yyyy` | European format with dashes | 25-05-2024 |
72 | | `yyyyMMdd` | Compact format without separators | 20240525 |
73 | | `MMddyyyy` | US compact format | 05252024 |
74 |
75 | ```xmlui-pg copy display name="Example: dateFormat"
76 | <App>
77 | <DateInput dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
78 | <DateInput dateFormat="yyyy-MM-dd" initialValue="2024-05-25" />
79 | <DateInput dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
80 | <DateInput dateFormat="yyyyMMdd" initialValue="20240525" />
81 | </App>
82 | ```
83 |
84 | ### `disabledDates` [#disableddates]
85 |
86 | An optional array of dates that are disabled (compatibility with DatePicker, not used in DateInput)
87 |
88 | ### `emptyCharacter` (default: "-") [#emptycharacter-default-]
89 |
90 | Character used to create placeholder text for empty input fields
91 |
92 | Character to use as placeholder for empty date values. If longer than 1 character, uses the first character. Defaults to '-'.
93 |
94 | ```xmlui-pg copy display name="Example: emptyCharacter"
95 | <App>
96 | <DateInput emptyCharacter="." />
97 | <DateInput emptyCharacter="*" />
98 | <DateInput emptyCharacter="abc" />
99 | </App>
100 | ```
101 |
102 | ### `enabled` (default: true) [#enabled-default-true]
103 |
104 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
105 |
106 | ```xmlui-pg copy display name="Example: enabled" height="120px"
107 | <App>
108 | <DateInput enabled="false" initialValue="05/25/2024" />
109 | </App>
110 | ```
111 |
112 | ### `endIcon` [#endicon]
113 |
114 | This property sets an optional icon to appear on the end (right side when the left-to-right direction is set) of the input.
115 |
116 | ### `endText` [#endtext]
117 |
118 | This property sets an optional text to appear on the end (right side when the left-to-right direction is set) of the input.
119 |
120 | ### `gap` [#gap]
121 |
122 | The gap between input elements
123 |
124 | ### `initialValue` [#initialvalue]
125 |
126 | This property sets the component's initial value.
127 |
128 | ```xmlui-pg copy display name="Example: initialValue" height="120px"
129 | <App>
130 | <DateInput initialValue="05/25/2024" />
131 | </App>
132 | ```
133 |
134 | ### `inline` (default: true) [#inline-default-true]
135 |
136 | Whether to display the date input inline (compatibility with DatePicker, always true for DateInput)
137 |
138 | ### `maxValue` [#maxvalue]
139 |
140 | The optional end date of the selectable date range. If not defined, the range allows any future dates.
141 |
142 | ### `minValue` [#minvalue]
143 |
144 | The optional start date of the selectable date range. If not defined, the range allows any dates in the past.
145 |
146 | ### `mode` (default: "single") [#mode-default-single]
147 |
148 | The mode of the date input (single or range)
149 |
150 | Available values: `single` **(default)**, `range`
151 |
152 | Available values:
153 |
154 | | Value | Description |
155 | | --- | --- |
156 | | `single` | Single date selection **(default)** |
157 | | `range` | Date range selection |
158 |
159 | ### `readOnly` (default: false) [#readonly-default-false]
160 |
161 | Set this property to `true` to disallow changing the component value.
162 |
163 | Makes the date input read-only. Users can see the value but cannot modify it.
164 |
165 | ```xmlui-pg copy display name="Example: readOnly" height="120px"
166 | <App>
167 | <DateInput readOnly="true" initialValue="05/25/2024" />
168 | </App>
169 | ```
170 |
171 | ### `required` (default: false) [#required-default-false]
172 |
173 | Whether the input is required
174 |
175 | Marks the date input as required for form validation.
176 |
177 | ```xmlui-pg copy display name="Example: required" height="120px"
178 | <App>
179 | <DateInput required="true" />
180 | </App>
181 | ```
182 |
183 | ### `showWeekNumber` (default: false) [#showweeknumber-default-false]
184 |
185 | Whether to show the week number (compatibility with DatePicker, not used in DateInput)
186 |
187 | ### `startIcon` [#starticon]
188 |
189 | This property sets an optional icon to appear at the start (left side when the left-to-right direction is set) of the input.
190 |
191 | ### `startText` [#starttext]
192 |
193 | This property sets an optional text to appear at the start (left side when the left-to-right direction is set) of the input.
194 |
195 | ### `validationStatus` (default: "none") [#validationstatus-default-none]
196 |
197 | This property allows you to set the validation status of the input component.
198 |
199 | Available values:
200 |
201 | | Value | Description |
202 | | --- | --- |
203 | | `valid` | Visual indicator for an input that is accepted |
204 | | `warning` | Visual indicator for an input that produced a warning |
205 | | `error` | Visual indicator for an input that produced an error |
206 |
207 | | Value | Description |
208 | | :-------- | :---------------------------------------------------- |
209 | | `valid` | Visual indicator for an input that is accepted |
210 | | `warning` | Visual indicator for an input that produced a warning |
211 | | `error` | Visual indicator for an input that produced an error |
212 |
213 | ```xmlui-pg copy display name="Example: validationStatus"
214 | <App>
215 | <DateInput validationStatus="valid" initialValue="05/25/2024" />
216 | <DateInput validationStatus="warning" initialValue="05/25/2024" />
217 | <DateInput validationStatus="error" initialValue="05/25/2024" />
218 | </App>
219 | ```
220 |
221 | ### `weekStartsOn` (default: 0) [#weekstartson-default-0]
222 |
223 | The first day of the week. 0 is Sunday, 1 is Monday, etc. (compatibility with DatePicker, not used in DateInput)
224 |
225 | Available values:
226 |
227 | | Value | Description |
228 | | --- | --- |
229 | | `0` | Sunday **(default)** |
230 | | `1` | Monday |
231 | | `2` | Tuesday |
232 | | `3` | Wednesday |
233 | | `4` | Thursday |
234 | | `5` | Friday |
235 | | `6` | Saturday |
236 |
237 | ## Events [#events]
238 |
239 | ### `didChange` [#didchange]
240 |
241 | This event is triggered when value of DateInput has changed.
242 |
243 | Fired when the date value changes. Receives the new date value as a parameter.
244 |
245 | > [!INFO] The date value changes when the edited input part (day, month, year) loses focus and contains a valid value.
246 |
247 | ```xmlui-pg copy {2} display name="Example: didChange" height="180px"
248 | <App var.selectedDate="No date selected">
249 | <Text value="{selectedDate}" />
250 | <DateInput
251 | dateFormat="yyyy-MM-dd"
252 | initialValue="2024-05-25"
253 | onDidChange="(date) => selectedDate = date" />
254 | </App>
255 | ```
256 |
257 | ### `gotFocus` [#gotfocus]
258 |
259 | This event is triggered when the DateInput has received the focus.
260 |
261 | Fired when the date input receives focus.
262 |
263 | ```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
264 | <App var.isFocused="{false}">
265 | <Text value="{isFocused
266 | ? 'DateInput focused' : 'DateInput lost focus'}"
267 | />
268 | <DateInput
269 | dateFormat="MM/dd/yyyy"
270 | onGotFocus="isFocused = true"
271 | onLostFocus="isFocused = false"
272 | initialValue="05/25/2024"
273 | />
274 | </App>
275 | ```
276 |
277 | ### `lostFocus` [#lostfocus]
278 |
279 | This event is triggered when the DateInput has lost the focus.
280 |
281 | ## Exposed Methods [#exposed-methods]
282 |
283 | ### `focus` [#focus]
284 |
285 | Focus the DateInput component.
286 |
287 | **Signature**: `focus(): void`
288 |
289 | ### `isoValue` [#isovalue]
290 |
291 | Get the current date value formatted in ISO standard (YYYY-MM-DD) format, suitable for JSON serialization.
292 |
293 | **Signature**: `isoValue(): string | null`
294 |
295 | ### `setValue` [#setvalue]
296 |
297 | This method sets the current value of the DateInput.
298 |
299 | **Signature**: `set value(value: any): void`
300 |
301 | - `value`: The new value to set for the date input.
302 |
303 | ```xmlui-pg copy {3, 9, 12} display name="Example: setValue"
304 | <App>
305 | <HStack>
306 | <Button
307 | label="Set Date to 05/25/2024"
308 | onClick="picker.setValue('05/25/2024')" />
309 | <Button
310 | label="Clear Date"
311 | onClick="picker.setValue('')" />
312 | </HStack>
313 | <DateInput id="picker" />
314 | </App>
315 | ```
316 |
317 | ### `value` [#value]
318 |
319 | You can query the component's value. If no value is set, it will retrieve `undefined`.
320 |
321 | **Signature**: `get value(): any`
322 |
323 | ## Parts [#parts]
324 |
325 | The component has some parts that can be styled through layout properties and theme variables separately:
326 |
327 | - **`clearButton`**: The button to clear the date input.
328 | - **`day`**: The day input field.
329 | - **`month`**: The month input field.
330 | - **`year`**: The year input field.
331 |
332 | ## Styling [#styling]
333 |
334 | ### Theme Variables [#theme-variables]
335 |
336 | | Variable | Default Value (Light) | Default Value (Dark) |
337 | | --- | --- | --- |
338 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput--disabled | *none* | *none* |
339 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput--hover | *none* | *none* |
340 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-default | *none* | *none* |
341 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-default--focus | *none* | *none* |
342 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-default--hover | *none* | *none* |
343 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-error | *none* | *none* |
344 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-error--focus | *none* | *none* |
345 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-error--hover | *none* | *none* |
346 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-success | *none* | *none* |
347 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-success--focus | *none* | *none* |
348 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-success--hover | *none* | *none* |
349 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-warning | *none* | *none* |
350 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-warning--focus | *none* | *none* |
351 | | [backgroundColor](../styles-and-themes/common-units/#color)-DateInput-warning--hover | *none* | *none* |
352 | | [backgroundColor](../styles-and-themes/common-units/#color)-input-DateInput-invalid | rgba(220, 53, 69, 0.15) | rgba(220, 53, 69, 0.15) |
353 | | [border](../styles-and-themes/common-units/#border)-DateInput | *none* | *none* |
354 | | [borderBottom](../styles-and-themes/common-units/#border)-DateInput | *none* | *none* |
355 | | [borderBottomColor](../styles-and-themes/common-units/#color)-DateInput | *none* | *none* |
356 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-DateInput | *none* | *none* |
357 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
358 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput | *none* | *none* |
359 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput--disabled | *none* | *none* |
360 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-default | *none* | *none* |
361 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-default--focus | *none* | *none* |
362 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-default--hover | *none* | *none* |
363 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-error | *none* | *none* |
364 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-error--focus | *none* | *none* |
365 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-error--hover | *none* | *none* |
366 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-success | *none* | *none* |
367 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-success--focus | *none* | *none* |
368 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-success--hover | *none* | *none* |
369 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-warning | *none* | *none* |
370 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-warning--focus | *none* | *none* |
371 | | [borderColor](../styles-and-themes/common-units/#color)-DateInput-warning--hover | *none* | *none* |
372 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-DateInput | *none* | *none* |
373 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-DateInput | *none* | *none* |
374 | | [borderHorizontal](../styles-and-themes/common-units/#border)-DateInput | *none* | *none* |
375 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-DateInput | *none* | *none* |
376 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-DateInput | *none* | *none* |
377 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
378 | | [borderLeft](../styles-and-themes/common-units/#border)-DateInput | *none* | *none* |
379 | | [color](../styles-and-themes/common-units/#color)-DateInput | *none* | *none* |
380 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-DateInput | *none* | *none* |
381 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
382 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-button-DateInput | $borderRadius | $borderRadius |
383 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-DateInput-default | *none* | *none* |
384 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-DateInput-error | *none* | *none* |
385 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-DateInput-success | *none* | *none* |
386 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-DateInput-warning | *none* | *none* |
387 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-input-DateInput | $borderRadius | $borderRadius |
388 | | [borderRight](../styles-and-themes/common-units/#border)-DateInput | *none* | *none* |
389 | | [color](../styles-and-themes/common-units/#color)-DateInput | *none* | *none* |
390 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-DateInput | *none* | *none* |
391 | | [borderRightWidth](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
392 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-DateInput | *none* | *none* |
393 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-DateInput | *none* | *none* |
394 | | [borderStyle](../styles-and-themes/common-units/#border-style)-DateInput | *none* | *none* |
395 | | [borderStyle](../styles-and-themes/common-units/#border-style)-DateInput-default | *none* | *none* |
396 | | [borderStyle](../styles-and-themes/common-units/#border-style)-DateInput-error | *none* | *none* |
397 | | [borderStyle](../styles-and-themes/common-units/#border-style)-DateInput-success | *none* | *none* |
398 | | [borderStyle](../styles-and-themes/common-units/#border-style)-DateInput-warning | *none* | *none* |
399 | | [borderTop](../styles-and-themes/common-units/#border)-DateInput | *none* | *none* |
400 | | [borderTopColor](../styles-and-themes/common-units/#color)-DateInput | *none* | *none* |
401 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-DateInput | *none* | *none* |
402 | | [borderTopWidth](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
403 | | [borderHorizontal](../styles-and-themes/common-units/#border)-DateInput | *none* | *none* |
404 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-DateInput | *none* | *none* |
405 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-DateInput | *none* | *none* |
406 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
407 | | [borderWidth](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
408 | | [borderWidth](../styles-and-themes/common-units/#size)-DateInput-default | *none* | *none* |
409 | | [borderWidth](../styles-and-themes/common-units/#size)-DateInput-error | *none* | *none* |
410 | | [borderWidth](../styles-and-themes/common-units/#size)-DateInput-success | *none* | *none* |
411 | | [borderWidth](../styles-and-themes/common-units/#size)-DateInput-warning | *none* | *none* |
412 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-default | *none* | *none* |
413 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-default--focus | *none* | *none* |
414 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-default--hover | *none* | *none* |
415 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-error | *none* | *none* |
416 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-error--focus | *none* | *none* |
417 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-error--hover | *none* | *none* |
418 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-success | *none* | *none* |
419 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-success--focus | *none* | *none* |
420 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-success--hover | *none* | *none* |
421 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-warning | *none* | *none* |
422 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-warning--focus | *none* | *none* |
423 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-DateInput-warning--hover | *none* | *none* |
424 | | [color](../styles-and-themes/common-units/#color)-adornment-DateInput-default | *none* | *none* |
425 | | [color](../styles-and-themes/common-units/#color)-adornment-DateInput-error | *none* | *none* |
426 | | [color](../styles-and-themes/common-units/#color)-adornment-DateInput-success | *none* | *none* |
427 | | [color](../styles-and-themes/common-units/#color)-adornment-DateInput-warning | *none* | *none* |
428 | | [color](../styles-and-themes/common-units/#color)-divider-DateInput | $textColor-secondary | $textColor-secondary |
429 | | disabledColor-button-DateInput | $textColor-disabled | $textColor-disabled |
430 | | [fontSize](../styles-and-themes/common-units/#size)-ampm-DateInput | inherit | inherit |
431 | | [fontSize](../styles-and-themes/common-units/#size)-input-DateInput | inherit | inherit |
432 | | [gap](../styles-and-themes/common-units/#size)-adornment-DateInput | *none* | *none* |
433 | | hoverColor-button-DateInput | $color-surface-800 | $color-surface-800 |
434 | | [margin](../styles-and-themes/common-units/#size)-input-DateInput | *none* | *none* |
435 | | [minWidth](../styles-and-themes/common-units/#size)-ampm-DateInput | 2em | 2em |
436 | | [minWidth](../styles-and-themes/common-units/#size)-input-DateInput | 0.54em | 0.54em |
437 | | [opacity](../styles-and-themes/common-units/#opacity)-DateInput--disabled | *none* | *none* |
438 | | [outlineColor](../styles-and-themes/common-units/#color)-button-DateInput--focused | $color-accent-500 | $color-accent-500 |
439 | | [outlineColor](../styles-and-themes/common-units/#color)-DateInput-default--focus | *none* | *none* |
440 | | [outlineColor](../styles-and-themes/common-units/#color)-DateInput-error--focus | *none* | *none* |
441 | | [outlineColor](../styles-and-themes/common-units/#color)-DateInput-success--focus | *none* | *none* |
442 | | [outlineColor](../styles-and-themes/common-units/#color)-DateInput-warning--focus | *none* | *none* |
443 | | [outlineOffset](../styles-and-themes/common-units/#size)-button-DateInput--focused | 2px | 2px |
444 | | [outlineOffset](../styles-and-themes/common-units/#size)-DateInput-default--focus | *none* | *none* |
445 | | [outlineOffset](../styles-and-themes/common-units/#size)-DateInput-error--focus | *none* | *none* |
446 | | [outlineOffset](../styles-and-themes/common-units/#size)-DateInput-success--focus | *none* | *none* |
447 | | [outlineOffset](../styles-and-themes/common-units/#size)-DateInput-warning--focus | *none* | *none* |
448 | | [outlineStyle](../styles-and-themes/common-units/#border)-DateInput-default--focus | *none* | *none* |
449 | | [outlineStyle](../styles-and-themes/common-units/#border)-DateInput-error--focus | *none* | *none* |
450 | | [outlineStyle](../styles-and-themes/common-units/#border)-DateInput-success--focus | *none* | *none* |
451 | | [outlineStyle](../styles-and-themes/common-units/#border)-DateInput-warning--focus | *none* | *none* |
452 | | [outlineWidth](../styles-and-themes/common-units/#size)-button-DateInput--focused | 2px | 2px |
453 | | [outlineWidth](../styles-and-themes/common-units/#size)-DateInput-default--focus | *none* | *none* |
454 | | [outlineWidth](../styles-and-themes/common-units/#size)-DateInput-error--focus | *none* | *none* |
455 | | [outlineWidth](../styles-and-themes/common-units/#size)-DateInput-success--focus | *none* | *none* |
456 | | [outlineWidth](../styles-and-themes/common-units/#size)-DateInput-warning--focus | *none* | *none* |
457 | | [padding](../styles-and-themes/common-units/#size)-button-DateInput | 4px 6px | 4px 6px |
458 | | [padding](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
459 | | [padding](../styles-and-themes/common-units/#size)-input-DateInput | 0 2px | 0 2px |
460 | | [paddingBottom](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
461 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-DateInput | $space-2 | $space-2 |
462 | | [paddingLeft](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
463 | | [paddingRight](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
464 | | [paddingTop](../styles-and-themes/common-units/#size)-DateInput | *none* | *none* |
465 | | [paddingVertical](../styles-and-themes/common-units/#size)-DateInput | $space-2 | $space-2 |
466 | | spacing-divider-DateInput | 1px 0 | 1px 0 |
467 | | [textAlign](../styles-and-themes/common-units/#text-align)-input-DateInput | center | center |
468 | | [textColor](../styles-and-themes/common-units/#color)-DateInput--disabled | *none* | *none* |
469 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-default | *none* | *none* |
470 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-default--focus | *none* | *none* |
471 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-default--hover | *none* | *none* |
472 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-error | *none* | *none* |
473 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-error--focus | *none* | *none* |
474 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-error--hover | *none* | *none* |
475 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-success | *none* | *none* |
476 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-success--focus | *none* | *none* |
477 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-success--hover | *none* | *none* |
478 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-warning | *none* | *none* |
479 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-warning--focus | *none* | *none* |
480 | | [textColor](../styles-and-themes/common-units/#color)-DateInput-warning--hover | *none* | *none* |
481 | | [transition](../styles-and-themes/common-units/#transition)-background-DateInput | *none* | *none* |
482 | | [width](../styles-and-themes/common-units/#size)-input-DateInput | 1.8em | 1.8em |
483 |
```