Adding upstream version 4.0.4.

Signed-off-by: Daniel Baumann <daniel@debian.org>

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: Continuous Integration
+
+on:
+  pull_request:
+  push:
+    branches:
+      - "main"
+
+env:
+  PYTEST_ADDOPTS: "--color=yes"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Install a specific version of uv
+        uses: astral-sh/setup-uv@v5
+        with:
+          version: "0.6.3"
+          enable-cache: true
+          
+      - name: Set up Python
+        run: uv python install 3.9
+        
+      - name: Install Dependencies
+        run: uv sync --all-extras --dev
+        
+      - name: Run Tests
+        run: |
+          uv run pytest tests/ 

.gitignore

@@ -0,0 +1,163 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+.idea/
+
+snapshot_report.html
+sandbox/

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "python.testing.pytestArgs": [
+        "tests"
+    ],
+    "python.testing.unittestEnabled": false,
+    "python.testing.pytestEnabled": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Darren Burns
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,285 @@
+# textual-autocomplete
+
+A simple autocomplete dropdown library for [Textual](https://github.com/textualize/textual) `Input` widgets.
+
+![autocomplete-readme-header](https://github.com/user-attachments/assets/eda6f78a-fbaa-4a5b-ac1d-223e41f6eabb)
+
+Compatible with **Textual 2.0 and above**.
+
+## Installation
+
+I recommend using [uv](https://docs.astral.sh/uv/) to manage your dependencies and install `textual-autocomplete`:
+
+```bash
+uv add textual-autocomplete
+```
+
+If you prefer `pip`, `poetry`, or something else, those will work too.
+
+## Quick Start
+
+Here's the simplest possible way to add autocomplete to your Textual app:
+
+```python
+from textual.app import App, ComposeResult
+from textual.widgets import Input
+from textual_autocomplete import AutoComplete, DropdownItem
+
+class ColorFinder(App):
+    def compose(self) -> ComposeResult:
+        # Create a standard Textual input
+        text_input = Input(placeholder="Type a color...")
+        yield text_input
+
+        # Add an autocomplete to the same screen, and pass in the input widget.
+        yield AutoComplete(
+            text_input,  # Target input widget
+            candidates=["Red", "Green", "Blue", "Yellow", "Purple", "Orange"]
+        )
+
+if __name__ == "__main__":
+    app = ColorFinder()
+    app.run()
+```
+
+That's it! As you type in the input field, matching options will appear in a dropdown below.
+
+## Core Features
+
+- 🔍 **Fuzzy matching** - Find matches even with typos
+- ⌨️ **Keyboard navigation** - Arrow keys, Tab, Enter, and Escape
+- 🎨 **Rich styling options** - Customizable highlighting and appearance
+- 📝 **Dynamic content** - Supply items as a list or from a callback function
+- 🔍 **Path completions** - Built-in support for filesystem path completions
+
+## Examples
+
+### With Left Metadata Column
+
+Add a metadata column (like icons) to provide additional context.
+These columns are display-only, and do not influence the search process.
+
+```python
+from textual.app import App, ComposeResult
+from textual.widgets import Input
+from textual_autocomplete import AutoComplete, DropdownItem
+
+# Create dropdown items with a left metadata column.
+ITEMS = [
+    DropdownItem(main="Python", prefix="🐍"),
+    DropdownItem(main="JavaScript", prefix="📜"),
+    DropdownItem(main="TypeScript", prefix="🔷"),
+    DropdownItem(main="Java", prefix="☕"),
+]
+
+class LanguageSearcher(App):
+    def compose(self) -> ComposeResult:
+        text_input = Input(placeholder="Programming language...")
+        yield text_input
+        yield AutoComplete(text_input, candidates=ITEMS)
+
+if __name__ == "__main__":
+    app = LanguageSearcher()
+    app.run()
+```
+
+### Styled Two-Column Layout
+
+Add rich styling to your metadata columns using [Textual markup](https://textual.textualize.io/guide/content/#markup).
+
+```python
+from textual.app import App, ComposeResult
+from textual.content import Content
+from textual.widgets import Input, Label
+from textual_autocomplete import AutoComplete, DropdownItem
+
+# Languages with their popularity rank
+LANGUAGES_WITH_RANK = [
+    (1, "Python"),
+    (2, "JavaScript"),
+    (3, "Java"),
+    (4, "C++"),
+    (5, "TypeScript"),
+    (6, "Go"),
+    (7, "Ruby"),
+    (8, "Rust"),
+]
+
+# Create dropdown items with styled rank in prefix
+CANDIDATES = [
+    DropdownItem(
+        language,  # Main text to be completed
+        prefix=Content.from_markup(
+            f"[$text-primary on $primary-muted] {rank:>2} "
+        ),  # Prefix with styled rank
+    )
+    for rank, language in LANGUAGES_WITH_RANK
+]
+
+class LanguageSearcher(App):
+    def compose(self) -> ComposeResult:
+        yield Label("Start typing a programming language:")
+        text_input = Input(placeholder="Type here...")
+        yield text_input
+        yield AutoComplete(target=text_input, candidates=CANDIDATES)
+
+if __name__ == "__main__":
+    app = LanguageSearcher()
+    app.run()
+```
+
+## Keyboard Controls
+
+- **↑/↓** - Navigate through options
+- **↓** - Summon the dropdown
+- **Enter/Tab** - Complete the selected option
+- **Escape** - Hide dropdown
+
+## Styling
+
+The dropdown can be styled using Textual CSS:
+
+```css
+    AutoComplete {
+        /* Customize the dropdown */
+        & AutoCompleteList {
+            max-height: 6;  /* The number of lines before scrollbars appear */
+            color: $text-primary;  /* The color of the text */
+            background: $primary-muted;  /* The background color of the dropdown */
+            border-left: wide $success;  /* The color of the left border */
+        }
+
+        /* Customize the matching substring highlighting */
+        & .autocomplete--highlight-match {
+            color: $text-accent;
+            text-style: bold;
+        }
+
+        /* Customize the text the cursor is over */
+        & .option-list--option-highlighted {
+            color: $text-success;
+            background: $error 50%;  /* 50% opacity, blending into background */
+            text-style: italic;  
+        }
+    }
+```
+
+Here's what that looks like when applied:
+
+<img width="226" alt="image" src="https://github.com/user-attachments/assets/3fae3ecf-fdd3-4ff5-ac37-7ef3088c596e" />
+
+By using Textual CSS like in the example above, you can ensure the shades of colors remain
+consistent across different themes. Here's the same dropdown with the Textual app theme switched to `gruvbox`:
+
+<img width="234" alt="image" src="https://github.com/user-attachments/assets/6bc4804d-7a4b-41ab-bba9-5745d87648b9" />
+
+### Styling the prefix
+
+You can style the prefix using Textual Content markup.
+
+```python
+DropdownItem(
+    main="Python",
+    prefix=Content.from_markup(
+        "[$text-success on $success-muted] 🐍"
+    ),
+)
+```
+
+## Completing Paths
+
+`textual-autocomplete` includes a `PathAutoComplete` widget that can be used to autocomplete filesystem paths.
+
+```python
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Button, Input, Label
+
+from textual_autocomplete import PathAutoComplete
+
+class FileSystemPathCompletions(App[None]):
+    def compose(self) -> ComposeResult:
+        yield Label("Choose a file!", id="label")
+        input_widget = Input(placeholder="Enter a path...")
+        yield input_widget
+        yield PathAutoComplete(target=input_widget, path="../textual")
+
+
+if __name__ == "__main__":
+    app = FileSystemPathCompletions()
+    app.run()
+```
+
+Here's what that looks like in action:
+
+https://github.com/user-attachments/assets/25b80e34-0a35-4962-9024-f2dab7666689
+
+`PathAutoComplete` has a bunch of parameters that can be used to customize the behavior - check the docstring for more details. It'll also cache directory contents after reading them once - but you can clear the cache if you need to using the `clear_directory_cache` method.
+
+## Dynamic Data with Callbacks
+
+Instead of supplying a static list of candidates, you can supply a callback function which returns a list of `DropdownItem` (candidates) that will be searched against.
+
+This callback function will be called anytime the text in the target input widget changes or the cursor position changes (and since the cursor position changes when the user inserts text, you can expect 2 calls to this function for most keystrokes - cache accordingly if this is a problem).
+
+The app below displays the length of the text in the input widget in the prefix of the dropdown items.
+
+```python
+from textual.app import App, ComposeResult
+from textual.widgets import Input
+
+from textual_autocomplete import AutoComplete
+from textual_autocomplete._autocomplete import DropdownItem, TargetState
+
+
+class DynamicDataApp(App[None]):
+    def compose(self) -> ComposeResult:
+        input_widget = Input()
+        yield input_widget
+        yield AutoComplete(input_widget, candidates=self.candidates_callback)
+
+    def candidates_callback(self, state: TargetState) -> list[DropdownItem]:
+        left = len(state.text)
+        return [
+            DropdownItem(item, prefix=f"{left:>2} ")
+            for item in [
+                "Apple",
+                "Banana",
+                "Cherry",
+                "Orange",
+                "Pineapple",
+                "Strawberry",
+                "Watermelon",
+            ]
+        ]
+
+
+if __name__ == "__main__":
+    app = DynamicDataApp()
+    app.run()
+```
+
+Notice the count displayed in the prefix increment and decrement based on the character count in the input.
+
+![Screen Recording 2025-03-18 at 18 26 42](https://github.com/user-attachments/assets/ca0e039b-8ae0-48ac-ba96-9ec936720ded)
+
+## Customizing Behavior
+
+If you need custom behavior, `AutoComplete` can be subclassed.
+
+A good example of how to subclass and customize behavior is the `PathAutoComplete` widget, which is a subclass of `AutoComplete`.
+
+Some methods you may want to be aware of which you can override:
+
+- `get_candidates`: Return a list of `DropdownItem` objects - called each time the input changes or the cursor position changes. Note that if you're overriding this in a subclass, you'll need to make sure that the `get_candidates` parameter passed into the `AutoComplete` constructor is set to `None` - this tells `textual-autocomplete` to use the subclassed method instead of the default.
+- `get_search_string`: The string that will be used to filter the candidates. You may wish to only use a portion of the input text to filter the candidates rather than the entire text.
+- `apply_completion`: Apply the completion to the target input widget. Receives the value the user selected from the dropdown and updates the `Input` directly using it's API.
+- `post_completion`: Called when a completion is selected. Called immediately after `apply_completion`. The default behaviour is just to hide the completion dropdown (after performing a completion, we want to immediately hide the dropdown in the default case).
+
+## More Examples
+
+Check out the [examples directory](./examples) for more runnable examples.
+
+## Contributing
+
+Contributions are welcome! Feel free to open issues or submit pull requests on GitHub.

examples/_headers.py

@@ -0,0 +1,767 @@
+from dataclasses import dataclass
+
+
+@dataclass
+class Header:
+    name: str
+    example: str
+    description: str
+
+
+headers = [
+    {
+        "section": "Authentication",
+        "name": "WWW-Authenticate",
+        "description": "Defines the authentication method that should be used to access a resource.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/WWW-Authenticate",
+    },
+    {
+        "section": "Authentication",
+        "name": "Authorization",
+        "description": "Contains the credentials to authenticate a user-agent with a server.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Authorization",
+    },
+    {
+        "section": "Authentication",
+        "name": "Proxy-Authenticate",
+        "description": "Defines the authentication method that should be used to access a resource behind a proxy server.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Proxy-Authenticate",
+    },
+    {
+        "section": "Authentication",
+        "name": "Proxy-Authorization",
+        "description": "Contains the credentials to authenticate a user agent with a proxy server.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Proxy-Authorization",
+    },
+    {
+        "section": "Caching",
+        "name": "Age",
+        "description": "The time, in seconds, that the object has been in a proxy cache.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Age",
+    },
+    {
+        "section": "Caching",
+        "name": "Cache-Control",
+        "description": "Directives for caching mechanisms in both requests and responses.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Cache-Control",
+    },
+    {
+        "section": "Caching",
+        "name": "Clear-Site-Data",
+        "description": "Clears browsing data (e.g. cookies, storage, cache) associated with the requesting website.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Clear-Site-Data",
+    },
+    {
+        "section": "Caching",
+        "name": "Expires",
+        "description": "The date/time after which the response is considered stale.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Expires",
+    },
+    {
+        "section": "Caching",
+        "name": "No-Vary-Search",
+        "description": "Specifies a set of rules that define how a URL's query parameters will affect cache matching. These rules dictate whether the same URL with different URL parameters should be saved as separate browser cache entries.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/No-Vary-Search",
+    },
+    {
+        "section": "Conditionals",
+        "name": "Last-Modified",
+        "description": "The last modification date of the resource, used to compare several versions of the same resource. It is less accurate than ETag, but easier to calculate in some environments. Conditional requests using If-Modified-Since and If-Unmodified-Since use this value to change the behavior of the request.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Last-Modified",
+    },
+    {
+        "section": "Conditionals",
+        "name": "ETag",
+        "description": "A unique string identifying the version of the resource. Conditional requests using If-Match and If-None-Match use this value to change the behavior of the request.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/ETag",
+    },
+    {
+        "section": "Conditionals",
+        "name": "If-Match",
+        "description": "Makes the request conditional, and applies the method only if the stored resource matches one of the given ETags.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/If-Match",
+    },
+    {
+        "section": "Conditionals",
+        "name": "If-None-Match",
+        "description": "Makes the request conditional, and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent uploading a new resource when one already exists.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/If-None-Match",
+    },
+    {
+        "section": "Conditionals",
+        "name": "If-Modified-Since",
+        "description": "Makes the request conditional, and expects the resource to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/If-Modified-Since",
+    },
+    {
+        "section": "Conditionals",
+        "name": "If-Unmodified-Since",
+        "description": "Makes the request conditional, and expects the resource to be transmitted only if it has not been modified after the given date. This ensures the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/If-Unmodified-Since",
+    },
+    {
+        "section": "Conditionals",
+        "name": "Vary",
+        "description": "Determines how to match request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Vary",
+    },
+    {
+        "section": "Connection management",
+        "name": "Connection",
+        "description": "Controls whether the network connection stays open after the current transaction finishes.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Connection",
+    },
+    {
+        "section": "Connection management",
+        "name": "Keep-Alive",
+        "description": "Controls how long a persistent connection should stay open.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Keep-Alive",
+    },
+    {
+        "section": "Content negotiation",
+        "name": "Accept",
+        "description": "Informs the server about the types of data that can be sent back.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Accept",
+    },
+    {
+        "section": "Content negotiation",
+        "name": "Accept-Encoding",
+        "description": "The encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Accept-Encoding",
+    },
+    {
+        "section": "Content negotiation",
+        "name": "Accept-Language",
+        "description": "Informs the server about the human language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language from a dropdown).",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Accept-Language",
+    },
+    {
+        "section": "Controls",
+        "name": "Expect",
+        "description": "Indicates expectations that need to be fulfilled by the server to properly handle the request.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Expect",
+    },
+    {
+        "section": "Controls",
+        "name": "Max-Forwards",
+        "description": "When using TRACE, indicates the maximum number of hops the request can do before being reflected to the sender.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Max-Forwards",
+    },
+    {
+        "section": "Cookies",
+        "name": "Cookie",
+        "description": "Contains stored HTTP cookies previously sent by the server with the Set-Cookie header.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Cookie",
+    },
+    {
+        "section": "Cookies",
+        "name": "Set-Cookie",
+        "description": "Send cookies from the server to the user-agent.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Set-Cookie",
+    },
+    {
+        "section": "CORS",
+        "name": "Access-Control-Allow-Credentials",
+        "description": "Indicates whether the response to the request can be exposed when the credentials flag is true.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials",
+    },
+    {
+        "section": "CORS",
+        "name": "Access-Control-Allow-Headers",
+        "description": "Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers",
+    },
+    {
+        "section": "CORS",
+        "name": "Access-Control-Allow-Methods",
+        "description": "Specifies the methods allowed when accessing the resource in response to a preflight request.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods",
+    },
+    {
+        "section": "CORS",
+        "name": "Access-Control-Allow-Origin",
+        "description": "Indicates whether the response can be shared.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin",
+    },
+    {
+        "section": "CORS",
+        "name": "Access-Control-Expose-Headers",
+        "description": "Indicates which headers can be exposed as part of the response by listing their names.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers",
+    },
+    {
+        "section": "CORS",
+        "name": "Access-Control-Max-Age",
+        "description": "Indicates how long the results of a preflight request can be cached.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age",
+    },
+    {
+        "section": "CORS",
+        "name": "Access-Control-Request-Headers",
+        "description": "Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Access-Control-Request-Headers",
+    },
+    {
+        "section": "CORS",
+        "name": "Access-Control-Request-Method",
+        "description": "Used when issuing a preflight request to let the server know which HTTP method will be used when the actual request is made.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Access-Control-Request-Method",
+    },
+    {
+        "section": "CORS",
+        "name": "Origin",
+        "description": "Indicates where a fetch originates from.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Origin",
+    },
+    {
+        "section": "CORS",
+        "name": "Timing-Allow-Origin",
+        "description": "Specifies origins that are allowed to see values of attributes retrieved via features of the Resource Timing API, which would otherwise be reported as zero due to cross-origin restrictions.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Timing-Allow-Origin",
+    },
+    {
+        "section": "Downloads",
+        "name": "Content-Disposition",
+        "description": 'Indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the browser should present a "Save As" dialog.',
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Disposition",
+    },
+    {
+        "section": "Message body information",
+        "name": "Content-Length",
+        "description": "The size of the resource, in decimal number of bytes.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Length",
+    },
+    {
+        "section": "Message body information",
+        "name": "Content-Type",
+        "description": "Indicates the media type of the resource.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Type",
+    },
+    {
+        "section": "Message body information",
+        "name": "Content-Encoding",
+        "description": "Used to specify the compression algorithm.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Encoding",
+    },
+    {
+        "section": "Message body information",
+        "name": "Content-Language",
+        "description": "Describes the human language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Language",
+    },
+    {
+        "section": "Message body information",
+        "name": "Content-Location",
+        "description": "Indicates an alternate location for the returned data.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Location",
+    },
+    {
+        "section": "Proxies",
+        "name": "Forwarded",
+        "description": "Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Forwarded",
+    },
+    {
+        "section": "Proxies",
+        "name": "Via",
+        "description": "Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Via",
+    },
+    {
+        "section": "Redirects",
+        "name": "Location",
+        "description": "Indicates the URL to redirect a page to.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Location",
+    },
+    {
+        "section": "Request context",
+        "name": "From",
+        "description": "Contains an Internet email address for a human user who controls the requesting user agent.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/From",
+    },
+    {
+        "section": "Request context",
+        "name": "Host",
+        "description": "Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Host",
+    },
+    {
+        "section": "Request context",
+        "name": "Referer",
+        "description": "The address of the previous web page from which a link to the currently requested page was followed.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Referer",
+    },
+    {
+        "section": "Request context",
+        "name": "Referrer-Policy",
+        "description": "Governs which referrer information sent in the Referer header should be included with requests made.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Referrer-Policy",
+    },
+    {
+        "section": "Request context",
+        "name": "User-Agent",
+        "description": "Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/User-Agent",
+    },
+    {
+        "section": "Response context",
+        "name": "Allow",
+        "description": "Lists the set of HTTP request methods supported by a resource.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Allow",
+    },
+    {
+        "section": "Response context",
+        "name": "Server",
+        "description": "Contains information about the software used by the origin server to handle the request.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Server",
+    },
+    {
+        "section": "Range requests",
+        "name": "Accept-Ranges",
+        "description": "Indicates if the server supports range requests, and if so in which unit the range can be expressed.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Accept-Ranges",
+    },
+    {
+        "section": "Range requests",
+        "name": "Range",
+        "description": "Indicates the part of a document that the server should return.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Range",
+    },
+    {
+        "section": "Range requests",
+        "name": "If-Range",
+        "description": "Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/If-Range",
+    },
+    {
+        "section": "Range requests",
+        "name": "Content-Range",
+        "description": "Indicates where in a full body message a partial message belongs.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Range",
+    },
+    {
+        "section": "Security",
+        "name": "Cross-Origin-Embedder-Policy",
+        "description": "Allows a server to declare an embedder policy for a given document.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy",
+    },
+    {
+        "section": "Security",
+        "name": "Cross-Origin-Opener-Policy",
+        "description": "Prevents other domains from opening/controlling a window.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy",
+    },
+    {
+        "section": "Security",
+        "name": "Cross-Origin-Resource-Policy",
+        "description": "Prevents other domains from reading the response of the resources to which this header is applied. See also CORP explainer article.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Cross-Origin-Resource-Policy",
+    },
+    {
+        "section": "Security",
+        "name": "Content-Security-Policy",
+        "description": "Controls resources the user agent is allowed to load for a given page.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Security-Policy",
+    },
+    {
+        "section": "Security",
+        "name": "Content-Security-Policy-Report-Only",
+        "description": "Allows web developers to experiment with policies by monitoring, but not enforcing, their effects. These violation reports consist of JSON documents sent via an HTTP POST request to the specified URI.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only",
+    },
+    {
+        "section": "Security",
+        "name": "Permissions-Policy",
+        "description": "Provides a mechanism to allow and deny the use of browser features in a website's own frame, and in <iframe>s that it embeds.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Permissions-Policy",
+    },
+    {
+        "section": "Security",
+        "name": "Strict-Transport-Security",
+        "description": "Force communication using HTTPS instead of HTTP.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security",
+    },
+    {
+        "section": "Security",
+        "name": "Upgrade-Insecure-Requests",
+        "description": "Sends a signal to the server expressing the client's preference for an encrypted and authenticated response, and that it can successfully handle the upgrade-insecure-requests directive.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Upgrade-Insecure-Requests",
+    },
+    {
+        "section": "Security",
+        "name": "X-Content-Type-Options",
+        "description": "Disables MIME sniffing and forces browser to use the type given in Content-Type.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options",
+    },
+    {
+        "section": "Security",
+        "name": "X-Frame-Options",
+        "description": "Indicates whether a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
+    },
+    {
+        "section": "Security",
+        "name": "X-XSS-Protection",
+        "description": "Enables cross-site scripting filtering.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-XSS-Protection",
+    },
+    {
+        "section": "Server-sent events",
+        "name": "NEL",
+        "description": "Defines a mechanism that enables developers to declare a network error reporting policy.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/NEL",
+    },
+    {
+        "section": "Transfer coding",
+        "name": "Transfer-Encoding",
+        "description": "Specifies the form of encoding used to safely transfer the resource to the user.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Transfer-Encoding",
+    },
+    {
+        "section": "Transfer coding",
+        "name": "TE",
+        "description": "Specifies the transfer encodings the user agent is willing to accept.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/TE",
+    },
+    {
+        "section": "Transfer coding",
+        "name": "Trailer",
+        "description": "Allows the sender to include additional fields at the end of chunked message.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Trailer",
+    },
+    {
+        "section": "Other",
+        "name": "Alt-Svc",
+        "description": "Used to list alternate ways to reach this service.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Alt-Svc",
+    },
+    {
+        "section": "Other",
+        "name": "Alt-Used",
+        "description": "Used to identify the alternative service in use.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Alt-Used",
+    },
+    {
+        "section": "Other",
+        "name": "Date",
+        "description": "Contains the date and time at which the message was originated.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Date",
+    },
+    {
+        "section": "Other",
+        "name": "Link",
+        "description": "This entity-header field provides a means for serializing one or more links in HTTP headers. It is semantically equivalent to the HTML <link> element.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Link",
+    },
+    {
+        "section": "Other",
+        "name": "Retry-After",
+        "description": "Indicates how long the user agent should wait before making a follow-up request.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Retry-After",
+    },
+    {
+        "section": "Other",
+        "name": "Server-Timing",
+        "description": "Communicates one or more metrics and descriptions for the given request-response cycle.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Server-Timing",
+    },
+    {
+        "section": "Other",
+        "name": "SourceMap",
+        "description": "Links generated code to a source map.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/SourceMap",
+    },
+    {
+        "section": "Other",
+        "name": "Upgrade",
+        "description": "This HTTP/1.1 (only) header can be used to upgrade an already established client/server connection to a different protocol (over the same transport protocol). For example, it can be used by a client to upgrade a connection from HTTP 1.1 to HTTP 2.0, or an HTTP or HTTPS connection into a WebSocket.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Upgrade",
+    },
+    {
+        "section": "Experimental",
+        "name": "Speculation-Rules",
+        "description": "Provides a list of URLs pointing to text resources containing speculation rule JSON definitions. When the response is an HTML document, these rules will be added to the document's speculation rule set.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Speculation-Rules",
+    },
+    {
+        "section": "Experimental",
+        "name": "Supports-Loading-Mode",
+        "description": "Set by a navigation target to opt-in to using various higher-risk loading modes. For example, cross-origin, same-site prerendering requires a Supports-Loading-Mode value of credentialed-prerender.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Supports-Loading-Mode",
+    },
+    {
+        "section": "Non-standard headers",
+        "name": "X-Forwarded-For",
+        "description": "Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-Forwarded-For",
+    },
+    {
+        "section": "Non-standard headers",
+        "name": "X-Forwarded-Host",
+        "description": "Identifies the original host requested that a client used to connect to your proxy or load balancer.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host",
+    },
+    {
+        "section": "Non-standard headers",
+        "name": "X-Forwarded-Proto",
+        "description": "Identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-Forwarded-Proto",
+    },
+    {
+        "section": "Non-standard headers",
+        "name": "X-DNS-Prefetch-Control",
+        "description": "Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control",
+    },
+    {
+        "section": "Deprecated headers",
+        "name": "Pragma",
+        "description": "Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the Cache-Control header is not yet present.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Pragma",
+    },
+    {
+        "section": "Deprecated headers",
+        "name": "Warning",
+        "description": "General warning information about possible problems.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Warning",
+    },
+    {
+        "section": "Redirects",
+        "name": "Refresh",
+        "description": 'Directs the browser to reload the page or redirect to another. Takes the same value as the meta element with http-equiv="refresh".',
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Refresh",
+    },
+    {
+        "section": "Security",
+        "name": "X-Permitted-Cross-Domain-Policies",
+        "description": "Specifies if a cross-domain policy file (crossdomain.xml) is allowed. The file may define a policy to grant clients, such as Adobe's Flash Player (now obsolete), Adobe Acrobat, Microsoft Silverlight (now obsolete), or Apache Flex, permission to handle data across domains that would otherwise be restricted due to the Same-Origin Policy. See the Cross-domain Policy File Specification for more information.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-Permitted-Cross-Domain-Policies",
+    },
+    {
+        "section": "Security",
+        "name": "X-Powered-By",
+        "description": "May be set by hosting environments or other frameworks and contains information about them while not providing any usefulness to the application or its visitors. Unset this header to avoid exposing potential vulnerabilities.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-Powered-By",
+    },
+    {
+        "section": "Server-sent events",
+        "name": "Report-To",
+        "description": "Used to specify a server endpoint for the browser to send warning and error reports to.",
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/Report-To",
+    },
+    {
+        "section": "Experimental headers",
+        "name": "Origin-Isolation",
+        "description": "Provides a mechanism to allow web applications to isolate their origins.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Origin-Isolation",
+    },
+    {
+        "section": "Experimental headers",
+        "name": "Accept-Push-Policy",
+        "description": "A client can express the desired push policy for a request by sending an Accept-Push-Policy header field in the request.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Accept-Push-Policy",
+    },
+    {
+        "section": "Experimental headers",
+        "name": "Accept-Signature",
+        "description": "A client can send the Accept-Signature header field to indicate intention to take advantage of any available signatures and to indicate what kinds of signatures it supports.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Accept-Signature",
+    },
+    {
+        "section": "Experimental headers",
+        "name": "Early-Data",
+        "description": "Indicates that the request has been conveyed in TLS early data.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Early-Data",
+    },
+    {
+        "section": "Experimental headers",
+        "name": "Push-Policy",
+        "description": "A Push-Policy defines the server behavior regarding push when processing a request.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Push-Policy",
+    },
+    {
+        "section": "Experimental headers",
+        "name": "Signature",
+        "description": "The Signature header field conveys a list of signatures for an exchange, each one accompanied by information about how to determine the authority of and refresh that signature.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Signature",
+    },
+    {
+        "section": "Experimental headers",
+        "name": "Signed-Headers",
+        "description": "The Signed-Headers header field identifies an ordered list of response header fields to include in a signature.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Signed-Headers",
+    },
+    {
+        "section": "Privacy",
+        "name": "Sec-GPC",
+        "description": "Indicates whether the user consents to a website or service selling or sharing their personal information with third parties.",
+        "experimental": True,
+        "url": "/en-US/docs/Web/HTTP/Headers/Sec-GPC",
+    },
+    {
+        "section": "Non-standard headers",
+        "name": "X-Robots-Tag",
+        "description": 'The X-Robots-Tag HTTP header is used to indicate how a web page is to be indexed within public search engine results. The header is effectively equivalent to <meta name="robots" content="…">.',
+        "experimental": False,
+        "url": "/en-US/docs/Web/HTTP/Headers/X-Robots-Tag",
+    },
+]
+
+
+request_header_names = {
+    "Authorization",
+    "Proxy-Authorization",
+    "Cache-Control",
+    "Clear-Site-Data",
+    "If-Match",
+    "If-None-Match",
+    "If-Modified-Since",
+    "If-Unmodified-Since",
+    "Connection",
+    "Keep-Alive",
+    "Accept",
+    "Accept-Encoding",
+    "Accept-Language",
+    "Expect",
+    "Max-Forwards",
+    "Cookie",
+    "Access-Control-Request-Headers",
+    "Access-Control-Request-Method",
+    "Origin",
+    "Timing-Allow-Origin",
+    "Content-Length",
+    "Content-Type",
+    "Content-Encoding",
+    "Content-Language",
+    "Content-Location",
+    "Forwarded",
+    "Via",
+    "From",
+    "Host",
+    "Referer",
+    "Referrer-Policy",
+    "User-Agent",
+    "Range",
+    "If-Range",
+    "Upgrade-Insecure-Requests",
+    "Transfer-Encoding",
+    "TE",
+    "Trailer",
+    "Alt-Used",
+    "Link",
+    "Date",
+    "Origin-Isolation",
+    "Accept-Push-Policy",
+    "Accept-Signature",
+    "Early-Data",
+    "Signature",
+    "Signed-Headers",
+    "Sec-GPC",
+    "X-Forwarded-For",
+    "X-Forwarded-Host",
+    "X-Forwarded-Proto",
+    "X-DNS-Prefetch-Control",
+    "Pragma",
+    "Warning",
+}
+
+REQUEST_HEADERS = [
+    header for header in headers if header["name"] in request_header_names
+]

examples/basic_single_column.py

@@ -0,0 +1,35 @@
+"""Basic dropdown autocomplete from a list of options."""
+
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Input
+
+from textual_autocomplete import AutoComplete
+
+LANGUAGES = [
+    "Python",
+    "JavaScript",
+    "TypeScript",
+    "Java",
+    "C++",
+    "Ruby",
+    "Go",
+    "Rust",
+]
+
+
+class AutoCompleteExample(App[None]):
+    def compose(self) -> ComposeResult:
+        with Container(id="container"):
+            text_input = Input(placeholder="Search for a programming language...")
+            yield text_input
+
+            yield AutoComplete(
+                target=text_input,  # The widget to attach autocomplete to
+                candidates=LANGUAGES,  # The list of completion candidates
+            )
+
+
+if __name__ == "__main__":
+    app = AutoCompleteExample()
+    app.run()

examples/basic_two_column.py

@@ -0,0 +1,47 @@
+"""Two column dropdown example with simple styling on the prefix."""
+
+from textual.app import App, ComposeResult
+from textual.content import Content
+from textual.widgets import Input, Label
+
+from textual_autocomplete import AutoComplete, DropdownItem
+
+# Languages with their popularity rank
+LANGUAGES_WITH_RANK = [
+    (1, "Python"),
+    (2, "JavaScript"),
+    (3, "Java"),
+    (4, "C++"),
+    (5, "TypeScript"),
+    (6, "Go"),
+    (7, "Ruby"),
+    (8, "Rust"),
+]
+
+# Create dropdown items with two columns: rank and language name
+CANDIDATES = [
+    DropdownItem(
+        language,  # Main text to be completed
+        prefix=Content.from_markup(
+            f"[$text-primary on $primary-muted] {rank} "
+        ),  # Prefix showing rank, styled with Textual markup!
+    )
+    for rank, language in LANGUAGES_WITH_RANK
+]
+
+
+class TwoColumnAutoCompleteExample(App[None]):
+    def compose(self) -> ComposeResult:
+        yield Label("Start typing a programming language:")
+        text_input = Input(placeholder="Type here...")
+        yield text_input
+
+        yield AutoComplete(
+            target=text_input,  # The widget to attach autocomplete to
+            candidates=CANDIDATES,  # The list of completion candidates
+        )
+
+
+if __name__ == "__main__":
+    app = TwoColumnAutoCompleteExample()
+    app.run()

examples/basic_two_column_heavy_styles.py

@@ -0,0 +1,55 @@
+"""A two-column autocomplete example with heavy styling."""
+
+from textual.app import App, ComposeResult
+from textual.content import Content
+from textual.widgets import Input, Label
+
+from textual_autocomplete import AutoComplete, DropdownItem
+from examples._headers import headers
+
+# Define a mapping of sections to colors
+SECTION_COLORS: dict[str, str] = {
+    "Authentication": "$text-success",
+    "Caching": "$text-primary",
+    "Conditionals": "$text-warning",
+    "Connection management": "$text-error",
+    "Content negotiation": "$text-success",
+    "Controls": "$text-accent",
+    "Cookies": "$text-warning",
+    "CORS": "$text-error",
+    # Add fallback color for any other sections
+    "default": "$foreground",
+}
+
+# Create dropdown items with two columns: rank and language name
+CANDIDATES = [
+    DropdownItem(
+        Content.styled(
+            str(header["name"]),
+            style=SECTION_COLORS.get(
+                str(header.get("section", "default")), SECTION_COLORS["default"]
+            ),
+        ),  # Main text to be completed with color based on section
+        prefix=Content.from_markup(
+            "[$text-primary on $primary-muted] $number", number=f"{i:<3}"
+        ),  # Prefix showing rank, styled with Textual markup!
+    )
+    for i, header in enumerate(headers)
+]
+
+
+class TwoColumnAutoCompleteExample(App[None]):
+    def compose(self) -> ComposeResult:
+        yield Label("Start typing an HTTP header name:")
+        text_input = Input(placeholder="Type here...")
+        yield text_input
+
+        yield AutoComplete(
+            target=text_input,  # The widget to attach autocomplete to
+            candidates=CANDIDATES,  # The list of completion candidates
+        )
+
+
+if __name__ == "__main__":
+    app = TwoColumnAutoCompleteExample()
+    app.run()

examples/dynamic_data.py

@@ -0,0 +1,38 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Input
+
+from textual_autocomplete import AutoComplete
+from textual_autocomplete._autocomplete import DropdownItem, TargetState
+
+
+class DynamicDataApp(App[None]):
+    CSS = """
+Input {
+    margin: 2 4;
+}
+"""
+
+    def compose(self) -> ComposeResult:
+        input_widget = Input()
+        yield input_widget
+        yield AutoComplete(input_widget, candidates=self.get_candidates)
+
+    def get_candidates(self, state: TargetState) -> list[DropdownItem]:
+        left = len(state.text)
+        return [
+            DropdownItem(item, prefix=f"{left:>2} ")
+            for item in [
+                "Apple",
+                "Banana",
+                "Cherry",
+                "Orange",
+                "Pineapple",
+                "Strawberry",
+                "Watermelon",
+            ]
+        ]
+
+
+if __name__ == "__main__":
+    app = DynamicDataApp()
+    app.run()

examples/left_column_styling.py

@@ -0,0 +1,39 @@
+from textual.app import App, ComposeResult
+from textual.content import Content
+from textual.widgets import Input
+
+from textual_autocomplete import AutoComplete, DropdownItem
+
+
+LANGUAGES = [
+    DropdownItem(
+        "Python",
+        prefix=Content.from_markup("[$text-success on $success-muted] 🐍 "),
+    ),
+    DropdownItem(
+        "Golang",
+        prefix=Content.from_markup("[$text-primary on $primary-muted] 🔷 "),
+    ),
+    DropdownItem("Java", prefix=Content.from_markup("[#6a2db5 on magenta 20%] ☕ ")),
+    DropdownItem(
+        "Rust", prefix=Content.from_markup("[$text-accent on $accent-muted] 🦀 ")
+    ),
+]
+
+
+class LanguagesSearchApp(App[None]):
+    CSS = """
+    Input {
+        margin: 2 4;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        input_widget = Input(placeholder="Search for a programming language...")
+        yield input_widget
+        yield AutoComplete(target=input_widget, candidates=LANGUAGES)
+
+
+if __name__ == "__main__":
+    app = LanguagesSearchApp()
+    app.run()

examples/partial_completions.py

@@ -0,0 +1,43 @@
+"""By default, textual-autocomplete replaces the entire content of a widget
+with a completion.
+
+Sometimes, however, you may wish to insert the completion text, or otherwise use
+custom logic to determine the end-state of the Input after the user selects a completion.
+
+For example, if completing a path on a filesystem, you may wish to offer partial completions
+of the path based on the current content of the Input. Then, when the user selects a completion,
+you could offer a different set of completions based on the new path in the Input.
+"""
+
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Input, Label
+
+from textual_autocomplete import PathAutoComplete
+
+
+class FileSystemPathCompletions(App[None]):
+    CSS = """
+    #container {
+        align: center middle;
+        padding: 2 4;
+    }
+    #label {
+        margin-left: 3;
+    }
+    Input {
+        width: 80%;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with Container(id="container"):
+            yield Label("Choose a file!", id="label")
+            input_widget = Input(placeholder="Enter a path...")
+            yield input_widget
+        yield PathAutoComplete(target=input_widget, path="../textual")
+
+
+if __name__ == "__main__":
+    app = FileSystemPathCompletions()
+    app.run()

examples/path_completions_absolute.py

@@ -0,0 +1,43 @@
+"""By default, textual-autocomplete replaces the entire content of a widget
+with a completion.
+
+Sometimes, however, you may wish to insert the completion text, or otherwise use
+custom logic to determine the end-state of the Input after the user selects a completion.
+
+For example, if completing a path on a filesystem, you may wish to offer partial completions
+of the path based on the current content of the Input. Then, when the user selects a completion,
+you could offer a different set of completions based on the new path in the Input.
+"""
+
+from pathlib import Path
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Input, Label
+
+from textual_autocomplete import PathAutoComplete
+
+
+class FileSystemPathCompletions(App[None]):
+    CSS = """
+    #container {
+        padding: 2 4;
+    }
+    #label {
+        margin-left: 3;
+    }
+    Input {
+        width: 80%;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with Container(id="container"):
+            yield Label("Choose a file!", id="label")
+            input_widget = Input(placeholder="Enter a path...")
+            yield input_widget
+            yield PathAutoComplete(target=input_widget, path=Path.cwd())
+
+
+if __name__ == "__main__":
+    app = FileSystemPathCompletions()
+    app.run()

pyproject.toml

@@ -0,0 +1,38 @@
+[project]
+name = "textual-autocomplete"
+version = "4.0.4"
+description = "Easily add autocomplete dropdowns to your Textual apps."
+authors = [
+    { name = "Darren Burns", email = "darrenb900@gmail.com" }
+]
+readme = "README.md"
+packages = [{ include = "textual_autocomplete" }]
+dependencies = [
+    "textual>=2.0.0",
+    "typing-extensions>=4.5.0",
+]
+requires-python = ">=3.9.0"
+
+[tool.uv]
+dev-dependencies = [
+    "mypy",
+    "pytest>=8.3.5",
+    "pytest-asyncio>=0.24.0",
+    "pytest-textual-snapshot>=1.1.0",
+    "pytest-xdist>=3.6.1",
+    "textual-dev",
+]
+
+[tool.hatch.build.targets.wheel]
+packages = ["textual_autocomplete"]
+
+[tool.hatch.metadata]
+allow-direct-references = true
+
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[tool.pytest.ini_options]
+asyncio_mode = "auto"
+asyncio_default_fixture_loop_scope = "session"

tests/snapshots/__snapshots__/test_input/test_candidate_can_be_selected_via_click.svg

@@ -0,0 +1,154 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #191919 }
+.terminal-r6 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="85.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="97.6" y="25.9" width="841.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="48.8" clip-path="url(#terminal-line-1)">Java</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r5" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r5" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r6" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r5" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r5" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r5" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_completion_still_works_if_chosen_while_input_widget_has_selection.svg

@@ -0,0 +1,154 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #191919 }
+.terminal-r6 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="85.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="97.6" y="25.9" width="841.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="48.8" clip-path="url(#terminal-line-1)">Java</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r5" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r5" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r6" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r5" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r5" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r5" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_hide_after_summoning_by_pressing_escape.svg

@@ -0,0 +1,155 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #797979 }
+.terminal-r5 { fill: #e0e0e0 }
+.terminal-r6 { fill: #191919 }
+.terminal-r7 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="36.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="48.8" y="25.9" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="183" y="25.9" width="756.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r1" x="36.6" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">T</text><text class="terminal-r4" x="48.8" y="44.4" textLength="134.2" clip-path="url(#terminal-line-1)">ype&#160;here...</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r6" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r6" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r7" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r6" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r6" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r6" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_hide_after_typing_by_pressing_escape.svg

@@ -0,0 +1,154 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #191919 }
+.terminal-r6 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="73.2" y="25.9" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="24.4" clip-path="url(#terminal-line-1)">py</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r5" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r5" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r6" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r5" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r5" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r5" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_many_matching_candidates.svg

@@ -0,0 +1,155 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #e0e0e0;font-weight: bold }
+.terminal-r6 { fill: #191919 }
+.terminal-r7 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="73.2" y="25.9" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="61" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="85.4" y="50.3" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="183" y="50.3" width="780.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="61" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="85.4" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="109.8" y="74.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="183" y="74.7" width="780.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="24.4" clip-path="url(#terminal-line-1)">ja</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="48.8" clip-path="url(#terminal-line-2)">▁▁▁▁</text><text class="terminal-r5" x="61" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">J</text><text class="terminal-r5" x="73.2" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">a</text><text class="terminal-r4" x="85.4" y="68.8" textLength="97.6" clip-path="url(#terminal-line-2)">vaScript</text><text class="terminal-r2" x="183" y="68.8" textLength="780.8" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r6" x="12.2" y="93.2" textLength="48.8" clip-path="url(#terminal-line-3)">▔▔▔▔</text><text class="terminal-r5" x="61" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">J</text><text class="terminal-r5" x="73.2" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">a</text><text class="terminal-r4" x="85.4" y="93.2" textLength="24.4" clip-path="url(#terminal-line-3)">va</text><text class="terminal-r6" x="183" y="93.2" textLength="780.8" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r6" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r7" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r6" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r6" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r6" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_multiple_autocomplete_dropdowns_on_same_screen.svg

@@ -0,0 +1,155 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #191919 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #737373 }
+.terminal-r5 { fill: #e0e0e0 }
+.terminal-r6 { fill: #0178d4 }
+.terminal-r7 { fill: #e0e0e0;font-weight: bold }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">MultipleAutocompleteDropdowns</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#191919" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="25.9" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="183" y="25.9" width="756.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="61" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="73.2" y="99.1" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="123.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="61" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="85.4" y="123.5" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="183" y="123.5" width="780.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="61" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="73.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="85.4" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="109.8" y="147.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="183" y="147.9" width="793" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="146.4" clip-path="url(#terminal-line-1)">Type&#160;here...</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r6" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r6" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r5" x="36.6" y="117.6" textLength="24.4" clip-path="url(#terminal-line-4)">ja</text><text class="terminal-r6" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r6" x="12.2" y="142" textLength="48.8" clip-path="url(#terminal-line-5)">▁▁▁▁</text><text class="terminal-r7" x="61" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">J</text><text class="terminal-r7" x="73.2" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">a</text><text class="terminal-r5" x="85.4" y="142" textLength="97.6" clip-path="url(#terminal-line-5)">vaScript</text><text class="terminal-r6" x="183" y="142" textLength="780.8" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r6" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r7" x="61" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">J</text><text class="terminal-r7" x="73.2" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">a</text><text class="terminal-r5" x="85.4" y="166.4" textLength="24.4" clip-path="url(#terminal-line-6)">va</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_selecting_candidate_should_complete_input__enter_key.svg

@@ -0,0 +1,154 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #191919 }
+.terminal-r6 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="85.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="97.6" y="25.9" width="841.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="48.8" clip-path="url(#terminal-line-1)">Java</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r5" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r5" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r6" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r5" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r5" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r5" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_selecting_candidate_should_complete_input__tab_key.svg

@@ -0,0 +1,154 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #191919 }
+.terminal-r6 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="85.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="97.6" y="25.9" width="841.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="48.8" clip-path="url(#terminal-line-1)">Java</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r5" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r5" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r6" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r5" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r5" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r5" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_single_matching_candidate.svg

@@ -0,0 +1,155 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #e0e0e0;font-weight: bold }
+.terminal-r6 { fill: #191919 }
+.terminal-r7 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="73.2" y="25.9" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="61" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="85.4" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="134.2" y="50.3" width="829.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="24.4" clip-path="url(#terminal-line-1)">py</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="48.8" clip-path="url(#terminal-line-2)">▁▁▁▁</text><text class="terminal-r5" x="61" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">P</text><text class="terminal-r5" x="73.2" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">y</text><text class="terminal-r4" x="85.4" y="68.8" textLength="48.8" clip-path="url(#terminal-line-2)">thon</text><text class="terminal-r2" x="134.2" y="68.8" textLength="829.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r6" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r6" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r7" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r6" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r6" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r6" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_summon_when_only_one_full_match_does_not_show_dropdown.svg

@@ -0,0 +1,154 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #191919 }
+.terminal-r6 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="109.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="122" y="25.9" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="73.2" clip-path="url(#terminal-line-1)">Python</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r5" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r5" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r6" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r5" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r5" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r5" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_tab_still_works_after_completion.svg

@@ -0,0 +1,154 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #191919 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #0178d4 }
+.terminal-r6 { fill: #797979 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#191919" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="25.9" width="902.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="50.3" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="74.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="36.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="48.8" y="99.1" width="402.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="902.8" clip-path="url(#terminal-line-1)">Java&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="951.6" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r5" x="12.2" y="93.2" textLength="951.6" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r5" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r1" x="36.6" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">A</text><text class="terminal-r6" x="48.8" y="117.6" textLength="402.6" clip-path="url(#terminal-line-4)">nother&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r5" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r5" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r5" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_input/test_text_selection_works_while_autocomplete_is_open.svg

@@ -0,0 +1,155 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #e0e0e0;font-weight: bold }
+.terminal-r6 { fill: #191919 }
+.terminal-r7 { fill: #737373 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">BasicInputAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2d4e74" x="36.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="73.2" y="25.9" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="61" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="85.4" y="50.3" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="183" y="50.3" width="780.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="74.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="61" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="85.4" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="109.8" y="74.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="183" y="74.7" width="780.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="99.1" width="488" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="939.4" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#191919" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="12.2" y="123.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="24.4" clip-path="url(#terminal-line-1)">ja</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="48.8" clip-path="url(#terminal-line-2)">▁▁▁▁</text><text class="terminal-r5" x="61" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">J</text><text class="terminal-r5" x="73.2" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">a</text><text class="terminal-r4" x="85.4" y="68.8" textLength="97.6" clip-path="url(#terminal-line-2)">vaScript</text><text class="terminal-r2" x="183" y="68.8" textLength="780.8" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▊</text><text class="terminal-r6" x="12.2" y="93.2" textLength="48.8" clip-path="url(#terminal-line-3)">▔▔▔▔</text><text class="terminal-r5" x="61" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">J</text><text class="terminal-r5" x="73.2" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">a</text><text class="terminal-r4" x="85.4" y="93.2" textLength="24.4" clip-path="url(#terminal-line-3)">va</text><text class="terminal-r6" x="183" y="93.2" textLength="780.8" clip-path="url(#terminal-line-3)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r6" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">▎</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▊</text><text class="terminal-r7" x="36.6" y="117.6" textLength="414.8" clip-path="url(#terminal-line-4)">Another&#160;input&#160;which&#160;can&#160;be&#160;focused</text><text class="terminal-r6" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">▎</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▊</text><text class="terminal-r6" x="12.2" y="142" textLength="951.6" clip-path="url(#terminal-line-5)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r6" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">▎</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_styling/test_background_color_and_removed_style.svg

@@ -0,0 +1,153 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #ffc473 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">StyledAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="73.2" y="25.9" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24452e" x="61" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24452e" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="85.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="97.6" y="50.3" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="74.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#24452e" x="61" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24452e" x="73.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="85.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="97.6" y="74.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="24.4" clip-path="url(#terminal-line-1)">ba</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="48.8" clip-path="url(#terminal-line-2)">▁▁▁▁</text><text class="terminal-r5" x="61" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">b</text><text class="terminal-r5" x="73.2" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">a</text><text class="terminal-r4" x="85.4" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">r</text><text class="terminal-r2" x="97.6" y="68.8" textLength="866.2" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r5" x="61" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">b</text><text class="terminal-r5" x="73.2" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">a</text><text class="terminal-r4" x="85.4" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">z</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_styling/test_cursor_color_change_and_dropdown_background_change.svg

@@ -0,0 +1,156 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #8ad4a1;font-style: italic;;text-decoration: underline; }
+.terminal-r6 { fill: #57a5e2;font-style: italic; }
+.terminal-r7 { fill: #8ad4a1;text-decoration: underline; }
+.terminal-r8 { fill: #ff0000 }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">StyledAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="73.2" y="25.9" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#24452e" x="61" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24452e" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#ff00ff" x="85.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="97.6" y="50.3" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="74.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#24452e" x="61" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#24452e" x="73.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#441e27" x="85.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="97.6" y="74.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="24.4" clip-path="url(#terminal-line-1)">ba</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="48.8" clip-path="url(#terminal-line-2)">▁▁▁▁</text><text class="terminal-r5" x="61" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">b</text><text class="terminal-r5" x="73.2" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">a</text><text class="terminal-r6" x="85.4" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">r</text><text class="terminal-r2" x="97.6" y="68.8" textLength="866.2" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r7" x="61" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">b</text><text class="terminal-r7" x="73.2" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">a</text><text class="terminal-r8" x="85.4" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">z</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_styling/test_dropdown_styles_match_textual_theme.svg

@@ -0,0 +1,153 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #2e3440 }
+.terminal-r2 { fill: #88c0d0 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #d8dee9 }
+.terminal-r5 { fill: #cdb4c8;font-weight: bold }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">StyledAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#88c0d0" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#424959" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#88c0d0" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#424959" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#424959" x="36.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#d8dee9" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#424959" x="73.2" y="25.9" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#424959" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#88c0d0" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#424959" x="12.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#516777" x="61" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#516777" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#516777" x="85.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#424959" x="97.6" y="50.3" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="74.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#3b4252" x="61" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3b4252" x="73.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3b4252" x="85.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="97.6" y="74.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#2e3440" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="24.4" clip-path="url(#terminal-line-1)">ba</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="48.8" clip-path="url(#terminal-line-2)">▁▁▁▁</text><text class="terminal-r5" x="61" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">b</text><text class="terminal-r5" x="73.2" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">a</text><text class="terminal-r4" x="85.4" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">r</text><text class="terminal-r2" x="97.6" y="68.8" textLength="866.2" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r5" x="61" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">b</text><text class="terminal-r5" x="73.2" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">a</text><text class="terminal-r4" x="85.4" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">z</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_styling/test_foreground_color_and_text_style.svg

@@ -0,0 +1,153 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #e0e0e0 }
+.terminal-r5 { fill: #ffc473;font-weight: bold;font-style: italic;;text-decoration: underline; }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">StyledAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="36.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="61" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="73.2" y="25.9" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="61" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="85.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="97.6" y="50.3" width="866.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="74.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="61" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="85.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="97.6" y="74.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r4" x="36.6" y="44.4" textLength="24.4" clip-path="url(#terminal-line-1)">ba</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="48.8" clip-path="url(#terminal-line-2)">▁▁▁▁</text><text class="terminal-r5" x="61" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">b</text><text class="terminal-r5" x="73.2" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">a</text><text class="terminal-r4" x="85.4" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">r</text><text class="terminal-r2" x="97.6" y="68.8" textLength="866.2" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r5" x="61" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">b</text><text class="terminal-r5" x="73.2" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">a</text><text class="terminal-r4" x="85.4" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">z</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/__snapshots__/test_styling/test_max_height_and_scrolling.svg

@@ -0,0 +1,154 @@
+<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
+    <style>
+
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }
+    @font-face {
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }
+
+    .terminal-matrix {
+        font-family: Fira Code, monospace;
+        font-size: 20px;
+        line-height: 24.4px;
+        font-variant-east-asian: full-width;
+    }
+
+    .terminal-title {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: arial;
+    }
+
+    .terminal-r1 { fill: #121212 }
+.terminal-r2 { fill: #0178d4 }
+.terminal-r3 { fill: #c5c8c6 }
+.terminal-r4 { fill: #797979 }
+.terminal-r5 { fill: #e0e0e0 }
+.terminal-r6 { fill: #1e1e1e }
+    </style>
+
+    <defs>
+    <clipPath id="terminal-clip-terminal">
+      <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+    </clipPath>
+    <clipPath id="terminal-line-0">
+    <rect x="0" y="1.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-1">
+    <rect x="0" y="25.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-2">
+    <rect x="0" y="50.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-3">
+    <rect x="0" y="74.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-4">
+    <rect x="0" y="99.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-5">
+    <rect x="0" y="123.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-6">
+    <rect x="0" y="147.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-7">
+    <rect x="0" y="172.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-8">
+    <rect x="0" y="196.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-9">
+    <rect x="0" y="221.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-10">
+    <rect x="0" y="245.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-11">
+    <rect x="0" y="269.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-12">
+    <rect x="0" y="294.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-13">
+    <rect x="0" y="318.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-14">
+    <rect x="0" y="343.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-15">
+    <rect x="0" y="367.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-16">
+    <rect x="0" y="391.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-17">
+    <rect x="0" y="416.3" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-18">
+    <rect x="0" y="440.7" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-19">
+    <rect x="0" y="465.1" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-20">
+    <rect x="0" y="489.5" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-21">
+    <rect x="0" y="513.9" width="976" height="24.65"/>
+            </clipPath>
+<clipPath id="terminal-line-22">
+    <rect x="0" y="538.3" width="976" height="24.65"/>
+            </clipPath>
+    </defs>
+
+    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">StyledAutocomplete</text>
+            <g transform="translate(26,22)">
+            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+            <circle cx="44" cy="0" r="7" fill="#28c840"/>
+            </g>
+        
+    <g transform="translate(9, 41)" clip-path="url(#terminal-clip-terminal)">
+    <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e0e0e0" x="36.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="48.8" y="25.9" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="146.4" y="25.9" width="793" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="939.4" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="12.2" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="50.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#000000" x="73.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#272727" x="85.4" y="50.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#153854" x="36.6" y="74.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#ff0000" x="73.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="85.4" y="74.7" width="890.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#121212" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
+    <g class="terminal-matrix">
+    <text class="terminal-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▊</text><text class="terminal-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">▎</text><text class="terminal-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-line-0)">
+</text><text class="terminal-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▊</text><text class="terminal-r1" x="36.6" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">S</text><text class="terminal-r4" x="48.8" y="44.4" textLength="97.6" clip-path="url(#terminal-line-1)">earch...</text><text class="terminal-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">▎</text><text class="terminal-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-line-1)">
+</text><text class="terminal-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▊</text><text class="terminal-r2" x="12.2" y="68.8" textLength="24.4" clip-path="url(#terminal-line-2)">▁▁</text><text class="terminal-r5" x="36.6" y="68.8" textLength="36.6" clip-path="url(#terminal-line-2)">baz</text><text class="terminal-r2" x="85.4" y="68.8" textLength="878.4" clip-path="url(#terminal-line-2)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">▎</text><text class="terminal-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-line-2)">
+</text><text class="terminal-r5" x="36.6" y="93.2" textLength="36.6" clip-path="url(#terminal-line-3)">qux</text><text class="terminal-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-line-3)">
+</text><text class="terminal-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-line-4)">
+</text><text class="terminal-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-line-5)">
+</text><text class="terminal-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-line-6)">
+</text><text class="terminal-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-line-7)">
+</text><text class="terminal-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-line-8)">
+</text><text class="terminal-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-line-9)">
+</text><text class="terminal-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-line-10)">
+</text><text class="terminal-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-line-11)">
+</text><text class="terminal-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-line-12)">
+</text><text class="terminal-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-line-13)">
+</text><text class="terminal-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-line-14)">
+</text><text class="terminal-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-line-15)">
+</text><text class="terminal-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-line-16)">
+</text><text class="terminal-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-line-17)">
+</text><text class="terminal-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-line-18)">
+</text><text class="terminal-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-line-19)">
+</text><text class="terminal-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-line-20)">
+</text><text class="terminal-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-line-21)">
+</text><text class="terminal-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-line-22)">
+</text>
+    </g>
+    </g>
+</svg>

tests/snapshots/test_cursor_tracking.py

@@ -0,0 +1,81 @@
+from __future__ import annotations
+
+from textual.app import App, ComposeResult
+from textual.containers import Center, VerticalScroll
+from textual.pilot import Pilot
+from textual.widgets import Input
+from textual_autocomplete import AutoComplete
+
+
+class CursorTracking(App[None]):
+    CSS = """
+    #scrollable {
+        overflow: scroll scroll;
+        scrollbar-color: red;
+        Center {
+            background: $accent;
+            height: 100;
+            width: 100;
+            align-vertical: middle;
+        }
+        Input {
+            width: 24;
+        }
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with VerticalScroll(id="scrollable", can_focus=False):
+            with Center():
+                input = Input(placeholder="Type here...")
+                input.cursor_blink = False
+                yield input
+
+        yield AutoComplete(
+            target=input,
+            candidates=["foo", "bar", "baz", "qux", "boop"],
+        )
+
+
+def test_dropdown_tracks_terminal_cursor_when_parent_scrolls(snap_compare):
+    """We type, the dropdown appears, then we scroll the parent container so that the position of the input
+    and the dropdown changes on screen. The dropdown should remain aligned to the Input widget."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press("b")
+        scrollable = pilot.app.query_one("#scrollable")
+        scrollable.scroll_relative(x=5, y=5, animate=False, force=True)
+        await pilot.pause()
+
+    assert snap_compare(CursorTracking(), run_before=run_before)
+
+
+def test_dropdown_tracks_input_cursor_and_cursor_prefix_as_search_string(snap_compare):
+    """The completions should be based on the text between the start of the input and the cursor location.
+
+    In this example, we type "ba", then move the cursor back one cell so that the search string is "b",
+    meaning the completions should be "bar", "baz", and "boop".
+    """
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ba")  # Type "ba"
+        await pilot.press("left")  # Move the cursor back one cell
+
+    assert snap_compare(CursorTracking(), run_before=run_before)
+
+
+def test_dropdown_tracks_input_cursor_on_click_and_cursor_prefix_search_string(
+    snap_compare,
+):
+    """The completions should be based on the text between the start of the input and the cursor location.
+
+    In this example, we type "ba", then move the cursor back one cell by clicking, so that the search string is "b",
+    meaning the completions should be "bar", "baz", and "boop".
+    """
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ba")  # Type "ba"
+        input_widget = pilot.app.query_one(Input)
+        await pilot.click(input_widget, offset=(4, 1))  # Click on the "a"
+
+    assert snap_compare(CursorTracking(), run_before=run_before)

tests/snapshots/test_function_candidates.py

@@ -0,0 +1,3 @@
+# TODO - Passing a function as candidates should work
+
+from __future__ import annotations

tests/snapshots/test_input.py

@@ -0,0 +1,255 @@
+"""Snapshot tests for the Input widget with autocomplete."""
+
+from __future__ import annotations
+
+from textual.app import App, ComposeResult
+from textual.pilot import Pilot
+from textual.widgets import Input
+from textual.widgets.input import Selection
+
+from textual_autocomplete import AutoComplete, AutoCompleteList, DropdownItem
+
+LANGUAGES = [
+    "Python",
+    "JavaScript",
+    "TypeScript",
+    "Java",
+    "C++",
+    "Ruby",
+    "Go",
+    "Rust",
+    "C#",
+    "Swift",
+    "Kotlin",
+    "PHP",
+]
+CANDIDATES = [DropdownItem(lang) for lang in LANGUAGES]
+
+
+class BasicInputAutocomplete(App[None]):
+    def compose(self) -> ComposeResult:
+        input = Input(placeholder="Type here...")
+        input.cursor_blink = False
+        yield input
+        yield AutoComplete(
+            target=input,
+            candidates=CANDIDATES,
+        )
+        yield Input(placeholder="Another input which can be focused")
+
+
+def test_single_matching_candidate(snap_compare):
+    """Typing should make the dropdown appear and show filtered results."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"py")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_many_matching_candidates(snap_compare):
+    """Typing should make the dropdown appear and show filtered results."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_selecting_candidate_should_complete_input__enter_key(snap_compare):
+    """Selecting a candidate using the enter key should complete the input."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")
+        await pilot.press("down")
+        await pilot.press("enter")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_selecting_candidate_should_complete_input__tab_key(snap_compare):
+    """Selecting a candidate using the tab key should complete the input."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")
+        await pilot.press("down")
+        await pilot.press("tab")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_tab_still_works_after_completion(snap_compare):
+    """Tabbing after completing an input should still work (the autocomplete should not consume the tab key).
+
+    The second input should become focused in this example."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")
+        await pilot.press("down")
+        await pilot.press("tab")
+        await pilot.press("tab")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_summon_by_pressing_down(snap_compare):
+    """We can summon the autocomplete dropdown by pressing the down arrow key."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.pause()
+        await pilot.press("down")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_summon_by_pressing_down_after_performing_completion(snap_compare):
+    """We can summon the autocomplete dropdown by pressing the down arrow key,
+    and it should be filled based on the current content of the Input.
+
+    In this example, when we resummon the dropdown, the highlighted text should
+    be "Java" - NOT "ja". "Java" is the current content of the input. "ja" was
+    the text we previously performed the completion with.
+
+    There was a bug where the dropdown would contain the pre-completion candidates.
+    """
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")  # Filters down to 2 candidates: JavaScript and Java
+        await pilot.press("down")  # Move cursor over Java.
+        await pilot.press("tab")  # Press tab to complete.
+        await pilot.press("down")  # Press down to summon the dropdown.
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_hide_after_summoning_by_pressing_escape(snap_compare):
+    """Dropdown summoned via down, then escape was pressed to hide it."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press("down")
+        await pilot.press("escape")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_summon_when_only_one_full_match_does_not_show_dropdown(snap_compare):
+    """If the dropdown contains only one item, and that item is an exact match for the dropdown
+    content, then the dropdown should not be shown."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"py")
+        await pilot.press("enter")
+        await pilot.press("down")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_hide_after_typing_by_pressing_escape(snap_compare):
+    """Dropdown summoned via typing a matching query, then escape was pressed to hide it."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"py")
+        await pilot.press("escape")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_candidate_can_be_selected_via_click(snap_compare):
+    """A candidate can be selected by clicking on it.
+
+    In this example, we click on "Java", which is the second result in the dropdown.
+    """
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")
+        await pilot.click(AutoCompleteList, offset=(1, 1))  # Click second result
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_text_selection_works_while_autocomplete_is_open(snap_compare):
+    """If the dropdown is open, the text selection should still work."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")
+        input = pilot.app.query_one(Input)
+        input.selection = Selection(0, 2)
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_completion_still_works_if_chosen_while_input_widget_has_selection(
+    snap_compare,
+):
+    """If the dropdown is open, and a candidate is chosen, the completion should still
+    work, and the selection should move to the end of the input."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")
+        input = pilot.app.query_one(Input)
+        input.selection = Selection(0, 2)
+        await pilot.press("down")
+        await pilot.press("enter")
+
+    assert snap_compare(BasicInputAutocomplete(), run_before=run_before)
+
+
+def test_dropdown_tracks_cursor_position(snap_compare):
+    """The dropdown should track the cursor position of the target widget."""
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press(*"ja")
+        await pilot.press("down")
+
+
+def test_multiple_autocomplete_dropdowns_on_a_single_input(snap_compare):
+    """Multiple autocomplete dropdowns can be open at the same time on a single input.
+
+    I'm not sure why you'd want to do this. The behaviour is kind of undefined - both
+    dropdowns should appear, but they'll overlap. Let's just ensure we don't crash.
+    """
+
+    class MultipleAutocompleteDropdowns(App[None]):
+        def compose(self) -> ComposeResult:
+            input_widget = Input(placeholder="Type here...")
+            input_widget.cursor_blink = False
+            yield input_widget
+
+            yield AutoComplete(target=input_widget, candidates=LANGUAGES)
+            yield AutoComplete(
+                target=input_widget,
+                candidates=["foo", "bar", "java", "javas", "javassss", "jajaja"],
+            )
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press("tab")
+        await pilot.press(*"ja")
+        await pilot.press("down")
+
+    assert snap_compare(MultipleAutocompleteDropdowns(), run_before=run_before)
+
+
+def test_multiple_autocomplete_dropdowns_on_same_screen(snap_compare):
+    """Multiple autocomplete dropdowns can exist on the same screen."""
+
+    class MultipleAutocompleteDropdowns(App[None]):
+        def compose(self) -> ComposeResult:
+            input_widget = Input(placeholder="Type here...")
+            input_widget.cursor_blink = False
+            yield input_widget
+
+            # Setup with strings...
+            yield AutoComplete(target=input_widget, candidates=LANGUAGES)
+            input2 = Input(placeholder="Also type here...")
+            input2.cursor_blink = False
+            yield input2
+
+            # ...and with DropdownItems...
+            yield AutoComplete(target=input2, candidates=CANDIDATES)
+
+    async def run_before(pilot: Pilot[None]) -> None:
+        await pilot.press("tab")
+        await pilot.press(*"ja")
+        await pilot.press("down")
+
+    assert snap_compare(MultipleAutocompleteDropdowns(), run_before=run_before)

tests/snapshots/test_prevent_default.py

@@ -0,0 +1,49 @@
+"""Let's ensure the `prevent_default_tab` and `prevent_default_enter` options work as expected."""
+
+from __future__ import annotations
+
+from typing import Any
+from textual.app import App, ComposeResult
+from textual.widgets import Button, Input
+from textual_autocomplete import AutoComplete
+
+
+class PreventDefaultTab(App[None]):
+    """Test that the default tab key is permitted if `prevent_default_tab` is `False`."""
+
+    def __init__(
+        self, prevent_default_tab: bool = False, *args: Any, **kwargs: Any
+    ) -> None:
+        super().__init__(*args, **kwargs)
+        self.prevent_default_tab = prevent_default_tab
+
+    def compose(self) -> ComposeResult:
+        input = Input(placeholder="Type something...")
+        input.cursor_blink = False
+        yield input
+        yield AutoComplete(
+            input,
+            candidates=["foo", "bar"],
+            prevent_default_tab=self.prevent_default_tab,
+        )
+        yield Button("I'm here to test focus.")
+
+
+async def test_switch_focus_on_completion_via_tab_key__prevent_default_tab_is_false():
+    """The default tab key should not be prevented if `prevent_default_tab` is `False`."""
+    app = PreventDefaultTab(prevent_default_tab=False)
+    async with app.run_test() as pilot:
+        await pilot.press("f", "tab")
+        assert app.query_one(Input).value == "foo"
+        assert app.query_one(Button).has_focus
+
+
+async def test_no_focus_switch_via_tab_key__prevent_default_tab_is_true():
+    """`prevent_default_tab` is `True`, so focus should switch on completion with tab."""
+    app = PreventDefaultTab(prevent_default_tab=True)
+    async with app.run_test() as pilot:
+        await pilot.press("f", "tab")
+        input_widget = app.query_one(Input)
+        assert input_widget.value == "foo"
+        assert input_widget.has_focus
+        assert not app.query_one(Button).has_focus

tests/snapshots/test_styling.py

@@ -0,0 +1,112 @@
+from __future__ import annotations
+
+from textual.app import App, ComposeResult
+from textual.pilot import Pilot
+from textual.widgets import Input
+from textual_autocomplete import AutoComplete
+
+
+class StyledAutocomplete(App[None]):
+    def compose(self) -> ComposeResult:
+        input = Input(placeholder="Search...")
+        input.cursor_blink = False
+        yield input
+        yield AutoComplete(target=input, candidates=["foo", "bar", "baz", "qux"])
+
+
+def test_foreground_color_and_text_style(snap_compare):
+    """Background color should not be impacted by the text foreground and style."""
+    StyledAutocomplete.CSS = """
+    AutoComplete {
+        & .autocomplete--highlight-match {
+            color: $text-accent;
+            text-style: bold italic underline;
+        }
+    }
+    """
+
+    async def run_before(pilot: Pilot) -> None:
+        await pilot.press(*"ba")
+
+    assert snap_compare(StyledAutocomplete(), run_before=run_before)
+
+
+def test_background_color_and_removed_style(snap_compare):
+    StyledAutocomplete.CSS = """
+    AutoComplete {
+        & .autocomplete--highlight-match {
+            color: $text-accent;
+            background: $success-muted;
+            text-style: not bold;
+        }
+    }
+    """
+
+    async def run_before(pilot: Pilot) -> None:
+        await pilot.press(*"ba")
+
+    assert snap_compare(StyledAutocomplete(), run_before=run_before)
+
+
+def test_max_height_and_scrolling(snap_compare):
+    """We should be scrolled to qux, and the red scrollbar should reflect that."""
+    StyledAutocomplete.CSS = """
+    AutoComplete {
+        & AutoCompleteList {
+            scrollbar-color: red;
+            max-height: 2;
+        }
+    }
+    """
+
+    async def run_before(pilot: Pilot) -> None:
+        await pilot.press("down", "down", "down", "down")
+
+    assert snap_compare(StyledAutocomplete(), run_before=run_before)
+
+
+def test_dropdown_styles_match_textual_theme(snap_compare):
+    """Dropdown styles should match the textual theme. In this test, we've swapped the theme to nord."""
+    StyledAutocomplete.CSS = """
+    AutoComplete {
+        & .autocomplete--highlight-match {
+            color: $text-accent;
+        }
+    }
+    """
+
+    async def run_before(pilot: Pilot) -> None:
+        pilot.app.theme = "nord"
+        await pilot.press(*"ba")
+
+    assert snap_compare(StyledAutocomplete(), run_before=run_before)
+
+
+def test_cursor_color_change_and_dropdown_background_change(snap_compare):
+    """Checking various interactions between styles. See the test's CSS for info."""
+    StyledAutocomplete.CSS = """
+    AutoComplete {
+
+        & AutoCompleteList {
+            color: red;
+            background: $error-muted;
+            & > .option-list--option-highlighted {
+                color: $text-primary;
+                background: magenta;
+                text-style: italic;
+            }
+        }
+
+        & .autocomplete--highlight-match {
+            color: $text-success;
+            background: $success-muted;
+            text-style: underline;
+        }
+
+    }
+    """
+
+    async def run_before(pilot: Pilot) -> None:
+        await pilot.press(*"ba")
+
+    assert snap_compare(StyledAutocomplete(), run_before=run_before)

textual_autocomplete/__init__.py

@@ -0,0 +1,18 @@
+from textual_autocomplete._autocomplete import (
+    AutoComplete,
+    AutoCompleteList,
+    DropdownItem,
+    DropdownItemHit,
+    TargetState,
+)
+
+from textual_autocomplete._path_autocomplete import PathAutoComplete
+
+__all__ = [
+    "AutoComplete",
+    "PathAutoComplete",
+    "AutoCompleteList",
+    "DropdownItem",
+    "DropdownItemHit",
+    "TargetState",
+]

textual_autocomplete/_autocomplete.py

@@ -0,0 +1,550 @@
+from __future__ import annotations
+
+from dataclasses import dataclass
+from operator import itemgetter
+from typing import (
+    Callable,
+    ClassVar,
+    Sequence,
+    cast,
+)
+from rich.text import Text
+from textual import events, on
+from textual.app import ComposeResult
+from textual.binding import Binding
+from textual.content import Content
+from textual.css.query import NoMatches
+from textual.geometry import Offset, Region, Spacing
+from textual.style import Style
+from textual.widget import Widget
+from textual.widgets import Input, OptionList
+from textual.widgets.option_list import Option
+
+from textual_autocomplete.fuzzy_search import FuzzySearch
+
+
+@dataclass
+class TargetState:
+    text: str
+    """The content in the target widget."""
+
+    cursor_position: int
+    """The cursor position in the target widget."""
+
+
+class DropdownItem(Option):
+    def __init__(
+        self,
+        main: str | Content,
+        prefix: str | Content | None = None,
+        id: str | None = None,
+        disabled: bool = False,
+    ) -> None:
+        """A single option appearing in the autocompletion dropdown. Each option has up to 3 columns.
+        Note that this is not a widget, it's simply a data structure for describing dropdown items.
+
+        Args:
+            left: The prefix will often contain an icon/symbol, the main (middle)
+                column contains the text that represents this option.
+            main: The main text representing this option - this will be highlighted by default.
+                In an IDE, the `main` (middle) column might contain the name of a function or method.
+        """
+        self.main = Content(main) if isinstance(main, str) else main
+        self.prefix = Content(prefix) if isinstance(prefix, str) else prefix
+        left = self.prefix
+        prompt = self.main
+        if left:
+            prompt = Content.assemble(left, self.main)
+
+        super().__init__(prompt, id, disabled)
+
+    @property
+    def value(self) -> str:
+        return self.main.plain
+
+
+class DropdownItemHit(DropdownItem):
+    """A dropdown item which matches the current search string - in other words
+    AutoComplete.match has returned a score greater than 0 for this item.
+    """
+
+
+class AutoCompleteList(OptionList):
+    pass
+
+
+class AutoComplete(Widget):
+    BINDINGS = [
+        Binding("escape", "hide", "Hide dropdown", show=False),
+    ]
+
+    DEFAULT_CSS = """\
+    AutoComplete {
+        height: auto;
+        width: auto;
+        max-height: 12;
+        display: none;
+        background: $surface;
+        overlay: screen;
+
+        & AutoCompleteList {
+            width: auto;
+            height: auto;
+            border: none;
+            padding: 0;
+            margin: 0;
+            scrollbar-size-vertical: 1;
+            text-wrap: nowrap;
+            color: $foreground;
+            background: transparent;
+        }
+
+        & .autocomplete--highlight-match {
+            text-style: bold;
+        }
+
+    }
+    """
+
+    COMPONENT_CLASSES: ClassVar[set[str]] = {
+        "autocomplete--highlight-match",
+    }
+
+    def __init__(
+        self,
+        target: Input | str,
+        candidates: Sequence[DropdownItem | str]
+        | Callable[[TargetState], list[DropdownItem]]
+        | None = None,
+        *,
+        prevent_default_enter: bool = True,
+        prevent_default_tab: bool = True,
+        name: str | None = None,
+        id: str | None = None,
+        classes: str | None = None,
+        disabled: bool = False,
+    ) -> None:
+        """An autocomplete widget.
+
+        Args:
+            target: An Input instance or a selector string used to query an Input instance.
+                If a selector is used, remember that widgets are not available until the widget has been mounted (don't
+                use the selector in `compose` - use it in `on_mount` instead).
+            candidates: The candidates to match on, or a function which returns the candidates to match on.
+                If set to None, the candidates will be fetched by directly calling the `get_candidates` method,
+                which is what you'll probably want to do if you're subclassing AutoComplete and supplying your
+                own custom `get_candidates` method.
+            prevent_default_enter: Prevent the default enter behavior. If True, when you select a dropdown option using
+                the enter key, the default behavior (e.g. submitting an Input) will be prevented.
+            prevent_default_tab: Prevent the default tab behavior. If True, when you select a dropdown option using
+                the tab key, the default behavior (e.g. moving focus to the next widget) will be prevented.
+        """
+        super().__init__(name=name, id=id, classes=classes, disabled=disabled)
+        self._target = target
+
+        # Users can supply strings as a convenience for the simplest cases,
+        # so let's convert them to DropdownItems.
+        self.candidates: (
+            list[DropdownItem] | Callable[[TargetState], list[DropdownItem]] | None
+        )
+        """The candidates to match on, or a function which returns the candidates to match on."""
+        if isinstance(candidates, Sequence):
+            self.candidates = [
+                candidate
+                if isinstance(candidate, DropdownItem)
+                else DropdownItem(main=candidate)
+                for candidate in candidates
+            ]
+        else:
+            self.candidates = candidates
+
+        self.prevent_default_enter = prevent_default_enter
+        """Prevent the default enter behavior. If True, when you select a dropdown option using
+        the enter key, the default behavior (e.g. submitting an Input) will be prevented.
+        """
+
+        self.prevent_default_tab = prevent_default_tab
+        """Prevent the default tab behavior. If True, when you select a dropdown option using
+        the tab key, the default behavior (e.g. moving focus to the next widget) will be prevented.
+        """
+
+        self._target_state = TargetState("", 0)
+        """Cached state of the target Input."""
+
+        self._fuzzy_search = FuzzySearch()
+        """The default implementation used by AutoComplete.match."""
+
+    def compose(self) -> ComposeResult:
+        option_list = AutoCompleteList()
+        option_list.can_focus = False
+        yield option_list
+
+    def on_mount(self) -> None:
+        # Subscribe to the target widget's reactive attributes.
+        self.target.message_signal.subscribe(self, self._listen_to_messages)  # type: ignore
+        self._subscribe_to_target()
+        self._handle_target_update()
+        self.set_interval(0.2, lambda: self.call_after_refresh(self._align_to_target))
+
+    def _listen_to_messages(self, event: events.Event) -> None:
+        """Listen to some events of the target widget."""
+
+        try:
+            option_list = self.option_list
+        except NoMatches:
+            # This can happen if the event is an Unmount event
+            # during application shutdown.
+            return
+
+        if isinstance(event, events.Key) and option_list.option_count:
+            displayed = self.display
+            highlighted = option_list.highlighted or 0
+            if event.key == "down":
+                # Check if there's only one item and it matches the search string
+                if option_list.option_count == 1:
+                    search_string = self.get_search_string(self._get_target_state())
+                    first_option = option_list.get_option_at_index(0).prompt
+                    text_from_option = (
+                        first_option.plain
+                        if isinstance(first_option, Text)
+                        else first_option
+                    )
+                    if text_from_option == search_string:
+                        # Don't prevent default behavior in this case
+                        return
+
+                # If you press `down` while in an Input and the autocomplete is currently
+                # hidden, then we should show the dropdown.
+                event.prevent_default()
+                event.stop()
+                if displayed:
+                    highlighted = (highlighted + 1) % option_list.option_count
+                else:
+                    self.display = True
+                    highlighted = 0
+
+                option_list.highlighted = highlighted
+
+            elif event.key == "up":
+                if displayed:
+                    event.prevent_default()
+                    event.stop()
+                    highlighted = (highlighted - 1) % option_list.option_count
+                    option_list.highlighted = highlighted
+            elif event.key == "enter":
+                if self.prevent_default_enter and displayed:
+                    event.prevent_default()
+                    event.stop()
+                self._complete(option_index=highlighted)
+            elif event.key == "tab":
+                if self.prevent_default_tab and displayed:
+                    event.prevent_default()
+                    event.stop()
+                self._complete(option_index=highlighted)
+            elif event.key == "escape":
+                if displayed:
+                    event.prevent_default()
+                    event.stop()
+                self.action_hide()
+
+        if isinstance(event, Input.Changed):
+            # We suppress Changed events from the target widget, so that we don't
+            # handle change events as a result of performing a completion.
+            self._handle_target_update()
+
+    def action_hide(self) -> None:
+        self.styles.display = "none"
+
+    def action_show(self) -> None:
+        self.styles.display = "block"
+
+    def _complete(self, option_index: int) -> None:
+        """Do the completion (i.e. insert the selected item into the target input).
+
+        This is when the user highlights an option in the dropdown and presses tab or enter.
+        """
+        if not self.display or self.option_list.option_count == 0:
+            return
+
+        option_list = self.option_list
+        highlighted = option_index
+        option = cast(DropdownItem, option_list.get_option_at_index(highlighted))
+        highlighted_value = option.value
+        with self.prevent(Input.Changed):
+            self.apply_completion(highlighted_value, self._get_target_state())
+        self.post_completion()
+
+    def post_completion(self) -> None:
+        """This method is called after a completion is applied. By default, it simply hides the dropdown."""
+        self.action_hide()
+
+    def apply_completion(self, value: str, state: TargetState) -> None:
+        """Apply the completion to the target widget.
+
+        This method updates the state of the target widget to the reflect
+        the value the user has chosen from the dropdown list.
+        """
+        target = self.target
+        target.value = ""
+        target.insert_text_at_cursor(value)
+
+        # We need to rebuild here because we've prevented the Changed events
+        # from being sent to the target widget, meaning AutoComplete won't spot
+        # intercept that message, and would not trigger a rebuild like it normally
+        # does when a Changed event is received.
+        new_target_state = self._get_target_state()
+        self._rebuild_options(
+            new_target_state, self.get_search_string(new_target_state)
+        )
+
+    @property
+    def target(self) -> Input:
+        """The resolved target widget."""
+        if isinstance(self._target, Input):
+            return self._target
+        else:
+            target = self.screen.query_one(self._target)
+            assert isinstance(target, Input)
+            return target
+
+    def _subscribe_to_target(self) -> None:
+        """Attempt to subscribe to the target widget, if it's available."""
+        target = self.target
+        self.watch(target, "has_focus", self._handle_focus_change)
+        self.watch(target, "selection", self._align_and_rebuild)
+
+    def _align_and_rebuild(self) -> None:
+        self._align_to_target()
+        self._target_state = self._get_target_state()
+        search_string = self.get_search_string(self._target_state)
+        self._rebuild_options(self._target_state, search_string)
+
+    def _align_to_target(self) -> None:
+        """Align the dropdown to the position of the cursor within
+        the target widget, and constrain it to be within the screen."""
+        x, y = self.target.cursor_screen_offset
+        dropdown = self.option_list
+        width, height = dropdown.outer_size
+
+        # Constrain the dropdown within the screen.
+        x, y, _width, _height = Region(x - 1, y + 1, width, height).constrain(
+            "inside",
+            "none",
+            Spacing.all(0),
+            self.screen.scrollable_content_region,
+        )
+        self.absolute_offset = Offset(x, y)
+        self.refresh(layout=True)
+
+    def _get_target_state(self) -> TargetState:
+        """Get the state of the target widget."""
+        target = self.target
+        return TargetState(
+            text=target.value,
+            cursor_position=target.cursor_position,
+        )
+
+    def _handle_focus_change(self, has_focus: bool) -> None:
+        """Called when the focus of the target widget changes."""
+        if not has_focus:
+            self.action_hide()
+        else:
+            target_state = self._get_target_state()
+            search_string = self.get_search_string(target_state)
+            self._rebuild_options(target_state, search_string)
+
+    def _handle_target_update(self) -> None:
+        """Called when the state (text or cursor position) of the target is updated.
+
+        Here we align the dropdown to the target, determine if it should be visible,
+        and rebuild the options in it.
+        """
+        self._target_state = self._get_target_state()
+        search_string = self.get_search_string(self._target_state)
+
+        # Determine visibility after the user makes a change in the
+        # target widget (e.g. typing in a character in the Input).
+        self._rebuild_options(self._target_state, search_string)
+        self._align_to_target()
+
+        if self.should_show_dropdown(search_string):
+            self.action_show()
+        else:
+            self.action_hide()
+
+    def should_show_dropdown(self, search_string: str) -> bool:
+        """
+        Determine whether to show or hide the dropdown based on the current state.
+
+        This method can be overridden to customize the visibility behavior.
+
+        Args:
+            search_string: The current search string.
+
+        Returns:
+            bool: True if the dropdown should be shown, False otherwise.
+        """
+        option_list = self.option_list
+        option_count = option_list.option_count
+
+        if len(search_string) == 0 or option_count == 0:
+            return False
+        elif option_count == 1:
+            first_option = option_list.get_option_at_index(0).prompt
+            text_from_option = (
+                first_option.plain if isinstance(first_option, Text) else first_option
+            )
+            return text_from_option != search_string
+        else:
+            return True
+
+    def _rebuild_options(self, target_state: TargetState, search_string: str) -> None:
+        """Rebuild the options in the dropdown.
+
+        Args:
+            target_state: The state of the target widget.
+        """
+        option_list = self.option_list
+        option_list.clear_options()
+        if self.target.has_focus:
+            matches = self._compute_matches(target_state, search_string)
+            if matches:
+                option_list.add_options(matches)
+                option_list.highlighted = 0
+
+    def get_search_string(self, target_state: TargetState) -> str:
+        """This value will be passed to the match function.
+
+        This could be, for example, the text in the target widget, or a substring of that text.
+
+        Returns:
+            The search string that will be used to filter the dropdown options.
+        """
+        return target_state.text[: target_state.cursor_position]
+
+    def _compute_matches(
+        self, target_state: TargetState, search_string: str
+    ) -> list[DropdownItem]:
+        """Compute the matches based on the target state.
+
+        Args:
+            target_state: The state of the target widget.
+
+        Returns:
+            The matches to display in the dropdown.
+        """
+
+        # If items is a callable, then it's a factory function that returns the candidates.
+        # Otherwise, it's a list of candidates.
+        candidates = self.get_candidates(target_state)
+        matches = self.get_matches(target_state, candidates, search_string)
+        return matches
+
+    def get_candidates(self, target_state: TargetState) -> list[DropdownItem]:
+        """Get the candidates to match against."""
+        candidates = self.candidates
+        if isinstance(candidates, Sequence):
+            return list(candidates)
+        elif candidates is None:
+            raise NotImplementedError(
+                "You must implement get_candidates in your AutoComplete subclass, because candidates is None"
+            )
+        else:
+            # candidates is a callable
+            return candidates(target_state)
+
+    def get_matches(
+        self,
+        target_state: TargetState,
+        candidates: list[DropdownItem],
+        search_string: str,
+    ) -> list[DropdownItem]:
+        """Given the state of the target widget, return the DropdownItems
+        which match the query string and should be appear in the dropdown.
+
+        Args:
+            target_state: The state of the target widget.
+            candidates: The candidates to match against.
+            search_string: The search string to match against.
+
+        Returns:
+            The matches to display in the dropdown.
+        """
+        if not search_string:
+            return candidates
+
+        matches_and_scores: list[tuple[DropdownItem, float]] = []
+        append_score = matches_and_scores.append
+        match = self.match
+
+        for candidate in candidates:
+            candidate_string = candidate.value
+            score, offsets = match(search_string, candidate_string)
+            if score > 0:
+                highlighted = self.apply_highlights(candidate.main, offsets)
+                highlighted_item = DropdownItemHit(
+                    main=highlighted,
+                    prefix=candidate.prefix,
+                    id=candidate.id,
+                    disabled=candidate.disabled,
+                )
+                append_score((highlighted_item, score))
+
+        matches_and_scores.sort(key=itemgetter(1), reverse=True)
+        matches = [match for match, _ in matches_and_scores]
+        return matches
+
+    def match(self, query: str, candidate: str) -> tuple[float, tuple[int, ...]]:
+        """Match a query (search string) against a candidate (dropdown item value).
+
+        Returns a tuple of (score, offsets) where score is a float between 0 and 1,
+        used for sorting the matches, and offsets is a tuple of integers representing
+        the indices of the characters in the candidate string that match the query.
+
+        So, if the query is "hello" and the candidate is "hello world",
+        and the offsets will be (0,1,2,3,4). The score can be anything you want -
+        and the highest score will be at the top of the list by default.
+
+        The offsets will be highlighted in the dropdown list.
+
+        A score of 0 means no match, and such candidates will not be shown in the dropdown.
+
+        Args:
+            query: The search string.
+            candidate: The candidate string (dropdown item value).
+
+        Returns:
+            A tuple of (score, offsets).
+        """
+        return self._fuzzy_search.match(query, candidate)
+
+    def apply_highlights(self, candidate: Content, offsets: tuple[int, ...]) -> Content:
+        """Highlight the candidate with the fuzzy match offsets.
+
+        Args:
+            candidate: The candidate which matched the query. Note that this may already have its
+                own styling applied.
+            offsets: The offsets to highlight.
+        Returns:
+            A [rich.text.Text][`Text`] object with highlighted matches.
+        """
+        # TODO - let's have styles which account for the cursor too
+        match_style = Style.from_rich_style(
+            self.get_component_rich_style("autocomplete--highlight-match", partial=True)
+        )
+
+        plain = candidate.plain
+        for offset in offsets:
+            if not plain[offset].isspace():
+                candidate = candidate.stylize(match_style, offset, offset + 1)
+
+        return candidate
+
+    @property
+    def option_list(self) -> AutoCompleteList:
+        return self.query_one(AutoCompleteList)
+
+    @on(OptionList.OptionSelected, "AutoCompleteList")
+    def _apply_completion(self, event: OptionList.OptionSelected) -> None:
+        # Handles click events on dropdown items.
+        self._complete(event.option_index)

textual_autocomplete/_path_autocomplete.py

@@ -0,0 +1,187 @@
+from __future__ import annotations
+
+import os
+from pathlib import Path
+from typing import Any, Callable
+from os import DirEntry
+from textual.content import Content
+from textual.widgets import Input
+from textual.cache import LRUCache
+
+from textual_autocomplete import DropdownItem, AutoComplete, TargetState
+
+
+class PathDropdownItem(DropdownItem):
+    def __init__(self, completion: str, path: Path) -> None:
+        super().__init__(completion)
+        self.path = path
+
+
+def default_path_input_sort_key(item: PathDropdownItem) -> tuple[bool, bool, str]:
+    """Sort key function for results within the dropdown.
+
+    Args:
+        item: The PathDropdownItem to get a sort key for.
+
+    Returns:
+        A tuple of (is_dotfile, is_file, lowercase_name) for sorting.
+    """
+    name = item.path.name
+    is_dotfile = name.startswith(".")
+    return (not item.path.is_dir(), not is_dotfile, name.lower())
+
+
+class PathAutoComplete(AutoComplete):
+    def __init__(
+        self,
+        target: Input | str,
+        path: str | Path = ".",
+        *,
+        show_dotfiles: bool = True,
+        sort_key: Callable[[PathDropdownItem], Any] = default_path_input_sort_key,
+        folder_prefix: Content = Content("📂"),
+        file_prefix: Content = Content("📄"),
+        prevent_default_enter: bool = True,
+        prevent_default_tab: bool = True,
+        cache_size: int = 100,
+        name: str | None = None,
+        id: str | None = None,
+        classes: str | None = None,
+        disabled: bool = False,
+    ) -> None:
+        """An autocomplete widget for filesystem paths.
+
+        Args:
+            target: The target input widget to autocomplete.
+            path: The base path to autocomplete from.
+            show_dotfiles: Whether to show dotfiles (files/dirs starting with ".").
+            sort_key: Function to sort the dropdown items.
+            folder_prefix: The prefix for folder items (e.g. 📂).
+            file_prefix: The prefix for file items (e.g. 📄).
+            prevent_default_enter: Whether to prevent the default enter behavior.
+            prevent_default_tab: Whether to prevent the default tab behavior.
+            cache_size: The number of directories to cache.
+            name: The name of the widget.
+            id: The DOM node id of the widget.
+            classes: The CSS classes of the widget.
+            disabled: Whether the widget is disabled.
+        """
+        super().__init__(
+            target,
+            None,
+            prevent_default_enter=prevent_default_enter,
+            prevent_default_tab=prevent_default_tab,
+            name=name,
+            id=id,
+            classes=classes,
+            disabled=disabled,
+        )
+        self.path = Path(path) if isinstance(path, str) else path
+        self.show_dotfiles = show_dotfiles
+        self.sort_key = sort_key
+        self.folder_prefix = folder_prefix
+        self.file_prefix = file_prefix
+        self._directory_cache: LRUCache[str, list[DirEntry[str]]] = LRUCache(cache_size)
+
+    def get_candidates(self, target_state: TargetState) -> list[DropdownItem]:
+        """Get the candidates for the current path segment.
+
+        This is called each time the input changes or the cursor position changes/
+        """
+        current_input = target_state.text[: target_state.cursor_position]
+
+        if "/" in current_input:
+            last_slash_index = current_input.rindex("/")
+            path_segment = current_input[:last_slash_index] or "/"
+            directory = self.path / path_segment if path_segment != "/" else self.path
+        else:
+            directory = self.path
+
+        # Use the directory path as the cache key
+        cache_key = str(directory)
+        cached_entries = self._directory_cache.get(cache_key)
+
+        if cached_entries is not None:
+            entries = cached_entries
+        else:
+            try:
+                entries = list(os.scandir(directory))
+                self._directory_cache[cache_key] = entries
+            except OSError:
+                return []
+
+        results: list[PathDropdownItem] = []
+        for entry in entries:
+            # Only include the entry name, not the full path
+            completion = entry.name
+            if not self.show_dotfiles and completion.startswith("."):
+                continue
+            if entry.is_dir():
+                completion += "/"
+            results.append(PathDropdownItem(completion, path=Path(entry.path)))
+
+        results.sort(key=self.sort_key)
+        folder_prefix = self.folder_prefix
+        file_prefix = self.file_prefix
+        return [
+            DropdownItem(
+                item.main,
+                prefix=folder_prefix if item.path.is_dir() else file_prefix,
+            )
+            for item in results
+        ]
+
+    def get_search_string(self, target_state: TargetState) -> str:
+        """Return only the current path segment for searching in the dropdown."""
+        current_input = target_state.text[: target_state.cursor_position]
+
+        if "/" in current_input:
+            last_slash_index = current_input.rindex("/")
+            search_string = current_input[last_slash_index + 1 :]
+            return search_string
+        else:
+            return current_input
+
+    def apply_completion(self, value: str, state: TargetState) -> None:
+        """Apply the completion by replacing only the current path segment."""
+        target = self.target
+        current_input = state.text
+        cursor_position = state.cursor_position
+
+        # There's a slash before the cursor, so we only want to replace
+        # the text after the last slash with the selected value
+        try:
+            replace_start_index = current_input.rindex("/", 0, cursor_position)
+        except ValueError:
+            # No slashes, so we do a full replacement
+            new_value = value
+            new_cursor_position = len(value)
+        else:
+            # Keep everything before and including the slash before the cursor.
+            path_prefix = current_input[: replace_start_index + 1]
+            new_value = path_prefix + value
+            new_cursor_position = len(path_prefix) + len(value)
+
+        with self.prevent(Input.Changed):
+            target.value = new_value
+            target.cursor_position = new_cursor_position
+
+    def post_completion(self) -> None:
+        if not self.target.value.endswith("/"):
+            self.action_hide()
+
+    def should_show_dropdown(self, search_string: str) -> bool:
+        default_behavior = super().should_show_dropdown(search_string)
+        return (
+            default_behavior
+            or (search_string == "" and self.target.value != "")
+            and self.option_list.option_count > 1
+        )
+
+    def clear_directory_cache(self) -> None:
+        """Clear the directory cache. If you know that the contents of the directory have changed,
+        you can call this method to invalidate the cache.
+        """
+        self._directory_cache.clear()
+        target_state = self._get_target_state()
+        self._rebuild_options(target_state, self.get_search_string(target_state))

textual_autocomplete/fuzzy_search.py

@@ -0,0 +1,162 @@
+"""
+Fuzzy matcher.
+
+This class is used by the [command palette](/guide/command_palette) to match search terms.
+
+This is the matcher that powers Textual's command palette.
+
+Thanks to Will McGugan for the implementation.
+"""
+
+from __future__ import annotations
+
+from operator import itemgetter
+from re import IGNORECASE, escape, finditer, search
+from typing import Iterable, NamedTuple
+
+from textual.cache import LRUCache
+
+
+class _Search(NamedTuple):
+    """Internal structure to keep track of a recursive search."""
+
+    candidate_offset: int = 0
+    query_offset: int = 0
+    offsets: tuple[int, ...] = ()
+
+    def branch(self, offset: int) -> tuple[_Search, _Search]:
+        """Branch this search when an offset is found.
+
+        Args:
+            offset: Offset of a matching letter in the query.
+
+        Returns:
+            A pair of search objects.
+        """
+        _, query_offset, offsets = self
+        return (
+            _Search(offset + 1, query_offset + 1, offsets + (offset,)),
+            _Search(offset + 1, query_offset, offsets),
+        )
+
+    @property
+    def groups(self) -> int:
+        """Number of groups in offsets."""
+        groups = 1
+        last_offset, *offsets = self.offsets
+        for offset in offsets:
+            if offset != last_offset + 1:
+                groups += 1
+            last_offset = offset
+        return groups
+
+
+class FuzzySearch:
+    """Performs a fuzzy search.
+
+    Unlike a regex solution, this will finds all possible matches.
+    """
+
+    cache: LRUCache[tuple[str, str, bool], tuple[float, tuple[int, ...]]] = LRUCache(
+        1024 * 4
+    )
+
+    def __init__(self, case_sensitive: bool = False) -> None:
+        """Initialize fuzzy search.
+
+        Args:
+            case_sensitive: Is the match case sensitive?
+        """
+
+        self.case_sensitive = case_sensitive
+
+    def match(self, query: str, candidate: str) -> tuple[float, tuple[int, ...]]:
+        """Match against a query.
+
+        Args:
+            query: The fuzzy query.
+            candidate: A candidate to check,.
+
+        Returns:
+            A pair of (score, tuple of offsets). `(0, ())` for no result.
+        """
+        query_regex = ".*?".join(f"({escape(character)})" for character in query)
+        if not search(
+            query_regex, candidate, flags=0 if self.case_sensitive else IGNORECASE
+        ):
+            # Bail out early if there is no possibility of a match
+            return (0.0, ())
+
+        cache_key = (query, candidate, self.case_sensitive)
+        if cache_key in self.cache:
+            return self.cache[cache_key]
+        result = max(
+            self._match(query, candidate), key=itemgetter(0), default=(0.0, ())
+        )
+        self.cache[cache_key] = result
+        return result
+
+    def _match(
+        self, query: str, candidate: str
+    ) -> Iterable[tuple[float, tuple[int, ...]]]:
+        """Generator to do the matching.
+
+        Args:
+            query: Query to match.
+            candidate: Candidate to check against.
+
+        Yields:
+            Pairs of score and tuple of offsets.
+        """
+        if not self.case_sensitive:
+            query = query.lower()
+            candidate = candidate.lower()
+
+        # We need this to give a bonus to first letters.
+        first_letters = {match.start() for match in finditer(r"\w+", candidate)}
+
+        def score(search: _Search) -> float:
+            """Sore a search.
+
+            Args:
+                search: Search object.
+
+            Returns:
+                Score.
+
+            """
+            # This is a heuristic, and can be tweaked for better results
+            # Boost first letter matches
+            offset_count = len(search.offsets)
+            score: float = offset_count + len(
+                first_letters.intersection(search.offsets)
+            )
+            # Boost to favor less groups
+            normalized_groups = (offset_count - (search.groups - 1)) / offset_count
+            score *= 1 + (normalized_groups * normalized_groups)
+            return score
+
+        stack: list[_Search] = [_Search()]
+        push = stack.append
+        pop = stack.pop
+        query_size = len(query)
+        find = candidate.find
+        # Limit the number of loops out of an abundance of caution.
+        # This should be hard to reach without contrived data.
+        remaining_loops = 10_000
+        while stack and (remaining_loops := remaining_loops - 1):
+            search = pop()
+            offset = find(query[search.query_offset], search.candidate_offset)
+            if offset != -1:
+                if not set(candidate[search.candidate_offset :]).issuperset(
+                    query[search.query_offset :]
+                ):
+                    # Early out if there is not change of a match
+                    continue
+                advance_branch, branch = search.branch(offset)
+                if advance_branch.query_offset == query_size:
+                    yield score(advance_branch), advance_branch.offsets
+                    push(branch)
+                else:
+                    push(branch)
+                    push(advance_branch)